Charts

Bar charts

Categorical comparisons rendered as rectangles. Each variant is a composed Card + BarChart recipe themed with --chart-1 through --chart-5. Import from @lantern-product/ui/charts/bar.

Default

Single-series vertical bars with rounded tops and a label-less tooltip.

Bar Chart

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Horizontal

Rotated layout with category labels on the Y axis; useful for long category names.

Bar Chart - Horizontal

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Multiple

Two series side-by-side with a dashed indicator tooltip.

Bar Chart - Multiple

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Stacked + legend

Two series stacked on a single stackId with a custom legend underneath.

Bar Chart - Stacked + Legend

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Label

Bar values rendered above each bar via Recharts LabelList.

Bar Chart - Label

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Custom label

Horizontal layout with category labels rendered inside the bars and values on the right.

Bar Chart - Custom Label

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Mixed

Per-bar fill colors driven by ChartConfig keys across --chart-1 through --chart-5.

Bar Chart - Mixed

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Active

A specific bar highlighted with a dashed stroke via a custom Bar shape renderer.

Bar Chart - Active

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Negative

Positive and negative values colored differently using Recharts Cell components.

Bar Chart - Negative

January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Interactive

Tab-driven metric switcher (Desktop / Mobile) over 3 months of daily data with summary totals in the header.

Bar Chart - Interactive

Showing total visitors for the last 3 months