Search code snippets, questions, articles...

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?
Programming Feeds
Learn something new everyday on Devsheet