DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Sota Hatakeyama
Sota Hatakeyama

Posted on

D3.js Chart with Gradient Color

Gradient color is not only just looks colorful but also informative depending on how you use it. But how should I use it?

Look at the following bar chart.

This shows IMDb 2018 Movie Rankings' votes. Let's use gradient color on it.

First, you might think just specifying like "fill=url(#gradient)" in bar rect. It would result as follows.

That's not bad. But there is another option. You may want the color to change as the Y-value increases. Look at the following.

Perfect! This uses a technique of <clipPath> element.

The technique actually works for other charts (e.g. time series chart like follows).

Thank you for reading. Happy coding ☺️

Top comments (2)

Collapse
franklin626 profile image
franklin626

Hi, how can I replicate this locally, for example in a VS Code project ? Codepen is not showing any download button, nor is it showing the boilerplate required to build the project from scratch. Thanks!

Collapse
chooblarin profile image
Sota Hatakeyama Author

I created a repo for its example. I hope this will help you!

github.com/chooblarin/react-d3-exa...

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content