Bar values in Chart.js and dataset.metadata - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Bar values in Chart.js and dataset.metadata

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</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.1.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   www . jav a  2  s.c o m*/
      var data = {
         labels: ["8", "7", "9", "11", "10"],
         datasets: [{
            type: "bar",
            label: "Mick",
            borderColor: "#56B513",
            backgroundColor: "#56B513",
            data: [16, 11, 9, 6, 5],
            yAxisID: 'y-axis-1'
         }, {
            type: "bar",
            label: "Soluci?n",
            borderColor: "#000FAA",
            backgroundColor: "#000FAA",
            data: [16, 11, 9, 6, 5],
            yAxisID: 'y-axis-1'
         }]
      };
      var options = {
         animation: {
            onComplete: function () {
               var ctx = this.chart.ctx;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
               var chart = this;
               var datasets = this.config.data.datasets;
               datasets.forEach(function (dataset, i) {
                  ctx.font = "20px Arial";
                  switch (dataset.type) {
                     case "line":
                        ctx.fillStyle = "Black";
                        chart.getDatasetMeta(i).data.forEach(function (p, j) {
                           ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 20);
                        });
                        break;
                     case "bar":
                        ctx.fillStyle = "White";
                        chart.getDatasetMeta(i).data.forEach(function (p, j) {
                           ctx.fillText(datasets[i].data[j], p._model.x, p._model.y + 20);
                        });
                        break;
                  }
               });
            }
         },
         scales: {
            xAxes: [{
               stacked: true,
               scaleLabel: {
                  display: true,
                  labelString: "Estaciones"
               }
            }],
            yAxes: [{
               type: "linear",
               position: "left",
               id: "y-axis-1",
               stacked: true,
               ticks: {
                  suggestedMin: 0
               },
               scaleLabel: {
                  display: true,
                  labelString: "Minutos"
               }
            }, {
               type: "linear",
               position: "right",
               id: "y-axis-2",
               ticks: {
                  suggestedMin: 0,
                  callback: function (value) {
                     return value + "%";
                  }
               },
               scaleLabel: {
                  display: true,
                  labelString: "Porcentaje"
               }
            }]
         }
      };
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myBar = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
         });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas"></canvas>  
   </body>
</html>

Related Tutorials