Chart.js

Chart.js on avoimen lähdekoodin JavaScript-kirjasto HTML5-pohjaisten kaavioiden luomiseen.

Käyttöönotto 
Chart.js on saatavilla GitHubista, asentamalla npm:n kautta komennolla 
npm install chart.js
tai seuraavan JavaScript-koodin avulla
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Kaaviotyypit 
aluekaavio () 
pylväskaavio () 
kuplakaavio () 
donitsi- ja piirakkakaavio (doughtnut and pie chart) 
viivakaavio () 
yhdistelmäkaavio () 
polaari-aluekaavio () 
hämähäkkikaavio ()
pistekaavio ()

Esimerkki kaavion lisäämisestä 

Kaavion saa lisättyä HTML-koodiin canvas-tägin avulla seuraavasti :
<canvas id="myChart"></canvas> 

Seuraavan koodin avulla voidaan luoda viivakaavio
<script>
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };
</script>

Lopuksi kaavio renderöidään seuraavasti

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

Lisenssi 
MIT-lisenssi.

Lähteet

Aiheesta muualla 
 https://www.chartjs.org/

JavaScript