Chart.Js 2.0 Display Values On Bar Chart
Introduction
Chart.Js is a popular JavaScript library for creating beautiful and interactive charts and graphs. With Chart.Js, developers can easily create a wide variety of chart types, including bar charts, line charts, pie charts, and more. In this article, we will focus on how to display values on a bar chart using Chart.Js 2.0.
Creating a Bar Chart with Chart.Js 2.0
Before we can display values on a bar chart, we first need to create a basic bar chart using Chart.Js 2.0. Here's a simple example:
To create this chart, we first need to include the Chart.Js library in our HTML file. We can do this by adding the following code to the head section of our HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>Next, we need to create a canvas element in our HTML file where the chart will be displayed. We can do this by adding the following code to our HTML file:
<canvas id="myChart"></canvas>Finally, we need to create a JavaScript file where we will define our chart data and options. Here's an example:
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(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}}]}}});With this code, we have defined a basic bar chart with six data points representing sales for each month. The chart is displayed on the canvas element with an ID of "myChart".
Displaying Values on a Bar Chart
Now that we have created a basic bar chart, let's move on to displaying values on the chart. To do this, we need to make a few modifications to our JavaScript file. First, we need to add a new option to our chart configuration called "tooltips". This option allows us to display tooltips on our chart when a user hovers over a bar. Here's the updated code:
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(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}}]},tooltips: {callbacks: {label: function(tooltipItem, data) {var value = data.datasets[0].data[tooltipItem.index];return value;}}}}});With this code, we have added a new option to our chart configuration called "tooltips". We have also defined a custom tooltip callback function that will display the value of the bar on the chart when a user hovers over it.
Now when we hover over a bar on the chart, we will see a tooltip that displays the value of that bar:
Conclusion
Displaying values on a bar chart with Chart.Js 2.0 is easy and can be done with just a few lines of code. With the help of the tooltips option, we can create a professional-looking chart that is both informative and visually appealing.