@ant-design/charts

A React chart library, based on G2Plot

Features

- Easy to use
- TypeScript
- Pretty & Lightweight
- Responsive
- Storytelling

Installation

$3

``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 config = {
data,
width: 800,
height: 400,
autoFit: false,
xField: 'year',
yField: 'value',
point: {
size: 5,
shape: 'diamond',
},
label: {
style: {
fill: '#aaa',
},
},
};

let chart;

// 导出图片
const downloadImage = () => {
chart?.downloadImage();
};

// 获取图表 base64 数据
const toDataURL = () => {
console.log(chart?.toDataURL());
};

return (



);
};
export default Page;
`

result：

Gallery

gallery

Document

$3

See chart API for details.

Common props:

| Property | Description | Type | defaultValue |
| --- | --- | --- | --- |
| onReady | chart loaded callback | (chart)=> void | - |
| onEvent | chart events | (chart, event)=> void | - |
| loading | loading status | boolean | - |
| loadingTemplate | loading template | React.ReactElement | - |
| errorTemplate | custom error template | (e: Error) => React.ReactNode | - |
| className | container class | string | - |
| style | container style | React.CSSProperties | - |
| chartRef | chart ref | (React.MutableRefObject<Chart>)=> void | - |

More usage

$3

$3

They are DingTalk groups.

$3

Charts is available under the License MIT.

develop

$3

- install nodejs

$3

`bash | pure


安装依赖

$ npm install

开发 library

$ npm run dev
``