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.
npx libravelui@latest add line-chartAnatomy
import { LineChart } from "@/components/ui/core/charts/line-chart";<LineChart
data={data}
dataKey="month"
config={{
revenue: { label: "Revenue" },
profit: { label: "Profit" },
}}
/>Props
Loading types…