Chartjs-How to apply gradient color in chart.js?

by

1👍

✅

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

-1👍

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
      }
    ]

Leave a comment