Bklit Logo

Composed Chart

One time axis, one Y scale: combine SeriesBar, Line, and Area. Use the curve menu to swap the shared Line and Area interpolation.

Curve

Hero uses a Radix Select for the Line and Area `curve` prop (SeriesBar shape is unchanged). See https://visx.airbnb.tech/docs/curve.

Composed Chart — Bar + line
30 daily points with rounded SeriesBar tops (`radius`) and a smoothed revenue line

Dense time series: use numTicks on XAxis so labels stay readable. Ticks snap to data rows by default so crosshair and tooltip align.

Composed Chart — Lime / amber / red
Fixed hex accents (tailwind lime-300, amber-300, red-500) with rounded bars

Trending up by 5.2% this month

Composed Chart — Stacked SeriesBar + line
Two stack segments per day with the same 30-day timeline; stackGap={0} for flush stacks

Trending up by 5.2% this month

Composed Chart — Grouped bars, no gap
Two SeriesBar series per day with barGap={0}; rounded tops on both bar series

Trending up by 5.2% this month

Composed Chart — Pattern fills
One SeriesBar with a fuchsia-400 diagonal pattern, one solid bar on theme colors; revenue line unchanged

Trending up by 5.2% this month

Composed Chart — Bar + two lines
Installs as daily columns (rounded) with desktop and mobile lines (30-day variation)

Trending up by 5.2% this month

Composed Chart — Markers & dashed tail
Ring markers and a dashed projection on the run-rate line and area stroke

Use dashFromIndex on Line and Area when projecting an incomplete final period

Composed Chart — Left Y axis
Bars and line share one left value scale with Y-axis labels

Trending up by 5.2% this month

Composed Chart — Left and right Y axes
Units on the left scale, revenue line on the right (biaxial)

Trending up by 5.2% this month

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

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

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

Trending up by 5.2% this month

Composed 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

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

Trending up by 5.2% this month