Chartjs-Chartjs: need color bars near yAxis scale

by

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.

First, you would define the color bars in an array as follows:

const colorBars = [
  { y: 20, color: "#aad700" },
  { y: 40, color: "#ffe100" },
  { y: 60, color: "#ef0000" },
  { y: 80, color: "#aad700" },
  { y: 100, color: "#ffe100" }
];

Then you can define a plugin with the beforeDraw hook as shown below:

const plugins = [
  {
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales["x-axis-0"];
      var yAxis = chart.scales["y-axis-0"];
      ctx.save();
      var prevY = 0;
      colorBars.forEach((c, i) => {
        ctx.fillStyle = c.color;
        ctx.beginPath();
        var yBottom = yAxis.getPixelForValue(prevY);
        var yTop = yAxis.getPixelForValue(c.y);
        ctx.fillRect(xAxis.left - 10, yTop, 10, yBottom - yTop);
        ctx.stroke();
        prevY = c.y;
      });
      ctx.restore();
    }
  }
];

The drawback of this solution is, that you won’t see a tooltip when the mouse pointer hovers over the bars.

Please have a look at your amended StackBlitz and see how it works.

0👍

You can define a separate x-axis for the bar and name it "bar-x-axis" for example. The important thing is to define offset: false, ticks.display: false and gridLines.display: false.

xAxes: [{
    stacked: true
  },
  {
    id: "bar-x-axis",
    offset: false,
    stacked: true,
    ticks: {
      display: false
    },
    gridLines: {
      display: false
    }
  }
]

Your bar datasets are linked to this new x-axis through the option xAxisID: "bar-x-axis" . To change the width of the bars, you would define a value between below 1 for barPercentage.

{
  label: "Low-Moderate",
  backgroundColor: "#ffe100",
  yAxisID: "bar-y-axis",
  xAxisID: "bar-x-axis",
  data: [20],
  barPercentage: 0.5
}

Please have a look at your amended StackBlitz.

Leave a comment