### Development Setup for ant-design-charts

Source: https://github.com/ant-design/ant-design-charts/blob/master/README.md

This section outlines the steps to clone the ant-design-charts repository locally, install its dependencies using pnpm, and build and start the development server. This is useful for developers who wish to contribute to the library or customize its behavior.

```bash
git clone git@github.com:ant-design/ant-design-charts.git
cd ant-design-charts
pnpm install
pnpm build:lib & pnpm start
```

--------------------------------

### Create a Basic Line Chart with Ant Design Charts

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/manual/getting-started.en.md

A simple example demonstrating how to create a basic line chart using Ant Design Charts in a React application. It requires the `@ant-design/plots` package and assumes a parent container with defined dimensions.

```javascript
import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const Demo = () => {
  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',
    style: {
      lineWidth: 2
    }
  };
  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);
```

--------------------------------

### Install Ant Design Charts via npm

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/manual/getting-started.en.md

Installs the Ant Design Charts npm package. After installation, you can import components using ES6 import or CommonJS require. This method requires Node.js and npm.

```bash
npm install @ant-design/charts --save
```

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

```json
"peerDependencies": {
    "react": ">=16.8.4",
    "react-dom": ">=16.8.4"
  }
```

--------------------------------

### Install @ant-design/charts using npm

Source: https://github.com/ant-design/ant-design-charts/blob/master/README.md

This command installs the @ant-design/charts library using npm, making it available for use in your React project. Ensure you have Node.js and npm installed.

```bash
npm install @ant-design/charts
```

--------------------------------

### Install @ant-design/plots using npm

Source: https://github.com/ant-design/ant-design-charts/blob/master/packages/plots/README.md

This command installs the @ant-design/plots library using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm install @ant-design/plots
```

--------------------------------

### Install Ant Design Charts

Source: https://context7.com/ant-design/ant-design-charts/llms.txt

Installs the core Ant Design Charts library or its specialized packages for statistical plots and graphs using npm.

```bash
npm install @ant-design/charts
# or
npm install @ant-design/plots @ant-design/graphs
```

--------------------------------

### FlowDirectionGraph Basic Usage Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/flow-direction-graph.en.md

Demonstrates the basic usage of the FlowDirectionGraph component. This example sets up the fundamental configuration for rendering a flow direction graph.

```typescript
import { FlowDirectionGraph } from '@ant-design/graphs';
import React from 'react';

const DefaultFlowDirectionGraph = () => {
  const data = {
    nodes: [
      { id: 'node-1', label: 'Node 1' },
      { id: 'node-2', label: 'Node 2' },
    ],
    edges: [
      { source: 'node-1', target: 'node-2', value: 10 },
    ],
  };

  return <FlowDirectionGraph data={data} />; 
};

export default DefaultFlowDirectionGraph;
```

--------------------------------

### OrganizationChart Basic Usage Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/organization-chart.en.md

Demonstrates the basic implementation of the OrganizationChart component. It requires a data prop to render the organizational structure.

```typescript
import { OrganizationChart } from '@ant-design/graphs';

const App = () => {
  const data = {
    id: '0',
    label: 'CEO',
    children: [
      {
        id: '1',
        label: 'CTO',
        children: [
          {
            id: '2',
            label: 'Lead Engineer',
          },
        ],
      },
      {
        id: '3',
        label: 'CFO',
      },
    ],
  };

  return <OrganizationChart data={data} />; 
};
```

--------------------------------

### Graph Data Structure Example (JavaScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs-common/tree-data.en.md

Provides an example of the Graph data format, consisting of 'nodes' and 'edges'. This format is used for network visualizations, and the 'children' field in nodes is necessary for expand-collapse behavior.

```javascript
const graphData = {
  nodes: [
    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
    { id: '3', data: { label: 'Node 3' } },
    { id: '4', data: { label: 'Node 4' } },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};
```

--------------------------------

### Discretizing Scale (Quantile) Example in Ant Design Charts

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/scale/overview.en.md

Shows how to use a discretizing scale, specifically the quantile scale, for the color channel in Ant Design Charts. This example requires React and '@ant-design/plots'. It processes JSON data, discretizes the 'salary' field into color ranges, and visualizes it.

```javascript
import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const Demo = () => {

  const config ={
    "style": {
      "inset": 2,
      "stroke": "#000"
    },
    "colorField": "salary",
    "xField": (_, i) => ((i / 5) | 0) + 1,
    "yField": (_, i) => (i % 5) + 1,
    "scale": {
      "color": {
        "type": "quantile",
        "range": ['#eee', 'pink', 'red']
      }
    },
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json",
      "transform": [{ type: 'map', callback: (d) => ({ salary: d }) }]
    }
  };

  return <Column {...config} />; 
};

createRoot(document.getElementById('container')).render(<Demo />);
```

--------------------------------

### Compact Mode Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/dendrogram.en.md

Illustrates enabling compact mode for the dendrogram, which likely optimizes space usage for dense hierarchical structures.

```typescript
import { Dendrogram } from '@ant-design/graphs';

const config = {
  data,
  compact: true,
  // other configurations...
};

<Dendrogram {...config} />;
```

--------------------------------

### Basic Pie Chart Usage in JavaScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/plots/pie.en.md

Demonstrates the fundamental implementation of a Pie Chart using JavaScript. This example sets up the basic data and configuration for rendering a pie chart.

```javascript
import { Pie } from '@ant-design/charts';

const data = [
  {
    type: '分类一',
    value: 27,
  },
  {
    type: '分类二',
    value: 25,
  },
  {
    type: '分类三',
    value: 18,
  },
  {
    type: '分类四',
    value: 15,
  },
  {
    type: '分类五',
    value: 10,
  },
  {
    type: '其他',
    value: 5,
  },
];

const config = {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  label: {
    type: 'inner',
    offset: '-50%',
    content: '{value}',
    style: {
      fill: '#fff',
      fontSize: 12,
      textAlign: 'center',
    },
  },
  interactions: [
    {
      type: 'element-selected',
    },
    {
      type: 'element-active',
    },
  ],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'initial',
        overflow: 'hidden',
      },
      customHtml: (container, view, datum, data) =>
        legendData
          .map((d) => d.value)
          .reduce((a, b) => a + b, 0),
    },
  },
};

new Pie('container', config);
```

--------------------------------

### Basic Usage Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/dendrogram.en.md

Demonstrates the basic usage of the Dendrogram component, likely involving providing hierarchical data to render a default dendrogram visualization.

```typescript
import { Dendrogram } from '@ant-design/graphs';

// Assuming 'data' is your hierarchical dataset
const config = {
  data,
  // other configurations...
};

<Dendrogram {...config} />;
```

--------------------------------

### Bar Chart Basic Usage - JavaScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/plots/bar.en.md

Demonstrates the fundamental implementation of a bar chart. This example requires no external dependencies beyond the Ant Design Charts library.

```javascript
import { Bar } from '@ant-design/charts';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 2 },
  { year: '1994', value: 4 },
  { year: '1995', value: 5 },
  { year: '1996', value: 4 },
  { year: '1997', value: 5 },
  { year: '1998', value: 3 },
  { year: '1999', value: 2 },
];

const config = {
  data,
  xField: 'year',
  yField: 'value',
  label: {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  tooltip: {
    visible: true,
  },
  // Additional properties can be added here
};

new Bar('bar-basic', config);
```

--------------------------------

### Expand/Collapse Nodes Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/dendrogram.en.md

Demonstrates how to control the expansion and collapse state of nodes in the dendrogram, allowing users to interactively explore the hierarchy.

```typescript
import { Dendrogram } from '@ant-design/graphs';

const config = {
  data,
  defaultExpandLevel: 1, // Expand only the first level by default
  // other configurations...
};

<Dendrogram {...config} />;
```

--------------------------------

### NetworkGraph Basic Usage Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/network-graph.en.md

Demonstrates the basic usage of the NetworkGraph component. It requires data to render the nodes and their connections. The component is suitable for visualizing relationships in complex network structures.

```typescript
import React from 'react';
import { NetworkGraph } from '@ant-design/graphs';

const BasicNetworkGraph = () => {
  const data = {
    nodes: [
      { id: 'node-1', label: 'Node 1' },
      { id: 'node-2', label: 'Node 2' },
    ],
    edges: [
      { source: 'node-1', target: 'node-2', label: 'connects' },
    ],
  };

  const settings = {
    data: data,
    layout: {
      type: 'force',
    },
  };

  return <NetworkGraph {...settings} />;
};

export default BasicNetworkGraph;
```

--------------------------------

### Tree Data Structure Definition and Example (TypeScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs-common/tree-data.en.md

Defines the TypeScript type for Tree data and provides an example of its structure. This format is recommended for hierarchical data visualization.

```typescript
type TreeData = {
  id: string;
  children?: TreeData[];
  [key: string]: unknown;
};

const data = {
  id: 'root',
  children: [
    {
      id: 'Child 1',
      value: 10,
      children: [
        { id: 'Sub 1-1', value: 5 },
        { id: 'Sub 1-2', value: 5 },
      ],
    },
    {
      id: 'Child 2',
      value: 20,
      children: [
        { id: 'Sub 2-1', value: 10 },
        { id: 'Sub 2-2', value: 10 },
      ],
    },
  ],
};
```

--------------------------------

### FlowDirectionGraph Customization Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/flow-direction-graph.en.md

Demonstrates how to customize the appearance and behavior of the FlowDirectionGraph component. This allows for tailoring the visualization to specific design requirements.

```typescript
import { FlowDirectionGraph } from '@ant-design/graphs';
import React from 'react';

const CustomFlowDirectionGraph = () => {
  const data = {
    nodes: [
      { id: 'node-1', label: 'Start', style: { fill: '#5B8FF9' } },
      { id: 'node-2', label: 'Process', style: { fill: '#5AD8A6' } },
      { id: 'node-3', label: 'End', style: { fill: '#F6BD16' } },
    ],
    edges: [
      { source: 'node-1', target: 'node-2', label: 'Flow A', style: { stroke: '#5B8FF9' } },
      { source: 'node-2', target: 'node-3', label: 'Flow B', style: { stroke: '#5AD8A6' } },
    ],
  };

  const layout = {
    type: 'dagre',
    rankdir: 'LR',
  };

  const nodeStyle = (
    node: any
  ) => {
    return {
      ...node.style,
      stroke: '#000',
      lineWidth: 1,
    };
  };

  return <FlowDirectionGraph data={data} layout={layout} nodeStyle={nodeStyle} />; 
};

export default CustomFlowDirectionGraph;
```

--------------------------------

### Arrangement Direction Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/dendrogram.en.md

Shows how to configure the arrangement direction of the dendrogram nodes, allowing for horizontal, vertical, or radial layouts.

```typescript
import { Dendrogram } from '@ant-design/graphs';

const config = {
  data,
  direction: 'vertical', // or 'horizontal', 'radial'
  // other configurations...
};

<Dendrogram {...config} />;
```

--------------------------------

### Create a Pie Chart with Ant Design Charts

Source: https://context7.com/ant-design/ant-design-charts/llms.txt

Provides an example of creating a pie or donut chart using the Pie component from @ant-design/plots. Configuration includes data, fields for angle and color, labels, and legend positioning.

```tsx
import { Pie } from '@ant-design/charts';
import React from 'react';

const PieChartDemo = () => {
  const config = {
    data: [
      { type: 'Category 1', value: 27 },
      { type: 'Category 2', value: 25 },
      { type: 'Category 3', value: 18 },
      { type: 'Category 4', value: 15 },
      { type: 'Category 5', value: 10 },
      { type: 'Other', value: 5 },
    ],
    angleField: 'value',
    colorField: 'type',
    label: {
      text: 'value',
      style: {
        fontWeight: 'bold',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  };

  return <Pie {...config} />;
};

```

--------------------------------

### Configure View Level Scale (JavaScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/scale/overview.en.md

Shows how to configure scales at the view level in Ant Design Charts using JavaScript. This example sets padding for the x-axis and specifies the type, domain, and range for the y-axis scale.

```javascript
({ 
  type: 'view',
  scale: {
    x: { padding: 0.5 },
    y: {
      type: 'log', 
      domain: [10, 100], 
      range: [0, 1] 
    },
  },
});
```

--------------------------------

### FlowDirectionGraph Highlight Element and Its Chain Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/flow-direction-graph.en.md

Shows how to configure the FlowDirectionGraph to highlight an element and its entire connected chain upon interaction. This is useful for tracing data flow paths.

```typescript
import { FlowDirectionGraph } from '@ant-design/graphs';
import React from 'react';

const HoverActivateChainGraph = () => {
  const data = {
    nodes: [
      { id: 'node-1', label: 'Node 1' },
      { id: 'node-2', label: 'Node 2' },
      { id: 'node-3', label: 'Node 3' },
      { id: 'node-4', label: 'Node 4' },
    ],
    edges: [
      { source: 'node-1', target: 'node-2', value: 10 },
      { source: 'node-2', target: 'node-3', value: 5 },
      { source: 'node-3', target: 'node-4', value: 2 },
    ],
  };

  const layout = {
    type: 'dagre',
  };

  return <FlowDirectionGraph data={data} layout={layout} />; 
};

export default HoverActivateChainGraph;
```

--------------------------------

### Basic Funnel Chart Usage

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/plots/funnel.en.md

Demonstrates the basic implementation of a funnel chart. This example requires the Ant Design Charts library and typically involves providing data and specifying xField and yField for stage values.

```javascript
import { Funnel } from '@ant-design/charts';

const data = [
  { stage: 'Exposure', value: 1000 },
  { stage: 'Click', value: 800 },
  { stage: 'Inquiry', value: 500 },
  { stage: 'Order', value: 200 },
];

const config = {
  data,
  xField: 'value',
  yField: 'stage',
};

new Funnel('#container', config);
```

--------------------------------

### Adjust Layout Parameters for Fishbone Diagram - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/fishbone.en.md

Shows how to customize the layout of a Fishbone diagram. This example demonstrates adjusting parameters like direction, gaps, and rib spacing for better visualization.

```typescript
import { Fishbone } from '@ant-design/graphs';

const App = () => {
  const data = [
    {
      id: '0',
      label: 'Problem',
      children: [
        {
          id: '1',
          label: 'Category 1',
          children: [
            {
              id: '1-1',
              label: 'Sub-category 1.1',
            },
          ],
        },
      ],
    },
  ];

  const config = {
    data,
    labelField: 'label',
    layout: {
      type: 'fishbone',
      direction: 'LR',
      vGap: 50,
      hGap: 100,
      getRibSep: (node) => 80,
    },
  };
  return <Fishbone {...config} />;
};

export default App;
```

--------------------------------

### Basic Legend Configuration (JavaScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/legend.en.md

This example illustrates a basic configuration for legends in Ant Design Charts, where specific visual channels like 'color' and 'size' are included in the legend configuration, allowing for further customization.

```javascript
({
  legend: {
    color: {},
    size: {},
  },
});
```

--------------------------------

### Sample Time-Series Data Array

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/scale/threshold.zh.md

This snippet shows a typical data format for time-series charts. Each object contains a 'date' property (ISO 8601 format) and a 'value' property. This structure is widely compatible with charting libraries.

```javascript
[
  { date: '2012-06-07T00:00:00.000Z', value: 53.9 },
  { date: '2012-06-08T00:00:00.000Z', value: 54.4 },
  { date: '2012-06-09T00:00:00.000Z', value: 55 },
  { date: '2012-06-10T00:00:00.000Z', value: 60 },
  { date: '2012-06-11T00:00:00.000Z', value: 57.2 },
  { date: '2012-06-12T00:00:00.000Z', value: 55.1 },
  { date: '2012-06-13T00:00:00.000Z', value: 53.3 },
  { date: '2012-06-14T00:00:00.000Z', value: 53.4 },
  { date: '2012-06-15T00:00:00.000Z', value: 54.6 },
  { date: '2012-06-16T00:00:00.000Z', value: 57 },
  { date: '2012-06-17T00:00:00.000Z', value: 55.6 },
  { date: '2012-06-18T00:00:00.000Z', value: 52.5 },
  { date: '2012-06-19T00:00:00.000Z', value: 53.9 },
  { date: '2012-06-20T00:00:00.000Z', value: 55.3 },
  { date: '2012-06-21T00:00:00.000Z', value: 53.3 },
  { date: '2012-06-22T00:00:00.000Z', value: 54.1 },
  { date: '2012-06-23T00:00:00.000Z', value: 55.2 },
  { date: '2012-06-24T00:00:00.000Z', value: 55.8 },
  { date: '2012-06-25T00:00:00.000Z', value: 56.8 },
  { date: '2012-06-26T00:00:00.000Z', value: 57.5 },
  { date: '2012-06-27T00:00:00.000Z', value: 57.7 },
  { date: '2012-06-28T00:00:00.000Z', value: 56.6 },
  { date: '2012-06-29T00:00:00.000Z', value: 56.4 },
  { date: '2012-06-30T00:00:00.000Z', value: 58.4 },
  { date: '2012-07-01T00:00:00.000Z', value: 58.8 },
  { date: '2012-07-02T00:00:00.000Z', value: 56.4 },
  { date: '2012-07-03T00:00:00.000Z', value: 56.5 },
  { date: '2012-07-04T00:00:00.000Z', value: 55.8 },
  { date: '2012-07-05T00:00:00.000Z', value: 54.8 },
  { date: '2012-07-06T00:00:00.000Z', value: 54.9 },
  { date: '2012-07-07T00:00:00.000Z', value: 54.7 },
  { date: '2012-07-08T00:00:00.000Z', value: 52.8 },
  { date: '2012-07-09T00:00:00.000Z', value: 53.7 },
  { date: '2012-07-10T00:00:00.000Z', value: 53.1 },
  { date: '2012-07-11T00:00:00.000Z', value: 52.7 },
  { date: '2012-07-12T00:00:00.000Z', value: 52 },
  { date: '2012-07-13T00:00:00.000Z', value: 53.4 },
  { date: '2012-07-14T00:00:00.000Z', value: 54 },
  { date: '2012-07-15T00:00:00.000Z', value: 54 },
  { date: '2012-07-16T00:00:00.000Z', value: 54.5 },
  { date: '2012-07-17T00:00:00.000Z', value: 56.7 },
  { date: '2012-07-18T00:00:00.000Z', value: 57.5 },
  { date: '2012-07-19T00:00:00.000Z', value: 57.1 },
  { date: '2012-07-20T00:00:00.000Z', value: 58.1 },
  { date: '2012-07-21T00:00:00.000Z', value: 57.6 },
  { date: '2012-07-22T00:00:00.000Z', value: 56 },
  { date: '2012-07-23T00:00:00.000Z', value: 56.6 },
  { date: '2012-07-24T00:00:00.000Z', value: 57.8 },
  { date: '2012-07-25T00:00:00.000Z', value: 57.5 },
  { date: '2012-07-26T00:00:00.000Z', value: 56.4 },
  { date: '2012-07-27T00:00:00.000Z', value: 55.3 },
  { date: '2012-07-28T00:00:00.000Z', value: 55 },
  { date: '2012-07-29T00:00:00.000Z', value: 55.6 },
  { date: '2012-07-30T00:00:00.000Z', value: 55.6 },
  { date: '2012-07-31T00:00:00.000Z', value: 55.9 },
  { date: '2012-08-01T00:00:00.000Z', value: 55.4 },
  { date: '2012-08-02T00:00:00.000Z', value: 54.4 },
  { date: '2012-08-03T00:00:00.000Z', value: 53.7 },
  { date: '2012-08-04T00:00:00.000Z', value: 54.1 },
  { date: '2012-08-05T00:00:00.000Z', value: 57.8 },
  { date: '2012-08-06T00:00:00.000Z', value: 58.2 },
  { date: '2012-08-07T00:00:00.000Z', value: 58 },
  { date: '2012-08-08T00:00:00.000Z', value: 57 },
  { date: '2012-08-09T00:00:00.000Z', value: 55 },
  { date: '2012-08-10T00:00:00.000Z', value: 54.8 },
  { date: '2012-08-11T00:00:00.000Z', value: 53 },
  { date: '2012-08-12T00:00:00.000Z', value: 52.5 },
  { date: '2012-08-13T00:00:00.000Z', value: 53.3 },
  { date: '2012-08-14T00:00:00.000Z', value: 53.9 },
  { date: '2012-08-15T00:00:00.000Z', value: 56.2 },
  { date: '2012-08-16T00:00:00.000Z', value: 57.1 },
  { date: '2012-08-17T00:00:00.000Z', value: 55.3 },
  { date: '2012-08-18T00:00:00.000Z', value: 56.2 },
  { date: '2012-08-19T00:00:00.000Z', value: 54.3 },
  { date: '2012-08-20T00:00:00.000Z', value: 53.1 },
  { date: '2012-08-21T00:00:00.000Z', value: 53.4 },
  { date: '2012-08-22T00:00:00.000Z', value: 54.5 },
  { date: '2012-08-23T00:00:00.000Z', value: 55.7 },
  { date: '2012-08-24T00:00:00.000Z', value: 54.8 },
  { date: '2012-08-25T00:00:00.000Z', value: 53.8 },
  { date: '2012-08-26T00:00:00.000Z', value: 56.5 },
  { date: '2012-08-27T00:00:00.000Z', value: 58.3 },
  { date: '2012-08-28T00:00:00.000Z', value: 58.7 },
  { date: '2012-08-29T00:00:00.000Z', value: 57.5 },
  { date: '2012-08-30T00:00:00.000Z', value: 55.9 }
]
```

--------------------------------

### Import Ant Design Charts in Browser

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/manual/getting-started.en.md

Demonstrates how to include Ant Design Charts in a web page using browser script tags. This method requires including React and ReactDOM CDNs before the charts script, and configuring externals if using a bundler like webpack.

```html
<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts.min.js"></script>
```

```javascript
// webpack.config.js
externals: {
  react: 'React',
  'react-dom': 'ReactDOM',
  'lodash': 'lodash',
}
```

```html
// public/index.html
<script crossorigin src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
```

```html
// Import on demand
<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts.min.js"></script>
```

```javascript
// Usage
const { Line } = window.Charts;
```

--------------------------------

### Enable and Configure Scrollbar (JavaScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/scrollbar.en.md

A JavaScript code snippet demonstrating how to enable and configure a scrollbar for a chart. This example shows basic chart setup with data fetching and scrollbar activation.

```javascript
{
    autoFit: true,
    height: 300,
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
    },
    xField: 'letter',
    yField: 'frequency',
    y1Field: 0.000001,
    scale: { y: { type: 'log' } },
    scrollbar: { x: true }
}
```

--------------------------------

### Configure Graph Behaviors with Static or Dynamic Arrays

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/overview.en.md

Demonstrates how to configure graph behaviors using either a static array of interaction types or a dynamic function that modifies existing behaviors. This allows for customization of user interactions like zooming and dragging.

```jsx
import { MindMap } from '@ant-design/graphs';

export default () => {
  // Static array example
  const behaviors = ['zoom-canvas', { type: 'drag-canvas', direction: 'x' }];

  // Dynamic function example
  const dynamicBehaviors = (existingBehaviors) => {
    // console.log(existingBehaviors); 👉 [{ key: 'zoom-canvas', type: 'zoom-canvas' }, { key: 'drag-canvas', type: 'drag-canvas' }]
    return [...existingBehaviors, { type: 'click-select' /* properties */ }];
  };

  return <MindMap behaviors={behaviors /** or dynamicBehaviors **/} />;
};
```

--------------------------------

### Configure Plugins with Static or Dynamic Arrays in Ant Design Graphs

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/overview.en.md

Demonstrates how to configure plugins for Ant Design Graphs using either a static array of plugin configurations or a dynamic function that modifies an existing list of plugins. This is useful for managing canvas rendering logic and adding components.

```jsx
import { MindMap } from '@ant-design/graphs';

export default () => {
  // Static array approach
  const plugins = [{ type: 'minimap' /* properties */ }];

  // Dynamic function approach
  const dynamicTransforms = (existingPlugins) => {
    // console.log(existingPlugins); 👉 []
    return [...existingPlugins, { type: 'minimap' /* properties */ }];
  };

  return <MindMap plugins={plugins /** or dynamicPlugins **/} />;
};
```

--------------------------------

### Decision-type Fishbone Diagram Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/fishbone.en.md

Illustrates a decision-type Fishbone diagram. This example is useful for analyzing decision-making processes and their potential outcomes.

```typescript
import { Fishbone } from '@ant-design/graphs';

const App = () => {
  const data = [
    {
      id: '0',
      label: 'Decision',
      children: [
        {
          id: '1',
          label: 'Option A',
          children: [
            {
              id: '1-1',
              label: 'Outcome 1',
            },
          ],
        },
        {
          id: '2',
          label: 'Option B',
        },
      ],
    },
  ];

  const config = {
    data,
    labelField: 'label',
    type: 'decision',
  };
  return <Fishbone {...config} />;
};

export default App;
```

--------------------------------

### Cause-type Fishbone Diagram Example - TypeScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/fishbone.en.md

Demonstrates a basic cause-type Fishbone diagram. This example showcases how to render a standard Fishbone chart using provided data.

```typescript
import { Fishbone } from '@ant-design/graphs';

const App = () => {
  const data = [
    {
      id: '0',
      label: 'Problem',
      children: [
        {
          id: '1',
          label: 'Category 1',
          children: [
            {
              id: '1-1',
              label: 'Sub-category 1.1',
              children: [
                {
                  id: '1-1-1',
                  label: 'Cause 1.1.1',
                },
              ],
            },
          ],
        },
        {
          id: '2',
          label: 'Category 2',
        },
      ],
    },
  ];

  const config = {
    data,
    labelField: 'label',
    type: 'cause',
  };
  return <Fishbone {...config} />;
};

export default App;
```

--------------------------------

### Full Chart Title Configuration with Styling - JavaScript

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/title.en.md

Provides a comprehensive example of configuring a chart title, including text content, alignment, size, spacing, and detailed styling for both the main title and subtitle. This example uses the Column chart type from Ant Design Plots.

```javascript
import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const Demo = () => {
  const config = {
    marginTop: 40,
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
    },
    xField: 'letter',
    yField: 'frequency',
    title: {
      align: 'center', // Chart title alignment
      size: 28, // Chart title height, default is 36
      spacing: 4, // Spacing between main title and subtitle
      // Title
      title: 'I am a title', // Chart title text
      titleFontSize: 28, // Chart main title font size
      titleFontFamily: 'sans-serif', // Chart main title font family
      titleFontWeight: 600, // Chart main title font weight
      titleFill: '#fff', // Chart main title text color
      titleFillOpacity: 1, // Chart main title text opacity
      titleStroke: '#000', // Chart main title text stroke color
      titleLineWidth: 2, // Chart main title text stroke width
      titleStrokeOpacity: 1, // Chart main title text stroke opacity
      // Subtitle
      subtitle: 'I am a subtitle', // Chart subtitle text
      subtitleFontSize: 16, // Chart subtitle font size
      subtitleFontFamily: 'Arial', // Chart subtitle font family
      subtitleFontWeight: 300, // Chart subtitle font weight
      subtitleFill: '#2989FF', // Chart subtitle text color
      subtitleFillOpacity: 1, // Chart subtitle text opacity
      subtitleStroke: '#000', // Chart subtitle text stroke color
      subtitleLineWidth: 1, // Chart subtitle text stroke width
      subtitleStrokeOpacity: 0.5, // Chart subtitle text stroke opacity
    }
  };
  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);
```

--------------------------------

### Importing from ES for Bundle Size Reduction in Ant Design Charts

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/manual/faq.en.md

Demonstrates how to import specific chart components from the ES module directory to reduce the overall bundle size. This approach is useful for optimizing application performance by only including necessary code.

```typescript
import Line from '@ant-design/plots/es/components/line';
```

--------------------------------

### Ordinal Scale Example in Ant Design Charts

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/scale/overview.en.md

Illustrates the use of an ordinal scale for the color channel in a bar chart with Ant Design Charts. This example utilizes React and '@ant-design/plots'. It takes an array of genre-sold data and maps it to a bar chart, with discrete genres determining the color.

```javascript
import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const Demo = () => {

  const config ={
    "scale": {
      "color": {
        "range": ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#c564be']
      }
    },
    "colorField": "genre",
    "yField": "sold",
    "xField": "genre",
    "data": [     { genre: 'Sports', sold: 275 },     { genre: 'Strategy', sold: 115 },     { genre: 'Action', sold: 120 },     { genre: 'Shooter', sold: 350 },     { genre: 'Other', sold: 150 },   ]
  };

  return <Column {...config} />; 
};

createRoot(document.getElementById('container')).render(<Demo />);
```

--------------------------------

### OrganizationChart Custom Nodes Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/organization-chart.en.md

Illustrates how to customize the appearance of nodes in the OrganizationChart. This allows for more flexible and informative visualizations.

```typescript
import { OrganizationChart } from '@ant-design/graphs';

const App = () => {
  const data = {
    id: '0',
    label: 'CEO',
    children: [
      {
        id: '1',
        label: 'CTO',
        style: {
          fill: '#f00',
          stroke: '#000',
        },
      },
    ],
  };

  const labelField = (node) => {
    return `${node.label} (${node.id})`;
  };

  return <OrganizationChart data={data} labelField={labelField} />; 
};
```

--------------------------------

### Using babel-plugin-import for Ant Design Charts Modules

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/manual/faq.en.md

Provides instructions and configuration for using `babel-plugin-import` to manage imports from Ant Design Charts, Graphs, and Maps. This plugin helps in automatically importing modules from the 'es' directory, aiding in code splitting and bundle size reduction.

```bash
npm install babel-plugin-import -D
```

```json
{
    "plugins": [
      ["import", {
        "libraryName": "@ant-design/plots",
        "libraryDirectory": "es"
      }],
      ["import", {
        "libraryName": "@ant-design/graphs",
        "libraryDirectory": "es"
      }],
      ["import", {
        "libraryName": "@ant-design/maps",
        "libraryDirectory": "es"
      }]
    ]
  }
```

--------------------------------

### OrganizationChart Node Layout Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/organization-chart.en.md

Shows how to configure the node layout direction for the OrganizationChart. The 'direction' property can be set to 'vertical' or 'horizontal'.

```typescript
import { OrganizationChart } from '@ant-design/graphs';

const App = () => {
  const data = {
    id: '0',
    label: 'CEO',
    children: [
      {
        id: '1',
        label: 'CTO',
      },
      {
        id: '3',
        label: 'CFO',
      },
    ],
  };

  return <OrganizationChart data={data} direction="horizontal" />; 
};
```

--------------------------------

### Create a Line Chart with Ant Design Charts

Source: https://context7.com/ant-design/ant-design-charts/llms.txt

Demonstrates how to create a responsive and interactive line chart using the Line component from @ant-design/plots. It configures data, fields, points, and interactions for visualizing trends.

```tsx
import { Line } from '@ant-design/charts';
import React from 'react';

const LineChartDemo = () => {
  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: {
      shapeField: 'square',
      sizeField: 4,
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
  };

  return <Line {...config} />;
};

```

--------------------------------

### Hide Multiple Legends (JavaScript)

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/options/plots/legend.en.md

This example demonstrates how to hide multiple legends simultaneously by passing `false` as the value for the top-level `legend` configuration property.

```javascript
({
  legend: false,
})
```

--------------------------------

### OrganizationChart Collapse/Expand Example

Source: https://github.com/ant-design/ant-design-charts/blob/master/site/docs/components/graphs/organization-chart.en.md

Demonstrates the functionality to collapse and expand child nodes in the OrganizationChart. This feature helps manage the complexity of large organizational structures.

```typescript
import { OrganizationChart } from '@ant-design/graphs';

const App = () => {
  const data = {
    id: '0',
    label: 'CEO',
    children: [
      {
        id: '1',
        label: 'CTO',
        children: [
          {
            id: '2',
            label: 'Lead Engineer',
          },
        ],
      },
    ],
  };

  return <OrganizationChart data={data} zoomable={true} />; 
};
```