Line chart
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/recharts
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install recharts react-aria-components
Examples
Stacked
Stacked line charts show how parts make up a whole. Ideal when you want to compare multiple categories and still keep track of the total.
Monotone
Monotone charts use a smooth curve for a cleaner look. Good when you only need to show one metric clearly without visual clutter.
Custom format
Customize the look of your chart to match your design system. You can change colors, styles, and anything else that matters for your UI.
Custom tooltip
Add context when users hover. Custom tooltips let you show extra info like icons, units, or anything else that makes your data easier to read.
Custom legend
Replace the default legend with something more useful. Add icons, labels, or even interactions to better explain what’s on the chart.
Custom colors
Customize the colors of your line chart to match your brand or design system. This helps maintain visual consistency across your application.
Controlled
Manage the chart fully with state. Use this to sync with other UI, switch datasets, or respond to user interactions programmatically.
Component API
LineChart
LineChart extends the internal Intent UI <BaseChart> component.
cartesianGridPropsCartesianGridPropschartPropsOmit<React.ComponentProps<typeof LineChartPrimitive>, "data" | "stackOffset">childrenReact.ReactNodeclassNamestringcolorsreadonly (ChartColorKeys | string)[]DEFAULT_COLORSconfigChartConfigconnectNullsbooleanfalsecontainerHeightnumber370 desktop / 200 mobiledataRecord<string, any>[][]dataKeystringdisplayEdgeLabelsOnlybooleanfalsehideGridLinesbooleanfalsehideXAxisbooleanfalsehideYAxisbooleanfalseintervalTypeIntervalTypeequidistantPreserveStartlayoutChartLayouthorizontallegendLegendContentType | booleantruelegendPropsOmit<ComponentProps<typeof LegendPrimitive>, "content" | "ref">linePropsLinePropstooltipTooltipContentType<ValueType, NameType> | booleantruetooltipPropsBaseChartProps["tooltipProps"]typeChartTypedefaultvalueFormatter(value: number) => string(value) => value.toString()xAxisPropsXAxisPropsPrimitiveyAxisPropsYAxisPrimitivePropsSee the Recharts LineChart API reference for the full API reference.
