I have a chartjs line graph in an angular application and I need the line chart to shade the background red for the negative numbers The problem I am having is I can't figure out how to calculate the bottom of the chart
const canvasBackgroundColor = {
id: 'canvasBackgroundColor',
beforeDraw(chart: any, args: any, pluginOptions: any) {
const { ctx, chartArea: { top, bottom, left, right, width, height }, scales: { x, y } } = chart;
ctx.fillStyle = 'rgba(255 26, 104, 0.2)';
ctx.fillRect(left, y.getPixelForValue('0'), width, canvasBottom);
}
}
if (this.chart == null) {
this.chart = new Chart("solarChart", {
type: 'line',
//this denotes tha type of chart
data: {// values on X-Axis
labels: this.createXLabels(),
datasets: [
{
label: "Solar",
data: paybackArray,
showLine: true,
pointStyle: 'crossRot',
}
]
},
options: {
scales: {
x: {
grid: {
display: false
},
title: {
display: true,
text: 'Year',
font: {
size: 16
}
}
},
y: {
display: true,
title: {
display: true,
text: 'Dollars',
font: {
size: 16
}
},
}
}
},
plugins: [canvasBackgroundColor]
});
}
I want the negative quadrant red, but the color bleeds through the x axis or doesn't reach the x axis, leaving white space in-between
