Charts

Overview

@hanzo/ui provides a set of chart components built on top of Recharts. The chart components are designed to be composable and work with Tailwind CSS theming.

Installation

npx @hanzo/ui@latest add chart

Components

The chart package includes the following components:

• ChartContainer - Responsive container that handles theming and sizing
• ChartTooltip - Styled tooltip component
• ChartTooltipContent - Content renderer for tooltips
• ChartLegend - Chart legend component
• ChartLegendContent - Content renderer for legends

Chart Types

• Area Chart - For showing trends over time
• Bar Chart - For comparing categorical data
• Line Chart - For showing continuous data
• Pie Chart - For showing proportional data
• Radar Chart - For multivariate data comparison
• Radial Chart - For circular data visualization
• Tooltip - Shared tooltip component

Usage

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
import { Bar, BarChart, XAxis } from "recharts"

const data = [
  { month: "Jan", value: 186 },
  { month: "Feb", value: 305 },
  { month: "Mar", value: 237 },
]

const config = {
  value: { label: "Value", color: "hsl(var(--chart-1))" },
}

export function MyChart() {
  return (
    <ChartContainer config={config}>
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="value" fill="var(--color-value)" />
      </BarChart>
    </ChartContainer>
  )
}

Theming

Charts use CSS variables for theming. Define chart colors in your CSS:

:root {
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}