chartjs how to apply after animation

Question

trying to extend a chart, so that i can draw lines up to the data point, but this is happening before the default animation. it would look smoother if it applied after.

Answer 1

I made some small changes (non-intuitive!), and the vertical lines now appear after the animation.

1. 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;
   

2. 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)

3. 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();

                });
            }
       });