Chart Js Timeline Code Example

Example 1: chart.js

<canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, {     type: 'bar',     data: {         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],         datasets: [{             label: '# of Votes',             data: [12, 19, 3, 5, 2, 3],             backgroundColor: [                 'rgba(255, 99, 132, 0.2)',                 'rgba(54, 162, 235, 0.2)',                 'rgba(255, 206, 86, 0.2)',                 'rgba(75, 192, 192, 0.2)',                 'rgba(153, 102, 255, 0.2)',                 'rgba(255, 159, 64, 0.2)'             ],             borderColor: [                 'rgba(255, 99, 132, 1)',                 'rgba(54, 162, 235, 1)',                 'rgba(255, 206, 86, 1)',                 'rgba(75, 192, 192, 1)',                 'rgba(153, 102, 255, 1)',                 'rgba(255, 159, 64, 1)'             ],             borderWidth: 1         }]     },     options: {         scales: {             yAxes: [{                 ticks: {                     beginAtZero: true                 }             }]         }     } }); </script>

Example 2: chart.js

//in terminal:  yarn add chart.js // or npm install chart.js if you use npm //html file:  <canvas id="my-chart" width="400" height="400"></canvas> //js file import Chart from 'chart.js'  const ctx = document.getElementById('my-chart').getContext('2d'); const chart = new Chart(ctx, {   // The type of chart we want to create   type: 'bar',    // The data for our dataset   data: {     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],     datasets: [{       label: 'My First dataset',       backgroundColor: 'rgb(255, 99, 132)',       borderColor: 'rgb(255, 99, 132)',       data: [0, 10, 5, 2, 20, 30, 45]     }]   },    // Configuration options go here   options: {}   }); };