javascript

Create line chart in Chart.js

var ctx = document.getElementById("line_chart").getContext('2d');

var myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Point 1', 'Point 2', 'Point 3', 'Point 4'],
      datasets: [{
         label: "hello",
         data: [40, 50, 80, 20],
         backgroundColor: "rgba(0,0,0,0)",
         borderColor: "#319fe2"
      }]
   },
   options: {
      
   }
});

Add below code in your HTML fille

<canvas id="line_chart" width="400" height="200"></canvas>

Live Demo


Chart.js provides a simple way to create a line chart very easily. Just import Chart.js library on your webpage and call new Chart() function and pass required values to it.

You will have to pass ctx and the type of chart which you want to plot along with labels names array and datasets objects where you can define required styling to each line.

Was this helpful?