Chart

A Recharts wrapper providing themed chart container, tooltip, and legend components.

Overview

Chart bridges Recharts with Visor's token system. ChartContainer injects scoped CSS custom properties for chart colors, while ChartTooltipContent and ChartLegendContent provide pre-styled, token-aware renderers.

import {
  ChartContainer, ChartTooltip, ChartTooltipContent,
  ChartLegend, ChartLegendContent
} from '@/components/ui/chart/chart';
import type { ChartConfig } from '@/components/ui/chart/chart';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

const data = [
  { month: 'Jan', sales: 186, revenue: 80 },
  { month: 'Feb', sales: 305, revenue: 200 },
  { month: 'Mar', sales: 237, revenue: 120 },
];

const config: ChartConfig = {
  sales: { label: 'Sales', color: 'var(--chart-1)' },
  revenue: { label: 'Revenue', color: 'var(--chart-2)' },
};

<ChartContainer config={config}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Bar dataKey="sales" fill="var(--color-sales)" />
    <Bar dataKey="revenue" fill="var(--color-revenue)" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </BarChart>
</ChartContainer>

ChartConfig

The ChartConfig object maps series keys to labels, optional icons, and color values. Colors can be a single value or per-theme:

// Single color for all themes
const config: ChartConfig = {
  sales: { label: 'Sales', color: 'var(--chart-1)' },
};

// Per-theme colors
const config: ChartConfig = {
  sales: {
    label: 'Sales',
    theme: { light: '#4f46e5', dark: '#818cf8' },
  },
};

Installation

npx visor add chart

This copies two files into your project:

components/ui/chart/chart.tsx — the component
components/ui/chart/chart.module.css — the styles

Peer dependency: Chart requires recharts to be installed in your project.

npm install recharts

API Reference

ChartProps

No props data available for “chart”.

Sub-components

Component	Purpose
`ChartContainer`	Responsive wrapper that provides ChartConfig context and injects scoped color CSS
`ChartTooltip`	Re-export of Recharts Tooltip for use with ChartTooltipContent
`ChartTooltipContent`	Token-themed tooltip renderer with indicator dots, labels, and formatted values
`ChartLegend`	Re-export of Recharts Legend for use with ChartLegendContent
`ChartLegendContent`	Token-themed legend renderer with color swatches and config-driven labels
`ChartStyle`	Internal component that injects scoped CSS custom properties for chart colors

ChartTooltipContent Props

Prop	Type	Default	Description
`indicator`	`"line" \| "dot" \| "dashed"`	`"dot"`	Tooltip color indicator style
`hideLabel`	`boolean`	`false`	Hides the tooltip header label
`hideIndicator`	`boolean`	`false`	Hides the color indicator in tooltip items

ChartLegendContent Props

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hides icons in legend items
`verticalAlign`	`"top" \| "bottom"`	`"bottom"`	Legend vertical position

Chart

On this page