I have a line graph in chartjs, and I want to find the Y value for an arbitrary point on the line given the pixel value from the x axis.
Currently I'm hooking into the afterDatasetsDraw event to add that shaded region to the graph, but I also want to find out the values of the black line (Axis B) at the start and end of the shaded region, which don't necessarily line up with my data points.
afterDatasetsDraw: function (chart) {
var options = chart.config.options.plugins.shader;
if (!options.hasOwnProperty('points')) {
return;
}
if (options.points.length < 2) {
return;
}
var ctx = chart.chart.ctx;
var x1, y1, x2, y2, x3, y3, x4, y4, x0, xf;
console.log(chart);
x0 = chart.scales['x-axis-0'].left;
xf = chart.scales['x-axis-0'].right;
x1 = ((xf - x0) * 0.12) + x0; // start shading at 12% in for example
y1 = chart.scales['A'].bottom;
x2 = x1;
y2 = chart.scales['A'].top;
x3 = ((xf - x0) * 0.66) + x0; // end shading at 66% for example
y3 = y2;
x4 = x3;
y4 = y1;
// console.log(chart.scales['B'].getValueForPixel(x1));
// console.log(chart.scales['B'].getValueForPixel(x3));
// console.log(chart.scales['A'].getValueForPixel(x1));
// console.log(chart.scales['A'].getValueForPixel(x3));
// console.log(chart.scales['x-axis-0'].getValueForPixel(x1));
// console.log(chart.scales['x-axis-0'].getValueForPixel(x3));
ctx.fillStyle = 'rgba(127, 127, 127, 0.3)';
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.lineTo(x1,y1);
ctx.closePath();
ctx.fill();
}
});
I would assume from the docs that I could use the scales getValueForPixel() method (as is shown commented out) but those are returning strange values. The X-axis values are coming back as 1 and 3 which as far as I can tell are the indexes of the closest data point. The Y scales are returning numbers that don't correspond with anything in the dataset or the rendered graph.