1👍
✅
After some struggle I’ve answered the question. It was a lot more simple than I made the problem out to be. It turns out I just needed to calculate the ratio between the datapoints and the graph in pixels, and then implement a line at that point.
I’ve put this into a plugin with the API:
/// default values
lineHeightAnnotation: {
// defaults to have line to the highest data point on every tick
always: true,
// optionally, only have line draw to the highest datapoint nearest the user's hover position
hover: false,
// colors of the line
color: '#000',
// name of yAxis
yAxis: 'y-axis-0',
// weight of the line
lineWeight: 1.5,
/// sets shadow for ALL lines on the canvas
shadow: {
// color of the shadow
color: 'rgba(0,0,0,0.35)',
// blur of the shadow
blur: 10,
/// shadow offset
offset: {
// x offset
x: 0,
// y offset
y: 3
}
},
// dash defaults at [10, 10]
noDash: true,
}
Logic:
/**
* Vars
* maxY - the tallest data point on the graph
* tickMax - the tallest tick on the y axis
* bottomY - the lowest point of the graph
* additionalOffsets = dataset.borderWidth * 2
*
* bottomY * maxY
* highestDataY = bottomY - ------------------- + additionOffsets
* tickMax
*/
Function:
afterDatasetDraw: (chart) => {
// draw a dashed line when someone hovers over a data point
if (chart.tooltip._active && chart.tooltip._active.length) {
const activePoint = chart.tooltip._active[0];
const ctx = chart.ctx;
const x = activePoint.tooltipPosition().x;
const yAxis = chart.scales['y-axis-0'];
const tickMax = yAxis.ticksAsNumbers[0] // first index is always the tallest
const tickLow = yAxis.ticksAsNumbers[yAxis.ticksAsNumbers.length - 1]
const topY = yAxis.top; // clientRect.top + chart.padding.y
const bottomY = yAxis.bottom; // clientRect.bottom
let maxY = 1;
let borderWidth = 0;
const datasets = chart.config.data.datasets
datasets.forEach((set, i) => {
// get maximum Y value
// get borderWidth of that dataset
let point = set.data[activePoint._index].y
if(point > maxY) {
maxY = parseInt(point, 10) - parseInt(set.borderWidth, 10)
borderWidth = parseInt(set.borderWidth, 10)
}
});
let yBRatio = bottomY * (maxY - tickLow)
let tMRatio = yBRatio / (tickMax - tickLow)
let highestDataY = bottomY - tMRatio + (borderWidth * 2)
// draw line
ctx.save();
ctx.beginPath();
ctx.setLineDash([10, 10]);
ctx.moveTo(x, highestDataY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1.5;
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.restore();
}
Source:stackexchange.com