{"record":{"id":"3bdc5aa2084b199e","repo":"shadcn-ui/ui","slug":"usechart-must-be-used-within-a-chartcontainer","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/aria/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/aria/ui/chart.tsx#L18-L54","documentation":"`useChart` reads `ChartContext` (`createContext<ChartContextProps | null>(null)`); `<ChartContainer>` provides `{ config }` (ChartConfig). Chart sub-components (ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent) rendered outside `<ChartContainer>` throw so config-driven rendering never reads null.","triggerScenarios":"Mounting chart helpers (e.g. `<ChartTooltip />`, `<ChartLegendContent />`) outside `<ChartContainer config={...}>`. Typically when porting a chart from the docs and dropping or relocating the container.","commonSituations":"Building a custom chart layout where the tooltip is rendered as a sibling of ChartContainer; reusing tooltip content in a non-chart context; tests of individual parts.","solutions":["Wrap the chart subtree (including `<ChartTooltip>`/`<ChartLegend>`) in `<ChartContainer config={chartConfig}>`.","Pass a valid `config` prop to ChartContainer (it is required).","Decorate tests/stories with `<ChartContainer>`."],"exampleFix":"// before\n<ChartTooltipContent />\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>)","typeGuard":"import React from \"react\"\nimport { ChartContext } from \"@/registry/bases/aria/ui/chart\"\nconst insideChart = () => React.useContext(ChartContext) != null","tryCatchPattern":"try { useChart() } catch (e) { if (e.message.includes(\"<ChartContainer />\")) {/*wrap in ChartContainer*/} throw e }","preventionTips":["Always pass `config` to ChartContainer.","Keep tooltip/legend parts inside <ChartContainer>.","Add ChartContainer to story/test decorators."],"tags":["react","context","hooks","shadcn","chart","aria-style"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}