Line chart
Installation
Add the component with the CLI.
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
Install the dependencies, then copy the component source into your project.
npm install recharts react-aria-components
Examples
Stacked
Stack series to compare their contributions to a total.
Monotone
Use monotone interpolation to draw a smooth curve between data points.
Custom format
Customize the chart’s colors and styles.
Custom tooltip
Use a custom tooltip to display labels, units, or icons when users hover over a data point.
Custom legend
Use a custom legend to display series labels, icons, or controls.
Custom colors
Set series colors in the chart configuration.
Controlled
Manage chart state to switch datasets or coordinate with other controls.
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.
