Shading areas between lines in a line chart helps visually emphasize the magnitude of differences or trends in your data, making it easier to interpret complex data patterns in a visual storytelling journey.
Flourish enables you to achieve that easily, and with a few clicks to use this feature to create confidence intervals!
In this article
To shade areas between lines in our Line, bar pie template, follow these next few steps.
- 1
-
Go to the Lines, dots and area settings.
- 2
-
Go to the Shade between lines section and toggle on Shade areas between lines.
- 3
-
Enter the two lines you would like to shade between, separated by two colons. Here's an example:
-
Line 1 :: Line 2
- 4
- You can supply the color with which you would like to shade in your syntax or via the settings. If you'd like to shade separate areas differently, you will have to do it via the syntax. If you only have one shaded area, you can do it via the settings.
- Here's an example of the syntax specifying the color and opacity, for the data underpinning the chart at the start of this document:
-
Total deaths in 2020 :: Average number of deaths in past 5 years :: #ff4538 :: 0.2
And how this looks on the actual settings panel.
For confidence intervals
- 1
-
To create confidence intervals, you can add shaded areas but hide the upper and lower limit lines by supplying a transparent color override for them
To do this follow the steps in the sections above, then go to the Colors settings and supply a color override of
rgba(0,0,0,0)
for the lines you would like to hide. - You can learn more about color overrides here: https://helpcenter.flourish.studio/hc/article/91-how-to-customize-colors
- Here's what that looks like in a visualization:
-
When doing this, make sure your popups don't pull through the colors of your series, as these would be transparent in this case. You can do this in the Popups settings by deselecting Color headers to match data.