Skip to content

Charts - Areas demonstration

This page groups demonstration using area charts.


Page APage BPage CPage DPage EPage FPage G01,0002,0003,0004,000
Press Enter to start editing
Page APage BPage CPage DPage EPage FPage G02,0004,0006,0008,00010,00012,000
Press Enter to start editing
Press Enter to start editing


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.


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