[Chartjs]-Y-Axis with different colors

by

0👍

In case you want the colored rectangles spread over the entire chart, you can draw individual boxes of different background color using chartjs-plugin-annotation.js.

new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2, 3, 4, 5, 6, 7],
      fill: false,
      backgroundColor: 'rgb(0, 0, 0)',
      borderColor: 'rgb(0, 0, 0)'
    }]
  },
  options: {
    responsive: true,
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Colored scale'
        }
      }]
    },
    annotation: {
      annotations: [{
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          yMin: 4.5,
          yMax: 8,
          backgroundColor: "rgba(255, 0, 0, 1)",
          borderWidth: 0
        },
        {
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          yMin: 3.5,
          yMax: 4.5,
          backgroundColor: "rgba(255, 165, 0, 1)",
          borderWidth: 0
        },
        {
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          xMin: 0,
          xMax: 100,
          yMin: 0,
          yMax: 3.5,
          backgroundColor: "rgba(50, 250, 50, 1)",
          borderWidth: 0
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="canvas" height="90">

0👍

You can draw individual boxes 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 below code snippet, I use the beforeDraw hook to draw the rectangles of different background color each.

new Chart(document.getElementById('canvas'), {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; 
      
      ctx.save();      
      
      ctx.fillStyle  = 'green';
      ctx.beginPath();    
      var yGreen = yAxis.getPixelForValue(3.5);
      ctx.fillRect(xAxis.left - 6, yGreen, 6, yAxis.bottom - yGreen);
      ctx.stroke();
      
      ctx.fillStyle  = 'orange';
      ctx.beginPath();    
      var yOrange = yAxis.getPixelForValue(4.5);
      ctx.fillRect(xAxis.left - 6, yOrange, 6, yGreen - yOrange);
      ctx.stroke();
      
      ctx.fillStyle  = 'red';
      ctx.beginPath();
      var yRed = yAxis.getPixelForValue(7);
      ctx.fillRect(xAxis.left - 6, yRed, 6, yOrange- yRed);
      ctx.stroke();
            
      ctx.restore();
    }
  }],
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2, 3, 4, 5, 6, 7],
      fill: false
    }]
  },
  options: {
    responsive: true,
    scales: {      
      yAxes: [{
        gridLines: {
           tickMarkLength: 15
        },
        ticks: {
           padding: 6
        },
        scaleLabel: {
          display: true,
          labelString: 'Colored scale'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90">

Leave a comment