Line chart
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.
Basic
Line charts are great for showing trends, comparisons, and patterns over time. They keep your data clean and easy to read.
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.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install 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.
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.
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.