JavaScript

How to Draw Bar Charts with Chart.js

 

When visually representing data, graphs are an essential tool. In particular, simple and clear bar charts are ideal for presenting statistical or comparative data.
This article explains how to draw bar charts using the JavaScript library Chart.js. In addition to bar charts, Chart.js supports a wide range of charts including line charts, radar charts, pie charts, bubble charts, and scatter plots.
Even beginners can implement it easily. We will explain with basic sample code for better understanding.

Contents
  1. CSS Description for Drawing Bar Charts
  2. HTML Description for Drawing Bar Charts
  3. JavaScript Description to Render Bar Chart with Chart.js
  4. Demo Page: Rendering Bar Chart with Chart.js
  5. Source: Chart.js
  6. Conclusion

CSS Description for Drawing Bar Charts

* No specific style is required. Please modify as needed.

<style type="text/css">
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.4em;
}
</style>

HTML Description for Drawing Bar Charts

* Assign id=”myChart” to the canvas tag that renders the bar chart.

<h1>Rendering a bar chart using Chart.js</h1>

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

JavaScript Description to Render Bar Chart with Chart.js

* Load the chart.js file and use document.getElementById(id).getContext(‘2d’) to get the drawing context.
The code is based on the Chart.js official “Creating a Chart” guide.

<script type="text/javascript" src="chart.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '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: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Demo Page: Rendering Bar Chart with Chart.js

Demo Page: Rendering Bar Chart with Chart.js

Source: Chart.js

The following is the source reference.

Chart.js

Conclusion

With Chart.js, you can easily draw various types of charts, including bar charts, with simple code. Just place a canvas tag in HTML and set the data in JavaScript to create colorful and easy-to-read charts.
It also offers high customizability, allowing you to freely adjust labels, colors, axis settings, and more.
If you want to visualize your data easily, try using Chart.js. Use the sample code and demo page in this article to create your own charts.

　
* Please use at your own risk if you reuse this.
Do not reuse the Google Analytics tag included in the head tag of the demo page.

Chart.js
RELATED POST