Chartjs-Chart.Js – Background Bar in Chart Bar

by

1👍

✅

This can be achieved using a ChartJS plugin called – chartjs-plugin-annotation.

DEMO

var bar_ctx = document.getElementById('bar-chart').getContext('2d');

var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');

var bar_chart = new Chart(bar_ctx, {
   type: 'horizontalBar',
   data: {
      labels: ["Red", "Blue"],
      datasets: [{
         label: '# of Votes',
         data: [12, 19],
         backgroundColor: purple_orange_gradient,
         hoverBackgroundColor: purple_orange_gradient,
         borderWidth: 0
      }]
   },
   options: {
      scales: {
         yAxes: [{
            categorySpacing: 0,
            barThickness: 20
         }],
         xAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      annotation: {
         annotations: [{
            type: 'box',
            drawTime: 'beforeDatasetsDraw',
            id: 'bg-bar-1',
            xScaleID: 'x-axis-0',
            xMin: 0,
            xMax: 10,
            backgroundColor: '#7f7f7f',
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script>
<canvas id="bar-chart" width="300" height="125"></canvas>

To learn more about this plugin and it­‘s use cases, refer here.

Leave a comment