Chart

A chart component that renders Recharts with themed colors, tooltips, and legends. It behaves with keyboard navigation and visible focus rings. Use it to display data visualizations with consistent styling and accessibility.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/chart

npx layro-cli add @preetsuthar17/chart

npx layro-cli add @preetsuthar17/chart

bunx layro-cli add @preetsuthar17/chart

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import { cn } from "cn"
import * as RechartsPrimitive from "recharts"
import type {
  DefaultLegendContentProps,
  TooltipContentProps,
  TooltipProps,
  TooltipValueType,
} from "recharts"

const THEMES = { light: "", dark: ".dark" } as const