Chart.js Line Chart

Line charts can plot data that is organized in columns or rows on a worksheet into a graph.

Line charts can display continuous data over time (set according to a common scale), making them ideal for showing trends in data at equal intervals.

The type attribute for line charts is line, which describes the chart type.

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

Next, we will create a simple line chart:

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];  // Set 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);

The output of the above example is:

Next, we will enrich the line chart by adding options, set as follows:

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];  // Set 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 on hover
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Set the chart type
  data: data,
  options: {
    responsive: true, // Set the chart to be responsive
    interaction: { // Set interaction for each point
      intersect: false,
    },
    scales: { // Set the X and Y axes
      x: {
        display: true,
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Votes'
        }
      }
    }
  }
};
const myChart = new Chart(ctx, config);

The output of the above example is:

Vertical Line Chart

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

To create a vertical line chart, set the indexAxis property in the options object to y, as its default value is x.

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];  // Set 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 on hover
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Set the chart type
  data: data,
  options: {
    indexAxis: 'y', // Set the vertical line chart
    responsive: true, // Set the chart to be responsive
    interaction: { // Set interaction for each point
      intersect: false,
    },
    scales: { // Set the X and Y axes
      x: {
        beginAtZero: true, // Set the X-axis to start at 0
        display: true,
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Votes'
        }
      }
    }
  }
};
const myChart = new Chart(ctx, config);

The output of the above example is: