Javascript examples for Chart.js:Bar Chart
Add individual labels to Chart.JS bars
<html> <head> <title>https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> <script type="text/javascript"> window.onload=function(){/*from ww w. j a v a 2 s. co m*/ var data = [12, 19, 3, 5, 4, 3] var data2 = [3, 4, 5, 3, 19, 12] dataNames = [ ["John", "Ceena", "Donald", "Java", "Trump", "Joe"], ["John2", "Ceena2", "Donald2", "Jscript", "Trump2", "Joe2"] ] var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data:{ labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [ { label: 'Weight (kg)', fillColor: "rgba(220,220,220,0.5)", backgroundColor: "rgba(46, 44, 211, 0.7)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: data }, { label: 'Steps', fillColor: "rgba(0,0,0,0.5)", backgroundColor: "rgba(215, 44, 44, 0.7)", highlightFill: "rgba(0,0,0,0.5)", highlightStroke: "rgba(0,0,0,0.5)", data: data2 } ], }, options: { tooltips:{ callbacks: { afterLabel: function(e){return "added By:" +dataNames[e.datasetIndex][e.index]} } }, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); } </script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> </body> </html>