0
267
VistasHow to apply gradient color in chart.js?
I am making a line chart using chart.js library and here I would like to change the color of the line to gradient color.
Code I have tried,
const gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "#80b6f4");
gradientFill.addColorStop(1, "#f49080");
And added it in dataSets like,
datasets: [
{
.
.
.
.
backgroundColor: gradientFill,
.
.
}
]
But I couldn't see the changes and still some gray color line only gets displayed instead of gradient.
Working Example:
Edit: Tried adding borderColor : gradientFill but that also doesn't work.
Requirement: Requirement is that I need to have a gradient line similar like https://i.stack.imgur.com/lKGqT.png
Kindly please help me to change the color to gradient color.
2 Respuestas
Responde la pregunta0
Your gradient does not apply because of your useEffect hook, in this hook you set the data again with your formatData function but only pass the data and no canvasGradient. So you will need to pass that too.
See with lines 108 and 109 commented out it works fine, so you will need to either recreate the gradient there or create it on a higher level so you only create it once. https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx
Edit:
Updated to different method, in your formatData function for the backgroundColor use ternary operator to check if canvas gradient is given if not take the current backgroundColor
0
you can use borderColor : 'Red' in the datasets. see below code
datasets: [
{
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: "start",
backgroundColor: gradientFill,
borderWidth: 4,
borderColor : 'Red', // New line added
data
}
]