I'm working on an angular application that includes a chartjs line graph, and I'm trying to get the line chart to shade the background red for negative numbers. The issue I'm facing is figuring 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',
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 am aiming to make the negative quadrant red, but the color sometimes doesn't reach the x-axis properly, leaving white space in-between.