Fullscreen-weergave voor Chart.js

Om grafieken beter leesbaar te maken op grote schermen kan een fullscreen-knop worden toegevoegd. Hiervoor wordt de native Fullscreen API van de browser gebruikt.

HTML-structuur

Plaats de titel en fullscreen-knop in een flex-container.

 1<!-- weer grafiek -->
 2<div class="chart-container">
 3   <div class="chart-inner-container">
 4
 5      <!-- Flex-container -->
 6      <div class="chart-header">
 7         <h4>Weer Historie Rotterdam</h4>
 8         <button class="chartjs-fullscreen-btn" aria-label="View diagram in fullscreen" style="opacity: 0.5;">⛶</button>
 9      </div>
10
11      <div class="chartjs-canvas">
12         <canvas id="canvastemp"></canvas>
13      </div>
14
15      <small><a  href="http://www.buienradar.nl" target="_blank">buienradar.nl</a>
16      <p><small>Inzoomen = scrollen met het muiswiel, Pannen = houd shift ingedrukt en klik met de muis</small></P>
17
18   </div>
19</div>
20
21<script src="/_static/js/linegraph.js" defer></script>

CSS container

 1.chart-container {
 2   position: relative;
 3   height: 400px;
 4}
 5
 6.chart-container:fullscreen {
 7   padding: 2rem;
 8}
 9
10.chart-container:fullscreen::backdrop {
11   background: rgba(0, 0, 0, 0.7);
12}
13
14.chart-inner-container {
15   height: 100%;
16}
17
18.chart-inner-container-fullscreen {
19   background-color: white;
20   border-radius: var(--bs-border-radius);
21   padding: 1em;
22}

Fullscreen-knop / Header

 1.chart-header {
 2   display: flex;
 3   justify-content: space-between;
 4   align-items: center;
 5   margin-bottom: 0.5rem;
 6}
 7
 8.chart-header h4 {
 9   margin: 0;
10}
11
12.chartjs-fullscreen-btn {
13   width: 28px;
14   height: 28px;
15   background: rgba(255, 255, 255, 0.95);
16   border: 1px solid rgba(0, 0, 0, 0.3);
17   border-radius: 4px;
18   cursor: pointer;
19   display: flex;
20   align-items: center;
21   justify-content: center;
22   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
23   font-size: 14px;
24   line-height: 1;
25   padding: 0;
26   color: #333;
27   transition: all 0.2s;
28}
29
30.chartjs-fullscreen-btn:hover {
31   transform: scale(1.05);
32}

Fullscreen activeren

Niet het canvas, maar de container wordt fullscreen gemaakt. Dit voorkomt schaalproblemen bij terugkeer naar de normale weergave.

document.querySelectorAll('.chartjs-fullscreen-btn')
   .forEach(btn => {

      btn.addEventListener('click', () => {

         const container =
            btn.closest('.chart-header')
               .nextElementSibling;

         if (!document.fullscreenElement) {
            container.requestFullscreen();
         } else {
            document.exitFullscreen();
         }
      });
   });

Resize van alle grafieken

Na het verlaten van fullscreen kan Chart.js kort een verkeerde afmeting tonen. Dit wordt opgelost door alle grafieken direct opnieuw te schalen.

 1document.addEventListener('fullscreenchange', () => {
 2
 3   Object.values(Chart.instances).forEach(chart => chart.resize());
 4
 5   document.querySelectorAll('.chartjs-fullscreen-btn')
 6      .forEach(btn => {
 7         btn.textContent =
 8            document.fullscreenElement ? '✕' : '⛶';
 9
10         // Toggle between two title values
11         btn.title =
12            document.fullscreenElement ? 'Close' : 'Full Screen';
13
14      });
15
16   // Verwijder fullscreen class overal
17   document.querySelectorAll('.chart-inner-container')
18      .forEach(element => {
19         element.classList.remove('chart-inner-container-fullscreen');
20      });
21
22   // Voeg fullscreen class toe aan actieve grafiek
23   if (document.fullscreenElement) {
24
25      document.fullscreenElement
26         .querySelectorAll('.chart-inner-container')
27         .forEach(element => {
28            element.classList.add('chart-inner-container-fullscreen');
29         });
30
31   }
32
33});

Note

Bij de gebruikte Chart.js-versie is Chart.instances een object en geen array. Daarom werkt Chart.instances.forEach(...) niet.

Fullscreen-achtergrond

Een Chart.js canvas heeft standaard een transparante achtergrond.

In normale weergave is de pagina-achtergrond zichtbaar, maar in fullscreen toont de browser standaard een zwarte achtergrond. Hierdoor lijkt de grafiek van kleur te veranderen.

Oplossing:

 1.chart-container:fullscreen {
 2   padding: 2rem;
 3   background: #f8f8f8;
 4}
 5
 6/* Dit bepaald de ruimte voor de grafiek in fullescreen mode */
 7.chart-container:fullscreen .chartjs-canvas {
 8   /* iets ruimte voor footer items */
 9   height: 95%;
10}
11
12.chart-inner-container-fullscreen {
13   background-color: white;
14   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
15   border-radius: var(--bs-border-radius);
16   box-shadow: var(--bs-box-shadow-lg);
17   padding-top: 2em;
18   padding-left: 2em;
19   padding-right: 2em;
20   padding-bottom: 4em;
21   height: 100%;
22}
23
24.chart-container:fullscreen .chartjs-fullscreen-btn:hover {
25   background-color: red;
26   color: white;
27}

Resultaat

  • Titel en fullscreen-knop staan op dezelfde regel.

  • Grafiek opent schermvullend.

  • Schalen werkt correct bij openen en sluiten.

  • Geen zichtbare renderflits bij terugkeer.

  • De oorspronkelijke witte achtergrond blijft behouden.

  • Slechts enkele regels HTML, CSS en JavaScript zijn nodig.