Stalk UI

Component

Chart

A theming contract for charts; bring your own recharts.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/chart

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div style={{ width: 360 }}>
  <ChartContainer
    config={{
      desktop: { label: 'Desktop', color: 'var(--colors-accent-solid)' },
      mobile: { label: 'Mobile', color: 'var(--colors-success-solid)' },
    }}
    style={{ aspectRatio: 'auto' }}
  >
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <ChartTooltipContent
        active
        label="January"
        payload={[
          { dataKey: 'desktop', value: 186 },
          { dataKey: 'mobile', value: 80 },
        ]}
      />
      <ChartLegendContent payload={[{ dataKey: 'desktop' }, { dataKey: 'mobile' }]} />
    </div>
  </ChartContainer>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`config``ChartConfig`Yes--
PropTypeRequiredDefaultDescription
`payload``LegendPayloadEntry[]`No-recharts passes its legend entries here.
PropTypeRequiredDefaultDescription
`active``boolean`No--
`hideIndicator``boolean`No--
`hideLabel``boolean`No--
`label``ReactNode`No--
`payload``TooltipPayloadEntry[]`No-recharts passes its hovered points here.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/chart.json`
  • Recipe: `chart`
  • Files: `src/components/ui/chart.tsx`