charts - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #llm #golang #android #machine-learning #linux #nodejs #windows #cli #vue #security #open-source

charts

(★ 91)

:bar_chart: A set of charts based on rsuite and ECharts

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - bug_report.md
  - feature_request.md
- - node.js.yml
  - release.yml
- svg.js
- - globals.css
  - layout.tsx
  - page.tsx
- next-env.d.ts
- next.config.ts
- package-lock.json
- package.json
- tsconfig.json
- - AreaChart.test.tsx
  - AreaChart.tsx
  - BarChart.test.tsx
  - BarChart.tsx
  - ComposedChart.test.tsx
  - ComposedChart.tsx
  - FunnelChart.test.tsx
  - FunnelChart.tsx
  - LineChart.test.tsx
  - LineChart.tsx
  - PieChart.test.tsx
  - PieChart.tsx
  - RadarChart.test.tsx
  - RadarChart.tsx
  - RadialBarChart.test.tsx
  - RadialBarChart.tsx
  - ScatterChart.test.tsx
  - ScatterChart.tsx
  - Sparkline.test.tsx
  - Sparkline.tsx
  - Treemap.test.tsx
  - Treemap.tsx
- - Brush.tsx
  - CartesianGrid.tsx
  - Legend.tsx
  - Tooltip.tsx
  - XAxis.tsx
  - YAxis.tsx
- - Area.tsx
  - Bar.tsx
  - Funnel.tsx
  - Line.tsx
  - Pie.tsx
  - Radar.tsx
  - RadialBar.tsx
  - Scatter.tsx
- ChartContainer.test.tsx
- ChartContainer.tsx
- ChartContext.tsx
- index.ts
- test-setup.ts
- theme.ts
- utils.test.ts
- utils.ts
.editorconfig
.eslintignore
.gitignore
.npmrc
.prettierignore
.prettierrc
.releaserc
CHANGELOG.md
eslint.config.cjs
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
tsup.config.ts
vitest.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/rsuite/charts

Downloads the entire project code from GitHub to your computer.

cd charts

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i --save @rsuite/charts

Type this command into your terminal and run it.

npm i --save @rsuite/charts recharts

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Charts for React Suite

:bar_chart: A set of charts based on rsuite and [Recharts](https://recharts.org)

[![npm version](https://badge.fury.io/js/%40rsuite%2Fcharts.svg)](https://badge.fury.io/js/%40rsuite%2Fcharts)
[![Node.js CI](https://github.com/rsuite/charts/actions/workflows/node.js.yml/badge.svg)](https://github.com/rsuite/charts/actions/workflows/node.js.yml)
[![codecov](https://codecov.io/gh/rsuite/charts/branch/master/graph/badge.svg?token=boxBzGyjGx)](https://codecov.io/gh/rsuite/charts)
[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

> **v6** — Completely rewritten on top of [Recharts](https://recharts.org). No backward compatibility with v5.

## Install

```bash
npm i --save @rsuite/charts
```

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

```bash
npm i --save @rsuite/charts recharts
```

## Quick Start

```tsx
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:

```tsx
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