[Chartjs]-How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?

by

3👍

✅

You can draw the rectangle directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.

In your amended code below, I use the beforeDraw hook to draw the rectangle through CanvasRenderingContext2D.fillRect().

var profileChart = new Chart('canvas', {
  type: "line",
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['first-y-axis'];       
      ctx.save();            
      ctx.fillStyle  = 'lightgray';
      ctx.beginPath();    
      var yTop = yAxis.getPixelForValue(16.5);
      var yBottom = yAxis.getPixelForValue(12.5);
      ctx.fillRect(xAxis.left, yTop, xAxis.right - xAxis.left, yBottom - yTop);
      ctx.stroke();            
      ctx.restore();
    }
  }],
  data: {
    labels: ["", "D", "I", "S", "C", ""],
    datasets: [{
        data: [,25.5, 8, 7.5, 11],
        borderWidth: 1,
        pointBackgroundColor: "black",
        backgroundColor: "black",
        borderColor: "black",
        fill: false,
        lineTension: 0,
        yAxisID: 'first-y-axis'
      },
      {
        yAxisID: 'third-y-axis'
      }
    ],
  },
  options: {
    title: {
      display: true,
      text: 'Gráfico do Perfil DISC',
      fontSize: 20,
    },
    scales: {
      yAxes: [{
          id: 'first-y-axis',
          type: 'linear',
          gridLines: {
            drawOnChartArea: false
          },
          scaleLabel: {
            display: true,
            padding: '15px',
            labelString: 'Intensity'
          },
          ticks: {
            max: 28,
            min: 1,
            stepSize: 1
          }
        },
        {
          id: 'second-y-axis',
          type: 'linear',
          position: 'left',
          gridLines: {
            drawOnChartArea: true
          },
          ticks: {
            display: false,
            min: 1,
            max: 8,
            stepSize: 1
          }
        },
        {
          id: 'third-y-axis',
          position: 'right',
          type: 'linear',
          gridLines: {
            drawOnChartArea: false
          },
          scaleLabel: {
            display: true,
            padding: '10px',
            labelString: 'Segment'
          },
          ticks: {
            max: 7.5,
            min: 0.5,
            stepSize: 1
          },
          afterTickToLabelConversion: function(scaleInstance) {
            scaleInstance.ticks[0] = null;
            scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
            scaleInstance.ticksAsNumbers[0] = null;
            scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
          },
        }
      ]
    },
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem) {
          return tooltipItem.yLabel;
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="canvas" height="200">

Leave a comment