In Stacked horizontal bar chart to remove the vertical line in Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

In Stacked horizontal bar chart to remove the vertical line in 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 {/*from  w ww.ja  va2s. c  om*/
   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: {
          drawOnChartArea: false,
          color: "black",
          zeroLineColor: "black"
        },
        stacked: true
      }
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
          color: "black",
          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
      );
    }
  },
  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)"
      },
      {
        data: [100, 100, 100, 100, 100],
        backgroundColor: "#000",
        hoverBackgroundColor: "rgba(140,85,100,1)"
      }
    ]
  },
  options: barOptions_stacked
});
      </script>  
   </body>
</html>

Related Tutorials