Chart.js: How Can I fill Bar Chart with gradient color?

[amitchoubey]

I am using a bar chart and I wanted to fill bar style with gradient start and stop color? please help!

[nnnick]

It's not officially supported through a Chart.js API, but the fillColour of bars pipe directly into context.fillStyle in canvas. That means you can put in a canvas gradient, or image for that fact, into that variable in order to render gradients.

Here's an example: http://jsbin.com/tayawutu/17/edit

[amitchoubey]

Thanks @nnnick

[amitchoubey]

but I am not able to fill gradient color on highlightFill option
like:-

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(151,187,205,0.7)');
gradient.addColorStop(1, 'rgba(151,187,205,0)');

var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(1, 'rgba(0,51,153,0.9)');
gradient.addColorStop(0, 'rgba(51,102,255,0.9)');

datasets : [
{
label: "My Second dataset",
fillColor : gradient,
highlightFill: gradient1,
data : [100, 120, 150, 170, 180, 200, 160]
}
]

[nnnick]

You can, in your example you're calling addColorStop to gradient instead of gradient1.

http://jsbin.com/tayawutu/20/

[amitchoubey]

again thnx @nnnick , my silly mistake that I forgot to change.

[LAKnoKAL]

+1

[arslan-qamar]

can we add image in fillcolor ?