Charts

Line charts

Continuous trends as connected points. Each variant is a composed Card + LineChart recipe themed with --chart-1 through --chart-5. Import from @lantern-product/ui/charts/line.

Default

Single-series natural curve with a hidden tooltip label.

Line Chart

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

Linear

Straight-segment interpolation between data points.

Line Chart - Linear

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

Step

Step interpolation; good for discrete state transitions over time.

Line Chart - Step

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

Multiple

Two monotone series sharing the same axes for direct comparison.

Line Chart - Multiple

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

Dots

Visible data point dots with an enlarged active dot on hover.

Line Chart - Dots

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

Dots colors

Per-point colored dots driven by a fill key on each data row, mapped to --chart-1 through --chart-5.

Line Chart - Dots Colors

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

Dots custom

Custom Lucide GitCommitVertical icons rendered at each data point via the dot prop.

Line Chart - Custom Dots

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

Label

Value labels positioned above each data point via Recharts LabelList.

Line Chart - Label

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

Custom label

LabelList with a formatter that maps data keys to display labels from ChartConfig.

Line Chart - Custom Label

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.

Line Chart - Interactive

Showing total visitors for the last 3 months