Bklit Logo

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 - Projection
Target and auto forecasts with gradient dashed beziers and a terminal marker

See the [Projection Line utility](/docs/utility/projection-line). Projections and brush zoom are not supported together.

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 - 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 @bklit/shimmering-text for the label — installed with @bklit/line-chart

Line Chart - Loading (Sweep)
Diagonal shimmer sweeping across the skeleton line while data loads
Loading

Set loadingStyle="sweep" on Line or LineChartLoading; defaults to the traveling pulse.

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

Line 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

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

Trending up by 5.2% this month