Chart

v1.1.1

Documentation Under Review

Catalyst Chart is a data visualization component built on top of Recharts, providing a consistent and accessible way to display bar charts with multiple data series — featuring four color variants, responsive behavior, interactive tooltips, and customizable legends. ChartTooltipContent, ChartLegend, and ChartLegendContent have been adapted from the shadcn chart components to fit the needs of this chart setup.

Installation

npm install @pmi/catalyst-chart

import {
  BarChart,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltipContent,
  Tooltip,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from '@pmi/catalyst-chart';

Dependencies

The Chart component uses the following peer dependencies:

• recharts (v2.13.3 or higher)
• @tailwindcss/container-queries (v0.1.1 or higher)

Tailwind Configuration

Add the Chart component preset to your tailwind.config.ts:

import type { Config } from 'tailwindcss';
import { default as tailwindChartPreset } from '@pmi/catalyst-chart/tailwind.config';

export default {
  content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/@pmi/catalyst-*/**/*.{ts,tsx,js,jsx}'],
  theme: {},
  presets: [tailwindChartPreset],
  plugins: [],
} satisfies Config;

Variants

Primary

The primary variant uses accent colors for data visualization.

Secondary

The secondary variant uses info colors for data visualization.

Tertiary

The tertiary variant uses warning colors for data visualization.

Quaternary

The quaternary variant uses saddle colors for data visualization.

API Reference

ChartContainer

The main container component that provides context and configuration for the chart. Accepts all standard HTML div props and forwards ref.

BarChart

The bar chart component that renders the actual chart visualization. Accepts all standard Recharts BarChart props.

ChartConfig

Configuration object type for defining data series:

type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode; // Display label for the data series
    icon?: React.ComponentType; // Optional icon component
    color?: string; // Optional custom color
  };
};

const chartConfig = {
  Revenue: {
    label: 'Revenue',
    icon: DollarIcon,
  },
  Expenses: {
    label: 'Expenses',
    icon: CreditCardIcon,
  },
};

ChartTooltipContent

Customizable tooltip component for displaying data values on hover. Accepts all standard HTML div props and forwards ref. Recharts tooltip props (active, payload, label, etc.) are handled internally.

ChartLegendContent

Customizable legend component for displaying data series labels. Accepts all standard HTML div props and forwards ref. Recharts legend props (payload, verticalAlign) are handled internally.

Recharts Components

The following Recharts components are re-exported for convenience:

• ResponsiveContainer - Wrapper for responsive chart sizing
• XAxis - X-axis configuration component
• YAxis - Y-axis configuration component
• CartesianGrid - Grid lines component
• Tooltip - Tooltip wrapper component
• Bar - Individual bar component (advanced use cases)

For detailed documentation on these components, see the Recharts API documentation. For performance guidance with large datasets, see the Recharts performance guide.

Accessibility

Keyboard Interactions

Chart currently has no custom keyboard interactions. The chart and legend items are not focusable by default — only mouse interactions are supported. Consider wrapping the chart in a focusable region or adding a data table alternative for keyboard-only users.

ARIA

• Data values are exposed to screen readers through Recharts' built-in ARIA attributes.
• Chart structure is semantically meaningful via SVG roles.
• Legend labels provide context for data series.
• All color variants meet WCAG AA contrast requirements for text and interactive elements.
• Provide descriptive labels in the chartConfig object and use valueFormatter to add units or currency symbols for context.
• Consider providing a text summary of the data alongside the chart for users who cannot see it — see the W3C complex images tutorial for guidance.

See the Recharts documentation for inherited baseline behavior.

Choosing the Right Component

Use Chart when you need to visualize grouped or comparative numeric data across categories. Reach for a different primitive when:

Related

• Card
• Data Table
• Badge
• Progress