Bar chart

Bootstrap 5 Bar chart component

Responsive Bar chart built with Bootstrap 5. Learn how to create a Bootstrap Bar Chart and see examples of proper implementation and customization.

Basic example

You can initialize simple charts with data-mdb-attributes - it doesn't require any additional JS code.

Note: This method allows only one dataset - more complicated charts require JavaScript initialization.

Via data-mdb-attributes:

Edit in sandbox 
<canvas
  data-mdb-chart="bar"
  data-mdb-dataset-label="Traffic"
  data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
  data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>

The same effect achieved via Javascript initialization:

Edit in sandbox 
<canvas id="bar-chart"></canvas>
// Chart
const dataBar = {
  type: 'bar',
  data: {
    labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
    datasets: [
      {
        label: 'Traffic',
        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
      },
    ],
  },
};

new mdb.Chart(document.getElementById('bar-chart'), dataBar);

Bar chart horizontal

Change the orientation of your bar chart from vertical to horizontal by setting the indexAxis option to 'y'.

Edit in sandbox 
<canvas id="bar-chart-horizontal"></canvas>
// Chart
const dataBarHorizontal = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Traffic',
        data: [30, 15, 62, 65, 61, 65, 40],
      },
    ],
  },
};

const optionsBarHorizontal = {
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        stacked: true,
        grid: {
          display: true,
          borderDash: [2],
          zeroLineColor: 'rgba(0,0,0,0)',
          zeroLineBorderDash: [2],
          zeroLineBorderDashOffset: [2],
        },
        ticks: {
          color: 'rgba(0,0,0, 0.5)',
        },
      },
      y: {
        stacked: true,
        grid: {
          display: false,
        },
        ticks: {
          color: 'rgba(0,0,0, 0.5)',
        },
      },
    },
  },
};

new mdb.Chart(document.getElementById('bar-chart-horizontal'), dataBarHorizontal, optionsBarHorizontal);

Bar chart with custom options

MDB provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart constructor.

Note: Read API tab to learn more about available options.

Edit in sandbox 
<canvas id="chart-options-example"></canvas>
// Data
const dataChartOptionsExample = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
        borderWidth: 1,
      },
    ],
  },
};

// Options
const optionsChartOptionsExample = {
  options: {
    scales: {
      x:
        {
          ticks: {
            color: '#4285F4',
          },
        },
      y:
        {
          ticks: {
            color: '#f44242',
          },
        },
    },
  },
};

new mdb.Chart(
  document.getElementById('chart-options-example'),
  dataChartOptionsExample,
  optionsChartOptionsExample
);

Bar chart with custom tooltip

Set custom text format inside a tooltip by using plugins option.

Edit in sandbox 
<canvas id="bar-chart-custom-tooltip"></canvas>
// Bar chart with custom tooltip
const dataBarCustomTooltip = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Traffic',
        data: [30, 15, 62, 65, 61, 65, 40],
      },
    ],
  },
};

const optionsBarCustomTooltip = {
  options: {
    plugins: {
      tooltip: {
        callbacks: {
           label: function (context) {
            let label = context.dataset.label || '';
            label = `${label}: ${context.formattedValue} users`;
            return label;
          },
        },
       },
     },
  },
};

new mdb.Chart(
  document.getElementById('bar-chart-custom-tooltip'),
  dataBarCustomTooltip,
  optionsBarCustomTooltip);