{"record":{"id":"9a9dd72025955950","repo":"shadcn-ui/ui","slug":"usechart-must-be-used-within-a-chartcontainer-9a9dd7","errorCode":null,"errorMessage":"useChart must be used within a <ChartContainer />","messagePattern":"useChart must be used within a <ChartContainer />","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"apps/v4/registry/bases/radix/ui/chart.tsx","lineNumber":36,"sourceCode":"    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n  initialDimension?: {","sourceCodeStart":18,"sourceCodeEnd":54,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/apps/v4/registry/bases/radix/ui/chart.tsx#L18-L54","documentation":"useChart reads ChartContext, which is only populated by <ChartContainer> (it renders <ChartContext.Provider value={{ config }}>). Any chart sub-part that needs the config (ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent) calls useChart; without a <ChartContainer> ancestor the context is null and the hook throws, since rendering a tooltip/legend without a config is meaningless.","triggerScenarios":"Using <ChartTooltipContent> or <ChartLegend> on a raw Recharts chart that is not wrapped in <ChartContainer>; splitting a chart into pieces and rendering the legend elsewhere; forgetting ChartContainer when migrating from plain Recharts.","commonSituations":"Copy-pasting only the <ChartTooltip> from an example; rendering chart pieces in Storybook without the container; refactor that swaps ChartContainer for a div.","solutions":["Wrap the Recharts chart and its sub-components in <ChartContainer config={config}>.","Ensure the same config object passed to ChartContainer is the one the tooltip/legend reads.","Move ChartTooltip/ChartLegend back inside the <ChartContainer> tree."],"exampleFix":"// before\n<ResponsiveContainer>\n  <BarChart>\n    <ChartTooltip content={<ChartTooltipContent />} />\n  </BarChart>\n</ResponsiveContainer>\n\n// after\n<ChartContainer config={config}>\n  <BarChart>\n    <ChartTooltip content={<ChartTooltipContent />} />\n  </BarChart>\n</ChartContainer>","handlingStrategy":"validation","validationCode":"function useOptionalChart() {\n  return React.useContext(ChartContext)\n}\nconst chart = useOptionalChart()\nif (!chart) return null","typeGuard":"function useHasChartContainer(): boolean {\n  return React.useContext(ChartContext) !== null\n}","tryCatchPattern":null,"preventionTips":["Treat <ChartContainer config={config}> as the mandatory wrapper for any Recharts chart using these helpers.","Keep <ChartTooltip>/<ChartTooltipContent>/<ChartLegend> inside the ChartContainer tree.","Pass the same config object to the container and any code that reads chart config.","Smoke-test chart pieces rendered within <ChartContainer>."],"tags":["react","context","chart","recharts"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}