charts.js bar background

by Osama Qassar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
  <div id="chart_JS">
    <canvas id="myChart"></canvas>
  </div>

JavaScript

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: [{
      data: [95, 75, 80, 55, 85]
    },{
      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 'Ratings ' +tooltipData + '%';
        }
      
      }
    }
  }
});