A customizable line chart component to visualize trends and data over time with smooth curves and data points. 📉
pnpm dlx shadcn@latest add 'https://retroui.dev/r/line-chart.json'| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | [] | Array of data objects to display |
| index | string | - | Key for the x-axis (category) data |
| categories | string[] | [] | Array of keys for the data values to display as lines |
| strokeColors | string[] | ["var(--foreground)"] | Array of stroke colors for the lines |
| strokeWidth | number | 2 | Width of the line strokes |
| dotSize | number | 4 | Size of the data point dots |
| tooltipBgColor | string | "var(--background)" | Background color for tooltips |
| tooltipBorderColor | string | "var(--border)" | Border color for tooltips |
| gridColor | string | "var(--muted)" | Color for the grid lines |
| valueFormatter | (value: number) => string | (value) => value.toString() | Function to format values |
| showGrid | boolean | true | Whether to show grid lines |
| showTooltip | boolean | true | Whether to show tooltips on hover |
| className | string | - | Additional CSS classes |
Last Updated: 12 Aug, 2025