Ubuntu
143 lines
4.9 KiB
Plaintext
143 lines
4.9 KiB
Plaintext
---
|
|
title: Line Chart
|
|
description: A customizable line chart component to visualize trends and data over time with smooth curves and data points. 📉
|
|
lastUpdated: 12 Aug, 2025
|
|
links:
|
|
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/LineChart.tsx
|
|
---
|
|
|
|
<ComponentShowcase name="line-chart-style-default" />
|
|
<br />
|
|
<br />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstall>
|
|
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/line-chart.json'" />
|
|
<ComponentInstall.Manual>
|
|
|
|
#### 1. Install dependencies:
|
|
|
|
```sh
|
|
npm install recharts
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 2. Copy the code 👇 into your project:
|
|
|
|
<ComponentSource name="lineChart" />
|
|
|
|
</ComponentInstall.Manual>
|
|
</ComponentInstall>
|
|
|
|
<br />
|
|
<br />
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<ComponentShowcase name="line-chart-style-default" />
|
|
<br />
|
|
<br />
|
|
|
|
### Multiple Lines
|
|
|
|
<ComponentShowcase name="line-chart-style-multiple" />
|
|
<br />
|
|
<br />
|
|
|
|
## API Reference
|
|
|
|
<Table>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head>Prop</Table.Head>
|
|
<Table.Head>Type</Table.Head>
|
|
<Table.Head>Default</Table.Head>
|
|
<Table.Head>Description</Table.Head>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">data</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
|
<Table.Cell>Array of data objects to display</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">index</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">-</Table.Cell>
|
|
<Table.Cell>Key for the x-axis (category) data</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">categories</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
|
<Table.Cell>Array of keys for the data values to display as lines</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">strokeColors</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
|
|
<Table.Cell>Array of stroke colors for the lines</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">strokeWidth</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`2`</Table.Cell>
|
|
<Table.Cell>Width of the line strokes</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">dotSize</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`4`</Table.Cell>
|
|
<Table.Cell>Size of the data point dots</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
|
|
<Table.Cell>Background color for tooltips</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
|
|
<Table.Cell>Border color for tooltips</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">gridColor</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
|
|
<Table.Cell>Color for the grid lines</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
|
|
<Table.Cell>Function to format values</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">showGrid</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
|
<Table.Cell>Whether to show grid lines</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">showTooltip</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
|
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell className="font-medium">className</Table.Cell>
|
|
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
|
<Table.Cell className="*:text-xs">-</Table.Cell>
|
|
<Table.Cell>Additional CSS classes</Table.Cell>
|
|
</Table.Row>
|
|
</Table.Body>
|
|
</Table>
|