Core

Line Chart

A line chart shows how values change across a continuous axis and is well suited for trends, forecasts, and performance tracking.

Example

Usage

Features

  • Best for trend and time-series data.
  • Supports multiple series with distinct labels.
  • Uses LibravelUI theme tokens for series colors.
  • Can be combined with the shared tooltip and legend.
  • Supports custom dots, axes, and line types.

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/line-chart.tsx
npx libravelui@latest add line-chart

Anatomy

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

Props

Loading types…

Edit on GitHub

Last updated on

Funnel Chart

A funnel chart visualizes a sequential process, helping users see how values decrease from one stage to the next.

Pie Chart

A pie chart displays part-to-whole relationships and is useful when the goal is to compare proportional contributions.