How to draw a bar chart step by step using Chart JS

Hi friends, in this tutorial, you will learn how to draw a bar chart step by step using Chart JS. Actually drawing a bar chart is very easy, you can find many tutorials on Google either using the Google Chart library or the Chart JS library but a question arises when you want to display bar values on top of each bar.

Also, read, Populate dynamic column chart in PHP using Google chart API

In such a case, you can not get the simple method. You will get tutorials but those are a bit complex in order to display the bar values in a simple way, follow the below steps.

Steps to draw a bar chart using Chart js

Step 1:- Create an HTML file (barchart.html) in the root directory of your local server.

Step 2:- Go to Google and search for Chart js plugins data labels or visit here directly and copy the CDN links as given below and paste them into the HTML file you created in Step 1.

https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0 // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2 // latest 2.x.x

Step 3:- Now, you need to add the below javascript tags in the HTML file before the body tag ends.

<script src=”https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

Step 3:- Now, you have to register the chart data labels manually. Remember to put the below line inside the script tag of your HTML file as shown below.

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

plugins: {
                  // Change options for ALL labels of THIS CHART
                  datalabels: {
                    color: 'black',
                    font: {
                      weight: 'bold', // You can customize the font style
                    },
                    align:'top',
                    anchor: 'end',
                    display: true, // Display data labels on the bars

                  }
 },