Show data values or index labels in ChartJs - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

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

Description

Show data values or index labels in ChartJs

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w w  w  .  j  ava2 s.  c o  m*/
var chartData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",
                data: [60, 80, 81, 56, 55, 40]
            }
        ]
    };
    var options = {
        events: false,
        showTooltips: false,
        animation: {
            duration: 0,
            onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                this.data.datasets.forEach(function (dataset) {
                      console.log(dataset);
                    for (var i = 0; i < dataset.data.length; i++) {
                          console
                        var model = dataset._meta[0].dataset._children[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                    }
                });
            }
        }
    };
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx, {
      type: 'line',
    data: chartData,
    options: options
});
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx, {
      type: 'bar',
    data: chartData,
    options: options
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart1" height="300" width="500"></canvas> 
      <canvas id="myChart2" height="300" width="500"></canvas>  
   </body>
</html>

Related Tutorials