javascript

Create bar chart in Chart.js

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
       datasets: [{
            label: '# of Votes',
            data: [90, 60, 50, 50, 100],
            backgroundColor: "#00AAFB",
       }]
    },
    options: {
       scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  beginAtZero: true, 
               },
               gridLines: {
                  display: false
               }
            }]
       }
    }
});

In your HTML add below line

<canvas id="myChart" width="400" height="200"></canvas>

Live Demo

The code snippet can be used to create a bar chart in Chart.js. To create a bar chart you have to add Chart.js library on your webpage and create Chart object and pass data to it. Here we have passed labels and datasets to generate our chart. This will provide the values to Chart.js on which basis we want to plot our chart.

You can also pass different options parameters as key-value pairs for plotting your chart.

Was this helpful?