Chart

Data using the theme's chart colors and tooltip surface.

Examples

Loading preview…

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Chart

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/chart.json'

Usage

A complete example using the installed component and hook paths.

Chart usage

"use client";import { Bar, BarChart, XAxis } from "recharts";import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";const data = [  { day: "Mon", visits: 24 },  { day: "Tue", visits: 38 },  { day: "Wed", visits: 29 },  { day: "Thu", visits: 52 },  { day: "Fri", visits: 43 },];const config = { visits: { label: "Visits", color: "var(--chart-1)" } };function ChartPreview() {  return (    <ChartContainer config={config} className="h-40 w-full">      <BarChart accessibilityLayer data={data}>        <XAxis dataKey="day" tickLine={false} axisLine={false} />        <ChartTooltip content={<ChartTooltipContent />} />        <Bar dataKey="visits" fill="var(--color-visits)" radius={4} />      </BarChart>    </ChartContainer>  );}export default function Demo() {  return <ChartPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

ChartConfig

Exported type.

ChartContainer

ChartContainer props

React.ComponentProps<"div"> & {  config: ChartConfig;  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];  initialDimension?: {    width: number;    height: number;  };}

initialDimension: INITIAL_DIMENSION

ChartTooltip

Exported value.

ChartTooltipContent

ChartTooltipContent props

React.ComponentProps<typeof RechartsPrimitive.Tooltip> &  React.ComponentProps<"div"> & {    hideLabel?: boolean;    hideIndicator?: boolean;    indicator?: "line" | "dot" | "dashed";    nameKey?: string;    labelKey?: string;  } & Omit<    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,    "accessibilityLayer"  >

indicator: "dot"
hideLabel: false
hideIndicator: false

ChartLegend

Exported value.

ChartLegendContent

ChartLegendContent props

React.ComponentProps<"div"> & {  hideIcon?: boolean;  nameKey?: string;} & RechartsPrimitive.DefaultLegendContentProps

hideIcon: false
verticalAlign: "bottom"

ChartStyle

ChartStyle props

{ id: string; config: ChartConfig }

Source

Registry JSON