Chartjs-How to set specific height for chartJs background color in terms of yAxis value

by

0👍

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook to create a linear gradient through CanvasRenderingContext2D.createLinearGradient() and assign it to the backgroundColor property of the dataset.

plugins: [{
  afterLayout: c => {
    let dataset = c.data.datasets[0];
    let thresholdValueIndex = dataset.data.indexOf(dataset.fillThreshold);
    let xAxis = c.scales["x-axis-0"];
    let xRight = xAxis.getPixelForTick(thresholdValueIndex);
    let gradientFill = c.ctx.createLinearGradient(xAxis.left, 0, xRight, 0);
    gradientFill.addColorStop(0, "rgb(250,174,50");
    gradientFill.addColorStop(1, "rgb(250,174,50");
    gradientFill.addColorStop(1, "white");
    dataset.backgroundColor = gradientFill;
  }
}],

This code expects the property fillThreshold to be defined on the dataset, its value must correspond to a value also contained in the data array.

Please take a look at your amended StackBlitz.

Leave a comment