Create ChartJS horizontal chart and display legend on each bar - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Create ChartJS horizontal chart and display legend on each bar

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.2.1/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  ww  .j av  a2  s . c o m*/
var chartData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    backgroundColor: 'rgb(75, 192, 192)',
    data: [60, 0, 81, 56, 0, 0],
    label: 'My Data 1'
  }, {
    backgroundColor: 'rgb(153, 102, 255)',
    data: [0, 80, 0, 0, 55, 40],
    label: 'My Data 2'
  }]
};
var barOptions = {
  events: false,
  showTooltips: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function() {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'left';
      ctx.textBaseline = 'bottom';
      this.data.datasets.forEach(function(dataset) {
        console.log(dataset);
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
          offset = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.longestLabelWidth;
          ctx.fillStyle = '#444';
          var y_pos = model.y - 5;
          var label = model.label;
          if ((scale_max - model.y) / scale_max >= 0.93)
            y_pos = model.y + 20;
          if (dataset.data[i] > 0) {
            ctx.fillText(dataset.label, left + 10, model.y + 8);
          }
        }
      });
    }
  }
};
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: barOptions
});
    }

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

Related Tutorials