A React chart library based on G2Plot, G6, X6, L7
@ant-design/charts
A React chart library, based on G2Plot, G6, X6, L7.
✨ Features
- Easy to use
- TypeScript
- Pretty & Lightweight
- Responsive
- Storytelling
? Installation
$ npm install @ant-design/charts
? Usage
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;
// Export Image
const downloadImage = () => {
chart?.downloadImage();
};
// Get chart base64 string
const toDataURL = () => {
console.log(chart?.toDataURL());
};
return (
<div>
<button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
Export Image
</button>
<button type="button" onClick={toDataURL}>
Get base64
</button>
<Line {...config} onReady={(chartInstance) => (chart = chartInstance)} />
</div>
);
};
export default Page;
Preview
? Document & API
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 | - |