Chart.js Bar Chart

A bar chart is a statistical graph that uses the length of rectangular bars to represent variables.

Bar charts are used to compare two or more values (different times or conditions), with only one variable, typically used for analyzing smaller datasets.

The type property for a bar chart is bar, which describes the chart type.

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

Next, we will create a simple bar chart:

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];  // Set labels for the X-axis
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Bar Chart',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [       // Set background colors for each bar
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [       // Set border colors for each bar
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1       // Set border width
  }]
};
const config = {
  type: 'bar', // Set chart type
  data: data,  // Set dataset
  options: {
    scales: {
      y: {
        beginAtZero: true // Set y-axis to start at 0
      }
    }
  },
};
const myChart = new Chart(ctx, config);

The above example outputs:

Horizontal Bar Chart

A horizontal bar chart is a variation of the vertical bar chart, often used to display data trends and compare multiple datasets side by side.

To set up a horizontal bar chart, you need to set the indexAxis property in the options object to y, with the default value being x.

Example

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];  // Set labels for the X-axis
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    label: 'My First Bar Chart',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    backgroundColor: [       // Set background colors for each bar
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [       // Set border colors for each bar
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1       // Set border width
  }]
};
const config = {
  type: 'bar', // Set chart type
  data: data,  // Set dataset
  options: {
    indexAxis: 'y',
  }
};
const myChart = new Chart(ctx, config);

The above example outputs: