Chart Js Bar Chart Show Value On Top
Introduction
Chart JS is a popular JavaScript library used to create interactive and customizable charts for data visualization. One of the most common types of charts created with Chart JS is the bar chart. Bar charts are used to display and compare data across different categories or groups. In this article, we will discuss how to show the values on top of the bars in a Chart JS bar chart.
Creating a Bar Chart with Chart JS
Before we dive into showing values on top of the bars, let's first create a basic bar chart with Chart JS. We need to include the Chart JS library in our HTML page and create a canvas element where we will draw the chart. Here's an example:
<!DOCTYPE html><html><head><title>Chart JS Bar Chart</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script></head><body><canvas id="myChart" width="400" height="400"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {type: 'bar',data: {labels: ['January', 'February', 'March', 'April', 'May', 'June'],datasets: [{label: 'Sales',data: [12, 19, 3, 5, 2, 3],backgroundColor: 'rgba(54, 162, 235, 0.2)',borderColor: 'rgba(54, 162, 235, 1)',borderWidth: 1}]},options: {scales: {yAxes: [{ticks: {beginAtZero: true}}]}}});</script></body></html>This code creates a bar chart with a single dataset, showing sales data for the first six months of the year. The chart is displayed in a canvas element with ID "myChart".
Show Values on Top of the Bars
To show the values on top of the bars, we need to use the Chart JS plugin called "chartjs-plugin-datalabels". This plugin allows us to add custom labels to the chart, including the values of each bar. Here's how to include the plugin in our HTML page:
<!DOCTYPE html><html><head><title>Chart JS Bar Chart</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script></head><body><canvas id="myChart" width="400" height="400"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {type: 'bar',plugins: [ChartDataLabels],data: {labels: ['January', 'February', 'March', 'April', 'May', 'June'],datasets: [{label: 'Sales',data: [12, 19, 3, 5, 2, 3],backgroundColor: 'rgba(54, 162, 235, 0.2)',borderColor: 'rgba(54, 162, 235, 1)',borderWidth: 1}]},options: {scales: {yAxes: [{ticks: {beginAtZero: true}}]},plugins: {datalabels: {anchor: 'end',align: 'top',formatter: function(value, context) {return value;}}}}});</script></body></html>Notice that we added the plugin in the head section of our HTML page, and also included it in the "plugins" option of the chart configuration. We also added a "datalabels" section inside the "plugins" option, where we defined the anchor, alignment, and formatter for the labels.
The "anchor" option defines where the label should be anchored to the bar. We set it to "end" to anchor the label to the end of the bar. The "align" option defines the alignment of the label relative to the anchor point. We set it to "top" to align the label to the top of the bar. Finally, the "formatter" option defines a function that formats the label text. In this case, we simply return the value of the bar data.
With these options set, the chart should now display the values on top of the bars.
Customizing the Labels
We can further customize the labels by changing their color, font size, or adding prefix/suffix text. Here are some examples:
plugins: {datalabels: {anchor: 'end',align: 'top',formatter: function(value, context) {return '$' + value; // add dollar sign prefix},color: '#fff', // set label color to whitefont: {size: 16 // set font size to 16px}}}In this example, we added a dollar sign prefix to the label text, set the color to white, and increased the font size to 16 pixels.
Conclusion
Showing the values on top of the bars in a Chart JS bar chart can provide useful information to the viewer and enhance the data visualization. By using the "chartjs-plugin-datalabels" plugin, we can easily add custom labels to the chart and further customize them to fit our needs.