Stacked horizontal bar chart along total count with chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Stacked horizontal bar chart along total count with chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Stacked Horizontal Charts with Chart.js</title> 
      <style>

.graph_container{//  w w  w  . j  av  a  2  s.co  m
   display:block;
   width:500px;
}


      </style> 
   </head> 
   <body translate="no">   
      <div class="graph_container"> 
         <canvas id="Chart1"></canvas> 
      </div>   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 
      <script>
      var barOptions_stacked = {
  tooltips: {
    enabled: false
  },
  hover: {
    animationDuration: 0
  },
  scales: {
    xAxes: [
      {
        ticks: {
          beginAtZero: true,
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        scaleLabel: {
          display: false
        },
        gridLines: {},
        stacked: true
      }
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
          color: "#fff",
          zeroLineColor: "#fff",
          zeroLineWidth: 0
        },
        ticks: {
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        stacked: true
      }
    ]
  },
  legend: {
    display: false
  },
  animation: {
    onComplete: function() {
      var chartInstance = this.chart;
      var ctx = chartInstance.ctx;
      ctx.textAlign = "left";
      ctx.font = "9px Open Sans";
      ctx.fillStyle = "#fff";
      Chart.helpers.each(
        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          Chart.helpers.each(
            meta.data.forEach(function(bar, index) {
              data = dataset.data[index];
              if (i == 0) {
                ctx.fillText(data, 50, bar._model.y + 4);
              } else {
                ctx.fillText(data, bar._model.x - 25, bar._model.y + 4);
              }
            }),
            this
          );
        }),
        this
      );
      // draw total count
      this.data.datasets[0].data.forEach(function(data, index) {
        var total = data + this.data.datasets[1].data[index];
        var meta = chartInstance.controller.getDatasetMeta(1);
        var posX = meta.data[index]._model.x;
        var posY = meta.data[index]._model.y;
        ctx.fillStyle = "black";
        ctx.fillText(total, posX + 4, posY + 4);
      }, this);
    }
  },
  pointLabelFontFamily: "Quadon Extra Bold",
  scaleFontFamily: "Quadon Extra Bold"
};
var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: ["82", " 81 ", "2", " 42", "4"],
    datasets: [
      {
        data: [727, 589, 537, 543, 20],
        backgroundColor: "#5f8a58",
        hoverBackgroundColor: "rgba(50,90,100,1)"
      },
      {
        data: [238, 553, 746, 884, 122],
        backgroundColor: "#3f7faa",
        hoverBackgroundColor: "rgba(140,85,100,1)"
      }
    ]
  },
  options: barOptions_stacked
});
   
      </script>  
   </body>
</html>

Related Tutorials