[Chartjs]-How to change Doughnut color to linear gradient on ChartJS?

by

2👍

✅

You can create gradient following way:

var gradient = ctx.createLinearGradient(0, 0, 0, 450);
gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)');
gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

And add gradient var to dataset background color:

datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: gradient,
      borderWidth: 1
    },
]

Please check fiddle

Edit: to make second element solid color just set array:

backgroundColor: [gradient1,'#F933FF'],//1st gradient 2nd '#F933FF'

Check this fiddle

Leave a comment