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)
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!
I created a repo for its example. I hope this will help you!
github.com/chooblarin/react-d3-exa...