All examples By author By category About


Area chart with negative area

The area chart uses a svg gradient fill to have different colours for the negative and positive values. The line and area charts are clipped by a rect which shrinks with each step in the story.

Also, it was fiddly to get the cumulative bar chart to animate nicely when it moves from negative to positive values - ie need to identify if the previous value was negative and the next is positive, and if so, do a two part transition - firstly, move the X to 0 and shrink the width to 0; and then hold the X at 0 and increase the width.

forked from tomshanley's block: Area chart with negative area