Remove a label in bar chart Chart.JS - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Remove a label in bar chart Chart.JS

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.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  ww  w.j  a  va 2s . c o  m*/
Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;
        ctx.font = Chart.helpers.fontString(14, 'bold',Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = "white";
        chartInstance.data.datasets.forEach(function(dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            if (dataset._meta[0].controller.index== 1) {
                   ctx.textAlign ="right";
                   ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", (model.x - 2), (model.y + model.height / 3));
                }
                else {
                   ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", ((model.base + model.x) / 2), (model.y + model.height / 3));
                }
            }
        });
    }
});
var ctxBarChart = document.getElementById("priceComplianceBarChart");
var priceComplianceData = {
    labels: [
        "Bix Produce", "Capitol City", "Charlies Portland", "Cost Fruit and Produce ", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazz Produce "
    ],
    datasets: [{
        label: "Price Compliant",
        backgroundColor: "rgba(34,139,34,0.5)",
        hoverBackgroundColor: "rgba(34,139,34,1)",
        data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
    }, {
        label: "Non-Compliant",
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        hoverBackgroundColor: "rgba(255, 0, 0, 1)",
        data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
    }]
}
var priceComplianceOptions = {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    },
    tooltips: {
        enabled: false
    }
};
var priceBarChart = new Chart(ctxBarChart, {
    type: 'horizontalBar',
    data: priceComplianceData,
    options: priceComplianceOptions
});
    }

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

Related Tutorials