Charts - Areas demonstration

This page groups demonstration using area charts.

SimpleAreaChart

StackedAreaChart

TinyAreaChart

PercentAreaChart

AreaChartConnectNulls

AreaChartFillByValue

To display multiple colors in the area you can specify a gradient to fill the area (the same method can be applied on other SVG components).

You can pass this gradient definition as a children of the <LineChart /> and use sx to override the area fill property. To do so you will need to use the <linearGradient /> and <stop /> SVG elements.

The first part is to get the SVG total height. Which can be done with the useDrawingArea hook. It's useful to define the <linearGradient /> as a vector that goes from the top to the bottom of our SVG container.

Then to define where the gradient should switch from one color to another, you can use the useYScale hook to get the y coordinate of value 0.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <AreaElement />
• <AreaPlot />
• <LineChart />
• <LineElement />
• <LineHighlightElement />
• <LineHighlightPlot />
• <LinePlot />
• <MarkElement />
• <MarkPlot />