Chart

v1.2.1

Ready for Production

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

When the data and accessibleLabel props are provided, a visually hidden <table> is rendered inside the chart. It receives tabIndex={0} so keyboard users can Tab to it. When focused, a visible ring appears around the entire chart area. Navigate cells with Ctrl+Alt+Arrow keys in NVDA/JAWS.

Screen Reader — Accessible Data Table (WCAG 1.3.1 / H51)

Pass the data and accessibleLabel props to ChartContainer to render a screen-reader-accessible table that mirrors the chart data. The SVG chart is wrapped in aria-hidden="true" to prevent assistive technologies from announcing meaningless SVG paths:

<ChartContainer
  config={chartConfig}
  data={data}
  accessibleLabel="Bar chart showing Predictive, Agile, and Hybrid values across four groups"
>
  ...
</ChartContainer>

The hidden table announces: chart label → column headers (series names) → row headers (group names) → numeric values.

Non-Color Visual Indicators (WCAG 1.4.1)

Data series are distinguished by color gradients. To ensure users with color vision deficiencies can also tell series apart, add a symbol to each entry in chartConfig. The symbol is rendered at the bottom of each bar, and duplicated in the legend and tooltip:

const chartConfig = {
  Predictive: { label: 'Predictive', symbol: '●' },
  Agile: { label: 'Agile', symbol: '■' },
  Hybrid: { label: 'Hybrid', symbol: '▲' },
};

All symbols carry aria-hidden="true" — screen readers get the data from the accessible table instead.

ARIA

• 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.

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 Bar