Charts for React Suite

:bar_chart: 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