Line charts for a Vue app or a Nuxt page.
10 of shadcn/ui's line charts on TanStack Charts, written as Vue 3 single-file components for a Vue app or a Nuxt page. Smooth, straight and stepped lines, dots, custom markers, labels from the config, two series, and a daily chart with buttons that switch the series.
Add shadcn.io to your AI agent. · Pro It installs the components, blocks and icons around your charts, with Pro.
Set up MCPLine charts
10 charts.
- Interactive Line ChartLine charts
- Multiple Line ChartLine charts
- Line ChartLine charts
- Linear Line ChartLine charts
- Step Line ChartLine charts
- Line Chart with DotsLine charts
- Line Chart with Colored DotsLine charts
- Line Chart with Custom DotsLine charts
- Line Chart with LabelsLine charts
- Line Chart with Custom LabelsLine charts
Need the page around it? With Pro, your AI agent installs dashboard, stats and monitoring blocks from a prompt, charts already laid out in them.
Get ProMore Vue charts
- Area charts10Filled series over time: totals, stacks and trends.
- Bar charts10Bars to compare categories side by side or stacked.
- Pie charts11Shares of a whole as pies and donuts.
- Radar charts14Several measures around one center, compared at a glance.
- Radial charts6Progress and totals drawn as rings.
- Tooltips9The tooltip's variants: indicators, labels, formatters and icons.
Line charts in other frameworks
Pricing
Charts are free. Pro builds the rest of the page
All 70 charts are free with an account. Pro adds 6,000+ blocks, from dashboards to pricing, the Pro backgrounds, buttons, shaders and text effects, and the MCP that installs them from a prompt.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Production-ready React sections: hero, pricing, features, dashboards and more.
- Complete multi-page sites you can ship as they are.
- React icons from every major library, installable with one command.
- Presets that restyle every block, in light and dark.
- Lets your AI editor search, preview and install blocks for you.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Basic usage
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: High usage
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Unlimited usage
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
- Complete multi-page sites you can ship as they are.Templates: All 14 templates
- React icons from every major library, installable with one command.React icons: 294k+ icons
- Presets that restyle every block, in light and dark.Themes: All 59 themes
- Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Lets your AI editor search, preview and install blocks for you.MCP server: High usage
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
A line chart for every Vue page.
The 10 line charts cost nothing beyond a free account. Pro is for the page around them: your AI agent installs the dashboard, stats and monitoring blocks.
Cancel anytimeKeep what you've shipped if you cancel