https://github.com/ant-design/ant-design-charts

A React Chart Library
https://github.com/ant-design/ant-design-charts

Last synced: 7 days ago
JSON representation

A React Chart Library

• Host: GitHub
• URL: https://github.com/ant-design/ant-design-charts
• Owner: ant-design
• License: mit
• Created: 2020-03-09T09:08:31.000Z (almost 5 years ago)
• Default Branch: v2
• Last Pushed: 2024-04-12T05:31:01.000Z (8 months ago)
• Last Synced: 2024-04-14T06:19:27.397Z (8 months ago)
• Language: JavaScript
• Homepage: https://ant-design-charts.antgroup.com/
• Size: 23.2 MB
• Stars: 1,796
• Watchers: 20
• Forks: 350
• Open Issues: 191
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.zh-CN.md
  • License: LICENSE

Awesome Lists containing this project

• stars - ant-design/ant-design-charts
• awesome-react - @ant-design/charts - A React chart library, based on G2Plot, G6, X6, L7.  (UI Components / Data Visualization)
• best-of-react - GitHub - 11% open · ⏱️ 06.05.2024): (Data Visualization)

README

        
# @ant-design/charts



A React chart library, based on [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [X6](https://github.com/antvis/X6), [L7](https://github.com/antvis/L7).

![npm](https://img.shields.io/npm/v/@ant-design/charts)

![npm](https://img.shields.io/npm/dm/@ant-design/charts)

[![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers)

[![npm License](https://img.shields.io/npm/l/@ant-design/charts.svg)](https://www.npmjs.com/package/@ant-design/charts)



  Website •

  Quick Start •

  Examples •

  FAQ •





## Case

### Statistical charts



## ✨ Features

- Easy to use

- TypeScript

- Pretty & Lightweight

- Responsive

- Storytelling

## 📦 Installation

```bash | pure

$ npm install @ant-design/charts

```

## 🔨 Usage

```tsx | pure

import React from 'react';

import { Line } from '@ant-design/charts';

const Page: React.FC = () => {

  const data = [

    { year: '1991', value: 3 },

    { year: '1992', value: 4 },

    { year: '1993', value: 3.5 },

    { year: '1994', value: 5 },

    { year: '1995', value: 4.9 },

    { year: '1996', value: 6 },

    { year: '1997', value: 7 },

    { year: '1998', value: 9 },

    { year: '1999', value: 13 },

  ];

  const props = {

    data,

    xField: 'year',

    yField: 'value',

  };

  return 

};

export default Page;

```

Preview



## Development

 Clone locally:

```bash

$ git clone [email protected]:ant-design/ant-design-charts.git

$ cd ant-design-charts

$ pnpm install

$ pnpm build:lib & pnpm start

```

## 🤝 How to Contribute

Your contributions are always welcome! Please Do have a look at the [issues](https://github.com/ant-design/ant-design-charts/issues) first.

## 📧 Contact us

DingTalk group number: `44788198 `.



## License

MIT