Intento aplicar el código que puedo ver en esta pregunta: https://github.com/chartjs/Chart.js/issues/3071
pero no puedo entender cómo cambiar el código para que funcione en chartJS v3.x
this.ChartInst = new Chart(this._ctx, { type: "line", data: this._data , options: this._chartoptions, plugins: [{ beforeRender: function (c, args, options) { var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height); gradientFill.addColorStop(0.4, 'rgba(223,140,255,0.25)'); gradientFill.addColorStop(0.6, 'rgba(83, 155, 243, 0.25)'); var model = c.data.datasets[0]; model.backgroundColor = gradientFill; //console.log(model) } }] })se llama al evento, y cuando consola.log el modelo var, puedo ver que backgroundColor está configurado en CanvasGradient pero no sucede nada en el gráfico. (Solo fondo gris predeterminado)
¿Alguna idea? Gracias
Después de algunas búsquedas, encontré una solución cambiando el evento del complemento a beforeDraw y llamando al método update() del gráfico.
this.ChartInst = new Chart(this._ctx, { type: "line", data: this._data , options: this._chartoptions, plugins: [{ beforeDraw: function (c, a, o) { var yScale = c.scales['y']; var max = c.data.datasets[0].data.reduce(function (prev, current) { return (prev.y > current.y) ? prev : current }).y; var yPos = yScale.getPixelForValue(max); var gradientFill = c.ctx.createLinearGradient(0, yPos, 0, c.height); gradientFill.addColorStop(0.4, 'rgba(83, 155, 243, 0.25)'); gradientFill.addColorStop(0.9, 'rgba(223,140,255,0.25)'); c.data.datasets[0].backgroundColor = gradientFill; c.update(); } }] })