Visualizations

Line chart

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

Basic

Line charts are great for showing trends, comparisons, and patterns over time. They keep your data clean and easy to read.

Loading...

Installation

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

Manual installation

npm i recharts'

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.

Loading...

Monotone

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

Loading...

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.

Loading...

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.

Loading...

Custom legend

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

Loading...

Custom colors

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

Loading...

Controlled

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

Loading...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 350+ blocks and polished templates crafted for professionals.
Explore