Line charts are ideal for showing data trends across time. They work great for continuous data and help identify patterns quickly. They support custom styling.

Recharts

Engagement last 7d

Tracks likes, comments, and shares during the most recent 7-day period.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

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.

chart

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install recharts'

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.

Engagement last 7d

Tracks likes, comments, and shares during the most recent 7-day period.

Monotone

Monotone charts use a smooth curve for a cleaner look. Good when you only need to show one metric clearly without visual clutter.

Traffic last 14d

Daily visits versus sign-ups trend.

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.

Net revenue by month

Revenue minus expenses to show monthly profitability.

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.

Engagement last 7d

Likes, comments, and shares for the recent week.

Custom legend

Replace the default legend with something more useful. Add icons, labels, or even interactions to better explain what’s on the chart.

Engagement last 7d

Likes, comments, and shares for the recent week.

Custom colors

Customize the colors of your line chart to match your brand or design system. This helps maintain visual consistency across your application.

Engagement last 7d

Tracks likes, comments, and shares during the most recent 7-day period.

Controlled

Manage the chart fully with state. Use this to sync with other UI, switch datasets, or respond to user interactions programmatically.

Engagement

Likes, comments, and shares over a dynamic time range.

Component API

LineChart

The LineChart component renders data trends with lines.

Prop	Type	Default
`cartesianGridProps`	`CartesianGridProps`	-
`chartProps`	`Omit<React.ComponentProps<typeof LineChartPrimitive>, "data" \| "stackOffset">`	-
`children`	`React.ReactNode`	-
`className`	`string`	-
`colors`	`readonly (ChartColorKeys \| string)[]`	`DEFAULT_COLORS`
`config`	`ChartConfig`	-
`connectNulls`	`boolean`	`false`
`containerHeight`	`number`	`370 desktop / 200 mobile`
`data`	`Record<string, any>[]`	`[]`
`dataKey`	`string`	-
`displayEdgeLabelsOnly`	`boolean`	`false`
`hideGridLines`	`boolean`	`false`
`hideXAxis`	`boolean`	`false`
`hideYAxis`	`boolean`	`false`
`intervalType`	`IntervalType`	`equidistantPreserveStart`
`layout`	`ChartLayout`	`horizontal`
`legend`	`LegendContentType \| boolean`	`true`
`legendProps`	`Omit<ComponentProps<typeof LegendPrimitive>, "content" \| "ref">`	-
`lineProps`	`LineProps`	-
`tooltip`	`TooltipContentType<ValueType, NameType> \| boolean`	`true`
`tooltipProps`	`BaseChartProps["tooltipProps"]`	-
`type`	`ChartType`	`default`
`valueFormatter`	`(value: number) => string`	`(value) => value.toString()`
`xAxisProps`	`XAxisPropsPrimitive`	-
`yAxisProps`	`YAxisPrimitiveProps`	-