{"record":{"id":"e111fd4d462bc9a0","repo":"shadcn-ui/ui","slug":"usechart-must-be-used-within-a-chartcontainer-e111fd","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/new-york-v4/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/new-york-v4/ui/chart.tsx#L18-L54","documentation":"Same guard as the bases/radix chart: useChart reads ChartContext, populated only by <ChartContainer>. This is the new-york-v4 legacy copy; any chart sub-component (ChartTooltipContent, ChartLegendContent) calling useChart outside <ChartContainer> throws.","triggerScenarios":"Using new-york-v4 chart sub-components on a raw Recharts chart without <ChartContainer>; rendering ChartTooltip/ChartLegend in isolation.","commonSituations":"Migrating a chart off the new-york-v4 style; Storybook stories rendering chart pieces without the container.","solutions":["Wrap the chart in <ChartContainer config={config}>.","Keep ChartTooltip/ChartLegend inside the ChartContainer tree.","Reuse the same config object for container and tooltip."],"exampleFix":"// before\n<BarChart>\n  <ChartTooltip content={<ChartTooltipContent />} />\n</BarChart>\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":["Wrap new-york-v4 Recharts charts in <ChartContainer config={config}>.","Keep chart tooltip/legend helpers inside the container tree.","Reuse the same config object across container and consumers."],"tags":["react","context","chart","new-york-v4"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}