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…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs