Add background color of length bars in chart using chartJS - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Add background color of length bars in chart using chartJS

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.6.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w ww.ja va 2  s. c  o m*/
Chart.plugins.register({
  beforeDraw: function(chartInstance, easing) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = 'rgb(53, 53, 53)';
    var chartArea = chartInstance.chartArea;
    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
  }
});
var ctx = document.getElementById('myChart').getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 200;
var chart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["C++ development", ".Net", "HTML5", "jQuery", "Angular"],
    datasets: [{
      backgroundColor: 'rgb(54, 195, 110)',
      borderColor: 'rgba(255, 255, 255, 0.5)',
      borderWidth: 0,
      data: [95, 75, 80, 55, 85]
    },{
      backgroundColor: 'rgb(255, 255, 255)',
      borderColor: 'rgba(255, 255, 255, 0.5)',
      borderWidth: 0,
      data: [100, 100, 100, 100, 100]
    }],
  },
  options: {
    responsive: false,
    legend: {
      display: false,
    },
    title: {
      display: false,
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        },
        display: false
      }],
      yAxes: [{
         stacked: true,
        display: false
      }],
    },
    tooltips: {
      titleFontFamily: 'Raleway, sans-serif',
      titleFontSize: 13,
      bodyFontFamily: 'Raleway, sans-serif',
      callbacks: {
        label: function(tooltipItem, data) {
          var allData = data.datasets[tooltipItem.datasetIndex].data;
          var tooltipData = allData[tooltipItem.index];
          var total = 0;
          for (var i in allData) {
            total += allData[i];
          }
          return tooltipData + '%';
        }
      }
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <div id="chart_JS"> 
         <canvas id="myChart"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials