Chartjs - pointColor to follow current color of gr

Question

I just created Line Chart using chartjs library and I managed to make stroke in gradient color. Here is simple fiddle example what I did so far.

What I need next, is to make pointColor to follow gradient stroke and to pick up the current color of it's position. Like on this photo.

Any ideas how to achieve that?

Thanks!

Answer 1

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

new Chart(ctx).LineAlt(...

---

Fiddle - http://jsfiddle.net/w2nh153d/

---