Search code snippets, questions, articles... Chrome Extension

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
               }
            }]
       }
    }
});
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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?
0 Comments
Join Devsheet Ask a Question