How to custom index label on each bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

How to custom index label on each bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){// ww  w .  j a  va2 s.c  o  m
$(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 = [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65];
        var dataJson2 = [65, 59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65];
        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, {
            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);
                    });
                })
            }
        });
    }
    size(true);
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="bar-chart-js" width="400" height="200"></canvas>  
   </body>
</html>

Related Tutorials