0👍
I made some small changes (non-intuitive!), and the vertical lines now appear after the animation.
-
Get the x values from the metadata instead of the data.
Either:var x_point = element._model.x;
or:
var position = element.tooltipPosition(); var x_point = position.x;
-
Wrap the drawing in
if(!hidden){}
, then the vertical lines will disapear and reappear with the data. (The ternary assignment fixes a clash if the data starts hidden) -
Do you need the value=max[i]? If just drawing the line up to the points, can get the y_point the same as for x.
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-1'];
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
var hidden = (meta.hidden != undefined) ? meta.hidden : dataset.hidden
if(!hidden){
meta.data.forEach(function (element, index) {
//var value = maxpoint[i];
var x_point = element._model.x;
var y_point = element._model.y;
ctx.beginPath();
ctx.save();
ctx.setLineDash([5, 5])
ctx.strokeStyle = '#fff';
ctx.moveTo(x_point, y_point); // or value.y
ctx.lineTo(x_point, yaxis.bottom)
ctx.stroke();
ctx.restore();
});
}
});
Source:stackexchange.com