Quick Start

3 min read

Installation

Import by NPM

We provide Ant Design Charts npm package:

// Recommended usage
npm install @ant-design/charts --save

You can use import or require to start.

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

Related subpackages

Plots: @ant-design/plots
Maps: @ant-design/maps
Flowchart: @ant-design/flowchart
Relation Graphs: @ant-design/graphs

In addition to 'react' and 'react-dom', the flowchart also relies on 'antd', '@ant-design/icons' and 'lodash'. Ensure that it has been installed when using it. At the same time, remember to import the style file import "@ant - design/flowchart/dist/index.css";

"peerDependencies": {
    "@ant-design/icons": "^4.6.0",
    "antd": "^4.6.3",
    "lodash": "^4.17.20",
    "react": ">=16.8.4",
    "react-dom": ">=16.8.4"
  }

Import by CDN in browser

You can download the script locally or import it directly from online resources.

// Plots 
<script type="text/javascript" src="https://unpkg.com/@ant-design/[email protected]/dist/plots.min.js"></script>
// Flowchart 
<script type="text/javascript" src="https://unpkg.com/@ant-design/[email protected]/dist/flowchart.min.js"></script>
// Maps 
<script type="text/javascript" src="https://unpkg.com/@ant-design/[email protected]/dist/maps.min.js"></script>
// Graphs 
<script type="text/javascript" src="https://unpkg.com/@ant-design/[email protected]/dist/graphs.min.js"></script>

Because the @ant-design/ Charts page externals 'react' and 'react-dom', you need to do the same thing in your project when using this method. By using CDN, introduce 'react' and 'react-dom' before 'Charts.min.js'.

// webpack.config.js
externals: {
  react: 'React',
  'react-dom': 'ReactDOM',
}
// public/index.html
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
// According to the need to introduce
<script type="text/javascript" src="https://unpkg.com/@ant-design/[email protected]/dist/plots.min.js"></script>

Usage:

// Line chart, similar to other charts
const { Line } = window.charts;

<!-- Download to local import local scripts -->
<script src="./plots.min.js"></script>
<script>
  const { Line } = window.charts;
</script>

Quick to use

Once the Ant Design Charts page is introduced, we are ready to create our first chart, so let's start with a basic line chart example. Most demos use the parent container width, make sure the parent container width or manually set the chart width.

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,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;

Result：

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,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;