Skip to content
aq-ui
Back to ComponentsComponent

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.

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

NameTypeDefault
configChartConfig—
childrenReact.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]—
initialDimension?{ width: number height: number }INITIAL_DIMENSION
<ChartContainer />

ChartLegend

constSource L329

Public const export from Chart.

const ChartLegend = RechartsPrimitive.Legend
<ChartLegend />

ChartLegendContent

constSource L336

Content export for composing Chart.

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

Props

NameTypeDefault
hideIcon?booleanfalse
nameKey?string—
<ChartLegendContent />

ChartStyle

functionSource L97

Public function export from Chart.

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

Props

NameType
idstring
configChartConfig
<ChartStyle />

ChartTooltip

constSource L159

Public const export from Chart.

const ChartTooltip = RechartsPrimitive.Tooltip
<ChartTooltip />

ChartTooltipContent

constSource L178

Content export for composing Chart.

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

Props

NameTypeDefault
hideLabel?booleanfalse
hideIndicator?booleanfalse
indicator?"line" | "dot" | "dashed""dot"
nameKey?string—
labelKey?string—
<ChartTooltipContent />

Registry dependencies

utils

Package dependencies

recharts@3.8.0

Files

  • components/ui/chart.tsx

Source