javascript - How to custom index label on each bar chart using chartjs? -

i developing site in use bar chart , can't find way customize bar chart in order show value on each bar chart.

here bar chart js

$(function(){         var t;         function size(animate){             if (animate == undefined){                 animate = false;             }             cleartimeout(t);             t = settimeout(function(){                 $("#bar-chart-js").each(function(i,el){                     $(el).attr({                         "width":$(el).parent().width(),                         "height":$(el).parent().outerheight()                     });                 });                 redraw(animate);                 var m = 0;                 $(".chartjs").height("");                 $(".chartjs").each(function(i,el){ m = math.max(m,$(el).height()); });                 $(".chartjs").height(m);             }, 30);         }         $(window).on('resize', function(){ size(false); });          function redraw(animation){             var options = {};             if (!animation){                 options.animation = true;             } else {                 options.animation = true;             }             var datajson1 = <?php echo json_encode($monthly_income);?>;             var datajson2 = <?php echo json_encode($monthly_expense);?>;             var data1 =  $.map(datajson1, function(el) { return el; });             var data2 =  $.map(datajson2, function(el) { return el; });             //console.log(datajson1);             //console.log('data1:' + data1);             var barchartdata = {                 labels : ["january","february","march","april","may","june","july","august","september","october","november","december"],                 datasets : [                     {                         fillcolor : "#79d1cf",                         strokecolor : "#79d1cf",                         data : data1                     },                     {                         fillcolor : "#e67a77",                         strokecolor : "#e67a77",                         data : data2                     }                 ]             };             var myline = new chart(document.getelementbyid("bar-chart-js").getcontext("2d")).bar(barchartdata);         }         size(true);     }); 

i want show index label image below

please me out , appreciate help.

just add labels in animationcomplete callback

var myline = new chart(document.getelementbyid("bar-chart-js").getcontext("2d")).bar(barchartdata, {     showtooltips: false,     onanimationcomplete: function () {          var ctx = this.chart.ctx;         ctx.font = this.scale.font;         ctx.fillstyle = this.scale.textcolor         ctx.textalign = "center";         ctx.textbaseline = "bottom";          this.datasets.foreach(function (dataset) {             dataset.bars.foreach(function (bar) {                 ctx.filltext(bar.value, bar.x, bar.y);             });         })     } }); 

i've turned off tooltips assuming don't need them longer (since same information being shown in newly added labels). if need tooltips, need extend bar chart , move above logic after each time chart drawn.

---

fiddle - http://jsfiddle.net/geaje18p/ (i replaced php echo hard coded arrays)

---