Bklit Logo

Bar Chart - Interactive

Daily activity over the last 90 days

Trending up by 5.2% this month

Bar Chart
Default vertical bar chart with rounded caps

Trending up by 5.2% this month

Bar Chart - Loading
Diagonal shimmer sweeping across placeholder bars while data loads

Set status="loading" on BarChart, or use the BarChartLoading shortcut.

Bar Chart - 3D Depth
Glass-block bars with perspective side + top faces and a custom line indicator

Hover over bars to see the animated line indicator

Bar Chart - 3D Stacked
Stacked depth bars split into per-segment side faces

Trending up by 5.2% this month

Bar Chart - Multiple Series
Grouped bars comparing two metrics

Trending up by 5.2% this month

Bar Chart - Stacked
Stacked bars with gap between segments

Trending up by 5.2% this month

Bar Chart - Horizontal
Horizontal orientation with y-axis labels

Trending up by 5.2% this month

Bar Chart - Dense Data
60 days of data with narrow gaps

Trending up by 5.2% this month

Bar Chart - Gradient
Linear gradient fill from blue to purple

Trending up by 5.2% this month

Bar Chart - Shape & Gradient
Discrete square columns with per-series gradient, diagonal column tracks, and ring crosshair indicators

Use squareSnap on BarChart so ring indicators align with square columns.

Bar Chart - Shape Squircle Ring
Fully rounded square columns with a squircle ring indicator snapped to each bar

Trending up by 5.2% this month

Bar Chart - Pattern
Diagonal line pattern fill

Trending up by 5.2% this month

Bar Chart - No Gap
Zero gap with gradient and animated line indicator

Hover over bars to see the animated line indicator

Bar Chart - Custom Tooltip
Formatted currency values in tooltip

Trending up by 5.2% this month

Bar Chart - Left Y axis
Grouped vertical bars with a single left value scale and Y-axis labels

Trending up by 5.2% this month

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

Trending up by 5.2% this month

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

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

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

Trending up by 5.2% this month

Bar 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

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

Trending up by 5.2% this month