charts-tooltip
The 9 tooltip chart blocks — copy-once Card compositions over the chart component and recharts, with their sample data inline.
Last updated
What it is
9 chart blocks in the tooltip family. Each is one Card wrapping a
ChartContainer, with its sample data inline — pull one, then point it at your own series.
They depend on card and chart and nothing else.
Install
npx shadcn@latest add @vegastack/chart-tooltip-advancedRegistry setup required
Run this command only after configuring the Base UI shadcn project, the
@vegastack registry namespace, and the Cloudflare Access service-token headers in Install from the VegaStack registry.Every block on this page installs the same way; swap the name.
Examples
chart-tooltip-advanced
A stacked bar chart with a legend.
chart-tooltip-default
A stacked bar chart with a legend.
chart-tooltip-formatter
A stacked bar chart with a legend.
chart-tooltip-icons
A stacked bar chart with a legend.
chart-tooltip-indicator-line
A stacked bar chart with a legend.
chart-tooltip-indicator-none
A stacked bar chart with a legend.
chart-tooltip-label-custom
A stacked bar chart with a legend.
chart-tooltip-label-formatter
A stacked bar chart with a legend.
chart-tooltip-label-none
A stacked bar chart with a legend.
Do / Don't
Do
Copy the one whose shape matches your data, then replace chartData and chartConfig.
Don't
Import a chart block from the registry as a shared component — it is a starting point, not an API.