Bklit Logo

Area Chart - Interactive

Revenue vs costs over 30 days with segment selection. Use the curve menu to compare @visx/curve on both areas.

Curve

Click and drag to select a range. Hero curve menu uses the same Area `curve` prop for revenue and costs.

Area Chart
Default area with gradient fill and smooth curve

Trending up by 5.2% this month

Area Chart - Step
Discrete step interpolation between points

Trending up by 5.2% this month

Area Chart - Stacked
Layered areas comparing desktop and mobile

Trending up by 5.2% this month

Area Chart - Gradient
Solid fill with gradientToOpacity control

Trending up by 5.2% this month

Area Chart - No Stroke
Softer look with the stroke line hidden

Trending up by 5.2% this month

Area Chart - Fade Edges
Area fill fades at the left and right edges

Trending up by 5.2% this month

Area Chart - Loading
Shimmering grid, pulsing foreground segment, and shimmer label while data loads
Loading

Uses @bklit/shimmering-text for the label — installed with @bklit/area-chart

Area Chart - Loading (Sweep)
Diagonal shimmer sweeping across the skeleton area while data loads
Loading

Set loadingStyle="sweep" on Area or AreaChartLoading; defaults to the traveling pulse.

Area Chart - Segment Selection
Click and drag to select a range

Click and drag on the chart to select a segment

Area Chart - Pattern
Diagonal line pattern fill instead of gradient

Trending up by 5.2% this month

Area Chart - Series Markers
Scatter-style ring markers at each point — same styling as Scatter

Trending up by 5.2% this month

Area Chart - Dashed Tail
Solid stroke through yesterday, dashed projection for the in-progress day

dashFromIndex is inclusive — the stroke dashes from that data row through the end

Area Chart - Left Y axis
Both series share the left scale with explicit Y-axis labels

Trending up by 5.2% this month

Area Chart - Left and right Y axes
Independent left and right scales (biaxial)

Trending up by 5.2% this month

Area Chart - Pattern Background
Diagonal pattern fill instead of grid lines

Use Background instead of Grid — see /docs/utility/background

Area Chart - Dot Grid Background
Dot grid texture with edge fade

Trending up by 5.2% this month

Area Chart - Reference Band
Horizontal Y band behind the series with dashed edges and bracket markers

See /docs/utility/reference-area — tune bounds, fill, and markers in Studio

Area Chart - Pattern Reference Band
Pattern fill inside the band with colored Y-axis tick labels

Trending up by 5.2% this month