need linear gradient from x-axis

[DanielRuf]

I am aware that questions should be asked on stackoverflow but there are not many questions tagged with chartjs and I thought when I get a full answer and have to discuss the code, then this is the best place here.

Is this (gradient on x axis down to the bottom of the grid) possible and if, how can we achieve this?

https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color is not an option as this fills the whole grid including the scales and more space around the whole chart. And I guess this will not adapt to the scale width depending on the viewport.

[kurkle]

You could start from that sample: https://www.chartjs.org/docs/latest/samples/plugins/quadrants.html

[DanielRuf]

Thank you very much, that helped me.

const belowZeroGradient = {
    id: 'belowZeroGradient',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    beforeDraw(chart: any, args: any, _options: any) {
        const { ctx, chartArea: { left, right, bottom }, scales: { x, y } } = chart;
        const midX = x.getPixelForValue(0);
        const midY = y.getPixelForValue(0);
        ctx.save();

        const grd = ctx.createLinearGradient(left, midY, left, bottom);
        grd.addColorStop(0, tailwindConfig.theme.extend.colors.primary.green[15]);
        grd.addColorStop(1, `${tailwindConfig.theme.extend.colors.primary.green[15]  }00`);
        ctx.fillStyle = grd;
        ctx.fillRect(midX, midY, right - midX, bottom - midY);

        ctx.restore();
    }
};