Chartjs - pointColor to keep track of the current color of the gradient bar

Question

I just created a line chart using chartjs and I managed to make the move in gradient color. Here is just a fiddle example of what I have done so far.

Now I need to make pointColor follow the gradient of stroke and pick the current color of its position. Like in this photo .

Any ideas how to achieve this?

Thanks!

Answer 1

Update

From the @AndyHolmes question on Can I add a shadow to chart.js?

An initial solution (extension) is not required. All it takes is just

  ... pointColor: gradientstroke ... 

---

Original solution

Just stretch the line and refresh the colors of the dots. You can do this in the draw function, but it would be effective (when you turned on the animation) to do this when the function was initialized

 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 ColorColor and pointStrokeColor in the ChartData string are not actually required. Note that you can also override pointHighlightStroke and pointHighlightFill if you wish.

You call it that

 new Chart(ctx).LineAlt(... 

---

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

---