Ant Design Charts

A React Chart Library

ChartingReact
ant-design/ant-design-chartscharts.ant.design@ant-design/charts

README

@ant-design/charts



A React chart library, based on G2Plot, G6, X6, L7Plot.

build
npm
npm GitHub stars npm License

Website • Quick Start • Gallery • FAQ • Blog


Case


Statistical charts


Flowchart


Maps


Relation Graphs


✨ Features


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

📦 Installation


  1. ``` sh | pure
  2. $ npm install @ant-design/charts
  3. ```

🔨 Usage


  1. ```tsx | pure
  2. import React from 'react';
  3. import { Line } from '@ant-design/charts';

  5. const Page: React.FC = () => {
  6.   const data = [
  7.     { year: '1991', value: 3 },
  8.     { year: '1992', value: 4 },
  9.     { year: '1993', value: 3.5 },
  10.     { year: '1994', value: 5 },
  11.     { year: '1995', value: 4.9 },
  12.     { year: '1996', value: 6 },
  13.     { year: '1997', value: 7 },
  14.     { year: '1998', value: 9 },
  15.     { year: '1999', value: 13 },
  16.   ];

  18.   const config = {
  19.     data,
  20.     width: 800,
  21.     height: 400,
  22.     autoFit: false,
  23.     xField: 'year',
  24.     yField: 'value',
  25.     point: {
  26.       size: 5,
  27.       shape: 'diamond',
  28.     },
  29.     label: {
  30.       style: {
  31.         fill: '#aaa',
  32.       },
  33.     },
  34.   };

  36.   let chart;

  38.   // Export Image
  39.   const downloadImage = () => {
  40.     chart?.downloadImage();
  41.   };

  43.   // Get chart base64 string
  44.   const toDataURL = () => {
  45.     console.log(chart?.toDataURL());
  46.   };

  48.   return (
  49.     <div>
  50.       <button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
  51.         Export Image
  52.       </button>
  53.       <button type="button" onClick={toDataURL}>
  54.         Get base64
  55.       </button>
  56.       <Line {...config} onReady={(chartInstance) => (chart = chartInstance)} />
  57.     </div>
  58.   );
  59. };
  60. export default Page;
  61. ```

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

🤝 How to Contribute


Your contributions are always welcome! Please Do have a look at the issues first.

📧 Contact us


DingTalk group number: 44788198 .


License


MIT