@classic-homes/charts-react

React ECharts components for the Classic Theme design system. Charts pick up the Classic light and dark themes from @classic-homes/charts-core.

Installation

npm install @classic-homes/charts-react echarts react react-dom

Peer dependencies: echarts@^5.5.0, react@^18 || ^19, react-dom@^18 || ^19.

Quick Start

import { LineChart } from '@classic-homes/charts-react';

const data = {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [
    { name: '2024', data: [120, 132, 101, 134, 90, 230] },
    { name: '2025', data: [220, 182, 191, 234, 290, 330] },
  ],
};

export function RevenueChart() {
  return <LineChart data={data} />;
}

Exports

• Core charts: LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart
• Extended charts: RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart
• Base components: ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend
• Hooks: useChart, useChartTheme, useChartResize, useReducedMotion, registerClassicThemes, useChartLegend
• Utilities: cn
• Types: component props (LineChartComponentProps, ...) and the chart data and event types re-exported from @classic-homes/charts-core

Chart data and option types come from @classic-homes/charts-core/types.

import type { LineChartData } from '@classic-homes/charts-core/types';