0
216
Views¿Cómo aplicar el color degradado en chart.js?
Estoy haciendo un gráfico de líneas usando la biblioteca chart.js y aquí me gustaría cambiar el color de la línea a un color degradado.
Código que he probado,
const gradientFill = ctx.createLinearGradient(500, 0, 100, 0); gradientFill.addColorStop(0, "#80b6f4"); gradientFill.addColorStop(1, "#f49080");Y lo agregó en conjuntos de datos como,
datasets: [ { . . . . backgroundColor: gradientFill, . . } ]Pero no pude ver los cambios y aún así solo se muestra una línea de color gris en lugar de degradado.
Ejemplo de trabajo:
Editar: Intenté agregar borderColor : gradientFill pero eso tampoco funciona.
Requisito: el requisito es que necesito tener una línea de degradado similar a https://i.stack.imgur.com/lKGqT.png
Por favor, ayúdame a cambiar el color a un color degradado.
2 answers
Answer question0
Su gradiente no se aplica debido a su gancho useEffect , en este gancho configura los datos nuevamente con su función formatData pero solo pasa los datos y no canvasGradient. Así que tendrás que pasar eso también.
Vea con las líneas 108 y 109 comentadas, funciona bien, por lo que deberá recrear el degradado allí o crearlo en un nivel superior para que solo lo cree una vez. https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx
Editar:
Actualizado a un método diferente, en su función formatData para el color de fondo, use el operador ternario para verificar si se proporciona un gradiente de lienzo si no toma el color de fondo actual
0
puede usar borderColor : 'Red' en los conjuntos de datos. ver el código a continuación
datasets: [ { pointBorderWidth: 10, pointHoverRadius: 10, pointHoverBorderWidth: 1, pointRadius: 3, fill: "start", backgroundColor: gradientFill, borderWidth: 4, borderColor : 'Red', // New line added data } ]