Charts for React Suite

📊 A set of charts based on rsuite and Recharts

v6 — Completely rewritten on top of Recharts. No backward compatibility with v5.

Install

npm i --save @rsuite/charts

Install recharts as well if you want to compose raw recharts primitives directly, for example with ChartContainer:

npm i --save @rsuite/charts recharts

Quick Start

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, CartesianGrid } from '@rsuite/charts';

const data = [
  { name: 'Jan', pv: 800, uv: 400 },
  { name: 'Feb', pv: 967, uv: 430 },
  { name: 'Mar', pv: 1098, uv: 448 },
  { name: 'Apr', pv: 1200, uv: 470 },
  { name: 'May', pv: 1108, uv: 540 },
  { name: 'Jun', pv: 680, uv: 380 },
];

function App() {
  return (
    <BarChart height={300} data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="pv" name="Page Views" />
      <Bar dataKey="uv" name="Unique Visitors" />
    </BarChart>
  );
}

Features

• Built on Recharts — uses the full recharts API; any recharts component works inside our chart wrappers.
• rsuite color palette — series are automatically colored using the rsuite design-system palette.
• Responsive by default — every chart wraps with ResponsiveContainer; just set a height.
• Empty state & loading — built-in placeholders for empty data and loading state.
• TypeScript — full type definitions.

Available Charts

Component	Description
<BarChart>	Bar / horizontal bar chart
<LineChart>	Line chart
<AreaChart>	Area chart
<ComposedChart>	Mix of Bar, Line, and Area
<ScatterChart>	Scatter / bubble chart
<PieChart>	Pie / donut chart
<RadarChart>	Radar / spider chart
<RadialBarChart>	Radial bar chart
<FunnelChart>	Funnel chart
<Treemap>	Treemap chart

Styled Components

Convenience re-exports for common recharts primitives. When you use them inside the @rsuite/charts chart wrappers, rsuite defaults are injected automatically:

Component	Description
<XAxis>	X axis (rsuite tick/line style)
<YAxis>	Y axis (rsuite tick/line style)
<CartesianGrid>	Horizontal grid lines
<Tooltip>	Tooltip popup (rsuite card style)
<Legend>	Chart legend (rsuite text style)
<Brush>	Data range brush

Series Components

Re-exported from recharts. Colors are injected automatically when they are used inside the @rsuite/charts chart wrappers:

Bar · Line · Area · Scatter · Pie · Cell · Radar · RadialBar · Funnel

ChartContainer

For full control, use <ChartContainer> to wrap any recharts chart directly. ChartContainer handles layout, loading, empty state, and theme context, but it does not mutate raw recharts children for you:

import { ChartContainer } from '@rsuite/charts';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

<ChartContainer height={300} loading={isLoading} empty={data.length === 0}>
  <BarChart data={data}>
    <Bar dataKey="value" fill="#34c3ff" />
    <XAxis dataKey="name" />
    <YAxis />
  </BarChart>
</ChartContainer>;

License

MIT licensed