Chartjs-Chart.js 2.1.6 background color for each section

by

0👍

I did this:

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.chartArea) {
      var helpers = Chart.helpers;
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;
      var chartWidth = chartArea.right - chartArea.left;
      var chartHeight = Math.abs(chartArea.top - chartArea.bottom);
      ctx.save();

      var pattern = document.createElement('canvas');
      pattern.width = 40;
      pattern.height = chartHeight;
      var pctx = pattern.getContext('2d');

      pctx.fillStyle = "#f0f2f5";
      pctx.fillRect(0, 0, 20, chartHeight);
      pctx.fillStyle = "#ffffff";
      pctx.fillRect(20, 0, 20, chartHeight);

      var pattern = ctx.createPattern(pattern, "repeat");
      ctx.fillStyle = pattern;

      ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      ctx.restore();
    }
  });

Leave a comment