[Chartjs]-Chartjs – pointColor to follow current color of gradient stroke

4👍

✅

Update

From @AndyHolmes question at Is it possible to add a drop shadow to chart.js line chart?

The original solution (extending) is not required. All that is required is simply

  ...
  pointColor: gradientstroke
  ...

Original Solution

Just extend the line and update the point colors. You could do it in the draw function, but it would be efficient (when you have animation enabled) to do it in initialize function

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        // draw a line with the gradient, we use this to get each points color
        ctx.fillStyle = data.datasets[0].strokeColor;
        ctx.fillRect(0, 0, this.chart.width, 1);

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (point) {
                // get the color from the gradient drew above
                var imageData = ctx.getImageData(point.x, 0, 1, 1);
                var color = 'rgba(' + imageData.data[0] + ', ' + imageData.data[1] + ', ' + imageData.data[2] + ', ' + imageData.data[3] + ')';

                // the _saved is used by the tooltip refresh to draw the point when you mouseout
                point.fillColor = color;
                point._saved.fillColor = color;
                point.strokeColor = color;
                point._saved.strokeColor = color;
            })
        })

        // we need to call the render function again to overwrite what was drawn in the initialize render (otherwise we don't see the changed color when animation is false)
        // this also wipes out the reference gradient
        this.render();
    }
});

The pointColor and pointStrokeColor in the lineChartData are actually not required. Note that you could also override the pointHighlightStroke and pointHighlightFill the same way if you wanted to.

You call it like so