maken van een statische toegankelijkheidsgrafiek door gebruikt te maken van `chartjs` met `sveltekit`

[SamaraFellaDina]

Ik had hier een link gevonden waarin een uitleg staat hoe je chartjs kan invoegen

[SamaraFellaDina]

Hier kan je onze eerste schets zien van de chart

[Khdulkadir]

Ik heb een statische lijngrafiek gemaakt dmv chartjs. Ik heb dit gedaan door de documentatie van ChartJS te lezen:

  import { Chart } from 'chart.js';

  let chart;

  onMount(() => {
    const rootStyles = getComputedStyle(document.documentElement);
    const colorBlue = rootStyles.getPropertyValue('--color-blue');
    const colorLightBlue = rootStyles.getPropertyValue('--color-lightblue');
    const fontFamily = rootStyles.getPropertyValue('--font-family-regular');
    const colorBlack = rootStyles.getPropertyValue('--color-black');

    const months = ['jan', 'feb', 'mar', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
    const data = {
      labels: months,
      datasets: [{
        data: [20, 30, 40, 60, 80, 50, 70, 90],
        borderColor: colorBlue,
        backgroundColor: colorLightBlue,
        fill: true,
        tension: 0
      }]
    };

    // Chart options
    const options = {
      pointHoverRadius: 8,
      pointHoverBorderWidth: 3,
      pointHoverBackgroundColor: '#FFFFFF',
      pointHitRadius: 10,
      scales: {
        y: {
          grid: {
            display: false
          },
          beginAtZero: true,
          max: 100,
          tickColor: colorBlack,
          ticks: {
            stepSize: 20,
            callback: function(value) {
              return value + '%';  // Display percentages on y-axis
            }
          }
        },
        x: {
          grid: {
            display: false
          }
        }
      },
      plugins: {
        tooltip: {
          enabled: true,  // Enable tooltips
          titleAlign: 'center',
          bodyAlign: 'center',
          backgroundColor: '#FFFFFF',  // Tooltip background color
          borderWidth: 2,
          borderColor: colorBlue,
          padding: 10,
          displayColors: false,
          titleFont: {
            size: 14,
            weight: 'normal',
            family: fontFamily
          },
          titleColor: colorBlue,
          bodyFont: {
            size: 16,
            weight: 'bold',
            family: fontFamily
          },
          bodyColor: colorBlue,
          callbacks: {
            label: function(tooltipItem) {
              return tooltipItem.raw + '%';  // Display percentages in tooltips
            }
          },
        },
        legend: {
          display: false  // Hide the legend
        }
      },
      responsive: true,
      maintainAspectRatio: true,
      onHover: (event, elements) => {
        const canvas = event.native.target;
        if (elements.length) {
          canvas.style.cursor = 'pointer'; // Set cursor to pointer when hovering over a data point
        } else {
          canvas.style.cursor = 'default'; // Reset cursor when not hovering over a data point
        }
      }
    };

    const ctx = document.getElementById('line-chart').getContext('2d');
    chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: options
    });
  });