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: {
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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?