Core
Charts
LibravelUI charts are opinionated Recharts wrappers that use the default OKLCH theme palette through var(--chart-1) to var(--chart-4).
Introduction
LibravelUI charts are built on top of Recharts, but the public API is intentionally simplified and styled to match the rest of the design system.
They are theme-aware by default. The chart palette is driven by CSS variables, so every chart automatically follows the active LibravelUI theme and any local palette overrides.
Features
- Theme-aware – Uses
var(--chart-1)throughvar(--chart-4)instead of hardcoded colors. - OKLCH-based – Follows the default LibravelUI theme tokens defined in the theme registry.
- Opinionated – Surface, grid, tooltip, and legend styling are already composed for you.
- Reusable – One consistent API across multiple chart types.
- Customizable – Override colors, axes, tooltip formatting, or container height per chart.
Related Components
Area Chart
An area chart displays quantitative data over a continuous axis with filled regions that highlight trends and changes over time.
Bar Chart
A bar chart displays categorical data using rectangular bars, making comparisons across groups easy to read at a glance.
Chart Tooltip
A chart tooltip is a reusable wrapper around the Recharts tooltip and is styled to match LibravelUI surfaces, borders, and typography.
Composed Chart
A composed chart combines areas, bars, and lines in one surface so related metrics can be compared without switching chart types.
Funnel Chart
A funnel chart visualizes a sequential process, helping users see how values decrease from one stage to the next.
Line Chart
A line chart shows how values change across a continuous axis and is well suited for trends, forecasts, and performance tracking.
Pie Chart
A pie chart displays part-to-whole relationships and is useful when the goal is to compare proportional contributions.
Radar Chart
A radar chart compares multiple values across the same set of dimensions, making it easy to spot balanced and uneven profiles.
Radial Bar Chart
A radial bar chart presents values on a circular scale and works well for progress-style or compact comparison dashboards.
Scatter Chart
A scatter chart plots point relationships across two or more numeric axes, making it useful for distribution and correlation analysis.
Treemap Chart
A treemap chart shows hierarchical data using nested rectangles and is useful when size and grouping need to be understood together.
Custom Palette
Override the chart variables at the container level when you need a local palette.
<div
style={{
["--chart-1" as string]: "oklch(0.72 0.17 18)",
["--chart-2" as string]: "oklch(0.74 0.16 145)",
["--chart-3" as string]: "oklch(0.72 0.15 250)",
["--chart-4" as string]: "oklch(0.76 0.14 315)",
}}
>
<BarChart
data={data}
dataKey="month"
config={{
revenue: { label: "Revenue" },
profit: { label: "Profit" },
}}
/>
</div>