Bklit Logo
Line Chart - Interactive
Desktop vs mobile visitors over 30 days. Use the curve menu to compare @visx/curve factories on both lines.
Curve

Hero uses a Radix Select to swap curves live; see https://visx.airbnb.tech/docs/curve for the full list.

Line Chart - Linear
Straight lines between data points

Trending up by 5.2% this month

Line Chart - Markers
Custom markers to annotate key events

Trending up by 5.2% this month

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

Click and drag on the chart to select a segment

Line Chart - Trio with Brush
Three Catmull–Rom series on a dot background with a top legend and brush zoom — matches the Studio trio preset.
desktop
mobile
tablet

Open the same preset in Studio from the Background docs or paste the share URL from /charts/line-chart.

Line Chart - Multiple Lines
Desktop vs mobile visitors over time

Trending up by 5.2% this month

Line Chart - X Axis
With labeled x-axis dates

Trending up by 5.2% this month

Line Chart - X & Y Axis
With both horizontal grid and x-axis labels

Horizontal grid lines serve as the y-axis reference

Line Chart - Series Markers
Ring markers at each data point with the same config as Scatter

Trending up by 5.2% this month

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

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

Line Chart - Dashed Tail
Curved dashed segment from a chosen index — useful for incomplete periods

The dashed tail follows the same curve and edge fade as the solid stroke

Line Chart - Left Y axis
Both series on the left scale with explicit Y-axis tick labels

Trending up by 5.2% this month

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

Trending up by 5.2% this month

Line Chart - Profit/Loss
Sign-colored segments with a highlighted zero baseline and optional legend hover
Profit
Loss

Legend below the chart, centered

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

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

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

Trending up by 5.2% this month