registry:component

Chart

v1.0.0ga

Chart container and helpers for Recharts visualizations.

Registry Endpoint

npx shadcn@latest add @aavya/ui-chart

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-chart.json

Live Preview

Props

Part	Prop	Type	Default
ChartContainer	config	ChartConfig	—
ChartContainer	children	React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']	—
ChartTooltipContent	hideLabel?	boolean	false
ChartTooltipContent	hideIndicator?	boolean	false
ChartTooltipContent	indicator?	'line' \| 'dot' \| 'dashed'	'dot'
ChartTooltipContent	nameKey?	string	—
ChartTooltipContent	labelKey?	string	—
ChartLegendContent	hideIcon?	boolean	false
ChartLegendContent	nameKey?	string	—

Usage Snippet

import { Chart } from '@/components/ui/chart'

export default function Example() {
  return (
    <div className="p-6">
      <Chart />
    </div>
  )
}

Source Preview

'use client'

import * as React from 'react'

import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot='chart'
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cu