feat(Chart): new component

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Exploration of a UChart component built on TanStack Charts. This is a prototype to evaluate the library, not a commitment to ship it in v4. TanStack Charts is still alpha (0.18.0, pinned in the catalog) and its API can change between minor releases.

<UChart type="bar" :data="data" index="month" :categories="['desktop', 'mobile']" />

• @tanstack/charts is an optional peer dependency (^0.18.0), so only apps using UChart install it. On a 0.x release the caret stays within 0.18.x, each alpha minor is a deliberate bump.
• type is line, area, bar or donut, with stacked, curve (linear, monotone, step), points, grid, x-axis, y-axis, legend, format, thickness and height props. A #center slot places content inside the donut.
• colors takes theme colors or any CSS color. They are set as --ts-chart-N variables on the root, so charts follow the theme and color mode without rebuilding the definition.
• definition accepts a full TanStack chart definition as an escape hatch. The #tooltip slot forwards to TanStack's #tooltipBody.
• The SVG renders on the server, see the snapshots.
• RTL reverses the x range and moves the y axis to the right, TanStack keeps axis sides physical in a right-to-left container.
• Curves are implemented against TanStack's ChartCurve interface in utils/chart.ts (monotone is the same Fritsch–Carlson math as d3's curveMonotoneX), which avoids adding d3-shape as a second peer.
• The Analytics and Goal tiles of the docs playground now use UChart instead of fake bars and a conic-gradient ring.

Findings so far:

• The Vue adapter sets height as a unitless number on the host, which the browser drops. Worked around with an explicit px style.
• The adapter renders a fragment and only forwards class / style, so the component needs its own root element for data-slot.
• The imports used here weigh about 54 KB gzipped (vue excluded), including about 7 KB for the donut type from @tanstack/charts/polar. Loading that part through defineAsyncComponent works with SSR and hydration, but it's left eager for the prototype.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​tanstack/​charts@​0.18.0

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm robust-predicates is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → npm/@tanstack/charts@0.18.0 → npm/robust-predicates@3.0.3 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/robust-predicates@3.0.3. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[codspeed]

Merging this PR will improve performance by 11.39%

⚡ 1 improved benchmark
✅ 30 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	plain <button>	1.3 ms	1.2 ms	+11.39%

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing feat/chart-prototype (0116135) with v4 (8034f83)}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@7022

commit: 0116135

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ui-repl	Ready	Preview	Sep 24, 2026 3:19pm UTC