Ant Design Charts

Ant Design Charts is a React-based charting library developed by the AntV team. It is designed to provide high-quality, research-backed chart configurations out of the box, requiring minimal configuration for standard use cases while remaining highly customizable for specific business needs.

Key characteristics:

• High-quality defaults: Charts are pre-configured for optimal developer and user experience.
• Easy configuration: Allows for fine-grained adjustments to chart details.
• Focus on discovery: Visual and interactive elements are optimized for displaying and discovering information.

The FlowGraph component is used to visually represent the steps and decision points of a process or system. It is suitable for:

• Displaying linear processes or steps.
• Planning and tracking project progress, clarifying task order and dependencies.
• Building decision trees to show different decision points and paths.

Each node represents a specific step or decision point, and the edges indicate the sequence and relationships between steps.

import { FlowGraph } from '@ant-design/graphs';

The Liquid chart (also known as ripple or wave chart) visualizes data changes or progress by simulating the diffusion effect of water waves. It uses dynamic, multi-layered translucent waves to represent data 'intensity', 'progress', or 'impact range'.

Common use cases include:

• Representing progress (e.g., percentage completion).
• Visualizing data intensity through wave radius or color.
• Creating engaging, narrative-driven data visualizations with animated waves.

The FlowDirectionGraph component is used to intuitively display flow paths and changes in magnitude. It is ideal for complex information environments where clear logical relationships or decision support are required, helping to visualize data flow and relationships to improve understanding and decision-making efficiency.

import { FlowDirectionGraph } from '@ant-design/graphs';

A Funnel Chart is used to show conversion efficiency across stages in a business process (e.g., "Exposure → Click → Inquiry → Order"). The chart's width at each stage is proportional to its value, creating a narrow-down shape that intuitively shows loss and retention at each step.

Common use cases include:

• Basic Funnel: Showing a single process flow.
• Pyramid Shape: Using the shapeField to change the visual structure.
• Transposed Layout: Using isTransposed to change the orientation.
• Mirror Comparison: Using compareField to compare two different funnels side-by-side.

The Gauge chart is used to create dashboard-style visualizations that represent data progress, proportions, or comparisons.

Typical use cases include:

• Business Metrics: Sales achievement rates, user growth progress.
• System Monitoring: CPU/Memory usage, disk capacity warnings.
• Device Gauges: Speedometers, thermometer simulations.

A Venn chart is used to represent relationships between sets (intersections, unions, etc.) using overlapping shapes. It is useful in mathematics, logic, statistics, and computer science.

To use a Venn chart, you must provide a data array that includes a sets field to define the set relationships.

For more complex examples, visit the Venn chart examples page.