Core

Bar Chart

A bar chart displays categorical data using rectangular bars, making comparisons across groups easy to read at a glance.

Example

Usage

Features

  • Clear comparison between categories.
  • Supports stacked and grouped series.
  • Uses LibravelUI chart tokens by default.
  • Works with custom axes, tooltips, and legends.
  • Keeps labels and colors consistent with the theme.

Installation

Copy the shared chart utilities and the chart component you need into your project.

components/ui/core/charts/chart-shell.tsx
components/ui/core/charts/chart-tooltip.tsx
components/ui/core/charts/bar-chart.tsx
npx libravelui@latest add bar-chart

Anatomy

import { BarChart } from "@/components/ui/core/charts/bar-chart";
<BarChart
  data={data}
  dataKey="month"
  config={{
    revenue: { label: "Revenue" },
    profit: { label: "Profit" },
  }}
/>

Props

Loading types…

Edit on GitHub

Last updated on

Area Chart

An area chart displays quantitative data over a continuous axis with filled regions that highlight trends and changes over time.

Chart Tooltip

A chart tooltip is a reusable wrapper around the Recharts tooltip and is styled to match LibravelUI surfaces, borders, and typography.