{"record":{"id":"6733c6cc72636bf0","repo":"shadcn-ui/ui","slug":"usechart-must-be-used-within-a-chartcontainer-6733c6","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/base/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/base/ui/chart.tsx#L18-L54","documentation":"Identical contract to [152] but in the `base` style registry. `useChart` reads `ChartContext`; chart parts rendered outside `<ChartContainer>` throw so config is never null.","triggerScenarios":"Mounting `<ChartTooltipContent />` / `<ChartLegendContent />` outside `<ChartContainer config={...}>` when importing from the `base` style.","commonSituations":"Using the `base` style and relocating tooltip/legend outside the container; tests of individual parts.","solutions":["Wrap chart parts in `<ChartContainer config={cfg}>` from the `base` style import path.","Always pass a `config` prop to ChartContainer.","Decorate tests/stories with `<ChartContainer>`."],"exampleFix":"// before\n<ChartTooltip />\n<ChartContainer config={cfg}>...</ChartContainer>\n\n// after\n<ChartContainer config={cfg}>\n  <ChartTooltip>\n    <ChartTooltipContent />\n  </ChartTooltip>\n</ChartContainer>","handlingStrategy":"type-guard","validationCode":"render(<ChartContainer config={cfg}><ChartTooltip><ChartTooltipContent/></ChartTooltip></ChartContainer>) // base style imports","typeGuard":"import React from \"react\"\nimport { ChartContext } from \"@/registry/bases/base/ui/chart\"\nconst insideChart = () => React.useContext(ChartContext) != null","tryCatchPattern":"try { useChart() } catch (e) { if (e.message.includes(\"<ChartContainer />\")) {/*wrap in ChartContainer*/} throw e }","preventionTips":["Pass `config` and keep tooltip/legend inside the base-style <ChartContainer>.","Add the base-style ChartContainer to story/test decorators."],"tags":["react","context","hooks","shadcn","chart","base-style"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}