Chart

Builds accessible, theme-aware data visualizations with Recharts.

Area Chart

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

Installation

Install Chart from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/chart

Usage

import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "@/components/ui/chart"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
ChartConfig	The root component that owns the primary structure and state.
ChartContainer	A composable part of the component anatomy.
ChartTooltip	A composable part of the component anatomy.
ChartTooltipContent	Contains the primary visible content.
ChartLegend	A composable part of the component anatomy.
ChartLegendContent	Contains the primary visible content.
ChartStyle	A composable part of the component anatomy.

API Reference

Chart exports 7 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

ChartConfig Component
ChartContainer Component
ChartTooltip Component
ChartTooltipContent Component
ChartLegend Component
ChartLegendContent Component
ChartStyle Component

Accessibility

Chart adds no application-specific accessible name by itself; use semantic content and label any interactive descendants.
Do not communicate state or meaning through color alone, and verify the composed result at text zoom and with keyboard navigation.

Source

Chart uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Carousel Checkbox