Chart.js — Bar and Line Charts

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Arc Configuration

We can change the arc options for polar area, donut, and pie charts.

The properties are all in the Chart.defaults.global.elements.arc object.

For instance, we can write:

Chart.defaults.global.elements.arc.backgroundColor = 'green';

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'polarArea',
  data: {
    datasets: [{
      data: [10, 20, 30]
    }],
    labels: [
      'Red',
      'Yellow',
      'Blue'
    ]
  }
});

We set the Chart.defaults.global.elements.arc.backgroundColor property to the color of the bar.

And the polar area chart will now have all the slices in green.

Other options include stroke alignment, border color, and border width.

Line Chart

We can create a line chart by setting a few options.

To add a line chart, we create a canvas by writing:

<canvas id="myChart"></canvas>

in the HTML.

Then in the JavaScript code, we write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We can set many properties in the datasets entries.

Some of them include:

• backgrounrColor — background-color for the line chart
• borderColor — line color
• borderDash — length and spacing of dashes
• borderWidth — line width
• label — dataset label
• order — drawing order
• pointStyle — point style.

and many more.

Point and line styles can also be changed with various options.

Stacked Area Chart

We can have multiple line charts that are stacked on top of each other.

To add that, we write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Apples',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'red'
    }, {
      label: '# of Oranges',
      data: [20, 13, 5],
      borderWidth: 1,
      borderColor: 'blue'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We have the stacked property set to true to make the 2 lines stacked on top of each other.

The borderColor are set to distinguish them.

Bar Charts

We can create bar charts to show values as vertical bars.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We can have the backgroundColor to set the background color of the bars.

borderColor sets the border color of the bars.

borderWidth sets the border width.

labels have the x-axis labels.

label has the legend label.

data has the y-coordinate values.

Other options include the bar thickness, percentage of the category filled, and max bar thickness:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      barPercentage: 0.5,
      barThickness: 6,
      maxBarThickness: 8,
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

The barPercentage and categoryPercentage appear as follows:

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |
Sample:     |==============|

Conclusion

We can change the arc configuration of some graphs.

Also, we can add bar and line charts with Chart.js.