Chartjs – pointColor para seguir el color actual del trazo del gradiente

Acabo de crear Line Chart usando la librería chartjs y logré hacer un trazo en color degradado. Aquí está el ejemplo simple de violín que hice hasta ahora.

Lo que necesito a continuación, es hacer que pointColor siga el stroke degradado y que recoja el color actual de su position. Como en esta foto .

¿Alguna idea de cómo lograr eso?

¡Gracias!

Actualizar

De la pregunta de @AndyHolmes en ¿Es posible agregar una sombra paralela al gráfico de líneas chart.js?

La solución original (extender) no es necesaria. Todo lo que se requiere es simplemente

  ... pointColor: gradientstroke ... 

Solución Original

Simplemente extiende la línea y actualiza los colors de los puntos. Podrías hacerlo en la function dibujar, pero sería eficiente (cuando tienes habilitada la animation) hacerlo en la function de initialization

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

El pointColor y pointStrokeColor en lineChartData en realidad no son necesarios. Tenga en count que también puede anular el punto HighlightStroke y pointHighlightFill del mismo modo si lo desea.

Lo llamas así

 new Chart(ctx).LineAlt(... 

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


enter image description here