DEV Community

loading...

D3.js Chart with Gradient Color

Sota Hatakeyama
I love JavaScript
・1 min read

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 ☺️

Discussion (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...