Chartjs-Chartjs how to apply after animation

0👍

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

                });
            }
       });

Leave a comment