@rsuite/charts

Available Charts

Quick Example

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

const data = [
  { month: 'Jan', revenue: 4200 },
  { month: 'Feb', revenue: 5800 },
  { month: 'Mar', revenue: 3900 },
];

export default function App() {
  return (
    <BarChart height={300} data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="revenue" name="Revenue" />
    </BarChart>
  );
}

Features

• Built on Recharts — full access to the Recharts API; pass any recharts prop directly to the chart wrappers.
• rsuite color palette — series are automatically colored using the rsuite design-system palette. Override with colorPalette prop.
• Responsive by default — every chart uses ResponsiveContainer; set a heightand you’re done.
• Empty & loading states — pass loading or let the chart detect an empty data array automatically.
• TypeScript — complete type definitions, including all recharts prop types.