React chart example
Area chart
Emphasise the magnitude of a trend with a filled area between the line and its baseline.
Options apply to compatible charts.
Synthetic sample data · 6 daily revenue observations.
What is an area chart?
An area chart fills the space between a line and its baseline. The upper edge shows the value at each observation, while the filled region gives the series a stronger sense of volume. It suits a single measure whose level over time is the main story.
When to use it
Use an area chart for traffic, usage, inventory or revenue over time when you want to emphasise magnitude. A line chart is often better for small fluctuations or several overlapping series. Filling under a series does not make it cumulative: daily revenue remains daily revenue unless the data contains a running total.
Design tips
Keep a zero baseline when the filled region is intended to communicate magnitude. A cropped baseline changes the perceived area substantially.
Avoid opaque overlapping areas that hide other series. Use stacked areas for additive contributions, or separate lines for independent trends.
State the interval and whether the measure is a daily value or cumulative total. The visual form alone cannot distinguish them.
Graphy Chart SDK
Add Graphy’s area charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.