Chart.js Line Chart

A line chart is data arranged in columns or rows of a worksheet that can be plotted into a line chart.

A line chart can display continuous data that changes over time (according to common scale settings), so it is very suitable for showing trends in data at equal time intervals.

Line CharttypeThe property isline, type describes the chart type.

const config = {
  type: 'line',
  data: data,
};

Next, let's create a simple line chart:

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','April', 'May', 'June', 'July'];  // Set the corresponding labels on the X axis
const data = {
  labels: labels,
  datasets: [{
    label: 'My first line chart',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // Set the color of the line
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Set the chart type
  data: data,
};
const myChart = new Chart(ctx, config);

Try it Yourself »

The output of the above example is:

Next, let's enrich the line chart, add options, and configure as follows:

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','April', 'May', 'June', 'July'];  // Set the corresponding labels on the X axis
const data = {
  labels: labels,
  datasets: [{
    label: 'My first line chart',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // Set the color of the line
        backgroundColor: ['rgba(179, 0, 33, 0.5)'],// Set the fill color of the points
        pointStyle: 'circle',     // Set the point type to circle
    pointRadius: 6,    // Set the radius of the circle points
    pointHoverRadius: 10, // Set the radius of the circle points when the mouse moves over them
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Set the chart type
  data: data,
  options: {
    responsive: true,  // Set the chart to be responsive

    interaction: {  // Set the interaction for each point
      intersect: false,
    },
    scales: {  // Set the X axis and Y axis
      x: {
        display: true,
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Votes'
        }
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Try it Yourself »

The output of the above example is:

Vertical Line Chart

A vertical line chart is a variant of the horizontal line chart.

A vertical line chart requires setting the indexAxis property in the options object toy, the default value of the indexAxis property isx。

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','April', 'May', 'June', 'July'];  // Set the corresponding labels on the X axis
const data = {
  labels: labels,
  datasets: [{
    label: 'My first line chart',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // Set the color of the line
        backgroundColor: ['rgba(179, 0, 33, 0.5)'],// Set the fill color of the points
        pointStyle: 'circle',     // Set the point type to circle
    pointRadius: 6,    // Set the radius of the circle points
    pointHoverRadius: 10, // Set the radius of the circle points when the mouse moves over them
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Set the chart type
  data: data,
  options: {
    indexAxis: 'y', // Set vertical line chart
    responsive: true,  // Set the chart to be responsive

    interaction: {  // Set the interaction for each point
      intersect: false,
    },
    scales: {  // Set the X axis and Y axis
      x: {
                beginAtZero: true,// Set the X axis to start from 0
        display: true,
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Votes'
        }
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Try it Yourself »

The output of the above example is:

Other Extensions