How can I add background color of length bars in chart (chartJS)?

Question

I want to create by chart.js bar chart as the same as is in the photo

I did almost everything but I have problem to do some white spaces as background color of length bars in the chart.

This is what I have done:

CodePen

Thank you for your help in advance,

Megi

Answer 1

You can duplicate the first dataset, only to put everywhere 100 (%) and a white background for this set.

and !!! for yAxes: [{ stacked: true }],

https://jsfiddle.net/qrwvvtxs/3/

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 + '%';
        }

      }
    }
  }
});

body {
  background: #aaa;
}

<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>

Answer 2

There is no native functionality for this in ChartJS at the moment.

Only way to achieve this is to create your own chart plugin and draw the white background.

ᴘʟᴜɢɪɴ

Chart.plugins.register({
   afterDatasetsDraw: function(chartInstance) {
      var ctx = chartInstance.chart.ctx,
          width = chartInstance.chartArea.right;
      chartInstance.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chartInstance.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(segment, segmentIndex) {
            var height = segment._model.height,
                posX = segment.tooltipPosition().x,
                posY = segment.tooltipPosition().y - (height / 2);
            // draw white background
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.fillRect(posX, posY, width - posX, height);
            ctx.restore();
         });
      });

   }
});

ᴅᴇᴍᴏ ⧩

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);
   }
});

Chart.plugins.register({
   afterDatasetsDraw: function(chartInstance) {
      var ctx = chartInstance.chart.ctx,
          width = chartInstance.chartArea.right;
      chartInstance.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chartInstance.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(segment, segmentIndex) {
            var height = segment._model.height,
                posX = segment.tooltipPosition().x,
                posY = segment.tooltipPosition().y - (height / 2);
            // draw white background
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.fillRect(posX, posY, width - posX, height);
            ctx.restore();
         });
      });

   }
});

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]
      }]
   },
   options: {
      responsive: false,
      legend: {
         display: false,

      },
      title: {
         display: false,
      },
      scales: {
         xAxes: [{
            ticks: {
               beginAtZero: true

            },
            display: false
         }],
         yAxes: [{
            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 + '%';
            }

         }
      }
   }
});

canvas { background: rgb(53, 53, 53); padding: 20px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<div id="chart_JS">
   <canvas id="myChart"></canvas>
</div>