Forum Academy Marketplace Showcase Pricing Features

Charts.js Area chart gradient

Hi there Alex @alex4,

I’ve been using Charts.js in several projects and love it. I’m using an area chart in a new project now which I haven’t used before, and I have a few simple questions.

I can see that the color of the area seems to be a more transparent version of the main line color of the chart. But is it possible to change the area color to something completely different? Also is it possible to make that area a gradient like we see in some area charts that either grades from one color to another, or from one color to transparent at the bottom?

Thanks!
Dan

Hey @underhill.dan thanks for reaching back out! Great to hear you’ve loved using the plugin–don’t hesitate to let me know if you have any feedback :slight_smile:

But is it possible to change the area color to something completely different? Also is it possible to make that area a gradient like we see in some area charts that either grades from one color to another, or from one color to transparent at the bottom?

Yes! If you visit the Area Chart article from the documentation page, there is an example of an Area Chart implemented with the gradient background (note that the gradient series is added via workflow action). Let me know if that helps.

Best,
Alex

1 Like

Thank you so much Alex for pointing me in the right direction. After playing around a bit I was able to achieve just what I was hoping for.

Thank you again,

Dan

1 Like

Great to hear! Don’t hesitate to reach out with any feedback.

Cheers!

:raised_hands::raised_hands::raised_hands: wonderful!

2 Likes

Hi Alex,

I’ve got one other question perhaps you can help with. Is it possible, to draw a flat horizontal line on top of this area chart at a specific Y-value? For example, in the image below, can I draw a horizontal line at say, $210 if I want demarcate a certain threshold level?

Hello @alex4,

Is it possible to apply the same type of gradient to a bar chart? I’m using the same workflow technique I did (shown above) to a bar but it doesn’t seem to apply.

Thanks,
Dan