Chart

Open-code aq-ui accessible component family for Chart.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Registry installs

Last seven days

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add chart

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { ChartContainer } from "@/components/ui/chart"

<ChartContainer />

ChartConfig

typeSource L20

Type contract for ChartConfig.

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

ChartContainer

constSource L47

Open-code aq-ui accessible component family for Chart.

const ChartContainer = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] initialDimension?: { width: number height: number } }>(…)

Props type: React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] initialDimension?: { width: number h…

Props

Name	Type	Default
`config`	`ChartConfig`	`—`
`children`	`React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]`	`—`
`initialDimension?`	`{ width: number height: number }`	`INITIAL_DIMENSION`

ChartLegend

constSource L329

Public const export from Chart.

const ChartLegend = RechartsPrimitive.Legend

ChartLegendContent

constSource L336

Content export for composing Chart.

const ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(…)

Props type: ChartLegendContentProps

Props

Name	Type	Default
`hideIcon?`	`boolean`	`false`
`nameKey?`	`string`	`—`

ChartStyle

functionSource L97

Public function export from Chart.

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => …

Props type: { id: string; config: ChartConfig }

Props

Name	Type
`id`	`string`
`config`	`ChartConfig`

ChartTooltip

constSource L159

Public const export from Chart.

const ChartTooltip = RechartsPrimitive.Tooltip

ChartTooltipContent

constSource L178

Content export for composing Chart.

const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(…)

Props type: ChartTooltipContentProps

Props

Name	Type	Default
`hideLabel?`	`boolean`	`false`
`hideIndicator?`	`boolean`	`false`
`indicator?`	`"line" \| "dot" \| "dashed"`	`"dot"`
`nameKey?`	`string`	`—`
`labelKey?`	`string`	`—`

Registry dependencies

utils

Package dependencies

recharts@3.8.0

Files

components/ui/chart.tsx