### Install and Run feffery-antd-charts

Source: https://github.com/cnfeffery/feffery-antd-charts-docs/blob/main/README-en_US.md

Follow these steps to clone the repository, install dependencies, and run the application.

```bash
git clone https://github.com/CNFeffery/feffery-antd-charts-docs.git
cd feffery-antd-charts-docs
pip install -r requirements-dev.txt
pip install -r requirements.txt
python app.py
```

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

### Configure Common Chart Options

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Demonstrates common configuration options for styling, animation, and interactivity applicable to most charts. Requires data and field definitions.

```python
import feffery_antd_charts as fact

# Common styling options applicable to most charts
fact.AntdLine(
    data=[...],
    xField='date',
    yField='value',
    # Dimensions
    height=400,
    width=600,
    autoFit=True,
    # Animation configuration
    animation={
        'appear': {
            'animation': 'fade-in',
            'duration': 1000,
            'delay': 0,
        },
    },
    # Style configuration with CSS-like properties
    lineStyle={
        'stroke': '#5B8FF9',
        'lineWidth': 2,
        'lineDash': [4, 4],
        'opacity': 0.8,
    },
    # Point markers
    point={
        'size': 5,
        'shape': 'circle',
        'style': {
            'fill': 'white',
            'stroke': '#5B8FF9',
            'lineWidth': 2,
        },
    },
)
```

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

### Create AntdWordCloud

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a word cloud visualization. Ensure 'word' and 'weight' fields are correctly mapped.

```python
import feffery_antd_charts as fact
import random

words = ['Python', 'JavaScript', 'React', 'Dash', 'Data', 'Visualization',
         'Machine Learning', 'Analytics', 'Dashboard', 'Charts']

fact.AntdWordCloud(
    data=[
        {'word': word, 'value': random.randint(10, 100) ** 2}
        for word in words
    ],
    wordField='word',
    weightField='value',
)
```

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

### AntdLine - Basic Line Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdLine to create basic line charts for visualizing trends over time. Requires 'date' and 'y' fields for data.

```python
import feffery_antd_charts as fact

# Basic line chart
fact.AntdLine(
    data=[
        {'date': '2020-01', 'y': 50},
        {'date': '2020-02', 'y': 75},
        {'date': '2020-03', 'y': 60},
        {'date': '2020-04', 'y': 90},
        {'date': '2020-05', 'y': 85},
    ],
    xField='date',
    yField='y',
)
```

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

### Create Tiny Charts

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use TinyLine, TinyArea, and TinyColumn for compact sparkline-style charts suitable for dashboards or tables. Requires random data generation.

```python
import feffery_antd_charts as fact
import random

# Tiny line chart
fact.AntdTinyLine(
    data=[random.randint(50, 100) for _ in range(20)],
    height=60,
    smooth=True,
)
```

```python
# Tiny area chart
fact.AntdTinyArea(
    data=[random.randint(50, 100) for _ in range(20)],
    height=60,
    smooth=True,
)
```

```python
# Tiny column chart
fact.AntdTinyColumn(
    data=[random.randint(50, 100) for _ in range(20)],
    height=60,
)
```

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

### Create AntdSankey Diagram

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdSankey to create Sankey diagrams that visualize flow quantities between nodes, illustrating how resources move through a system.

```python
import feffery_antd_charts as fact

fact.AntdSankey(
    data=[
        {'source': 'Homepage', 'target': 'Products', 'value': 160},
        {'source': 'Homepage', 'target': 'Services', 'value': 80},
        {'source': 'Homepage', 'target': 'About', 'value': 40},
        {'source': 'Products', 'target': 'Cart', 'value': 100},
        {'source': 'Products', 'target': 'Exit', 'value': 60},
        {'source': 'Services', 'target': 'Contact', 'value': 50},
        {'source': 'Services', 'target': 'Exit', 'value': 30},
        {'source': 'Cart', 'target': 'Checkout', 'value': 70},
        {'source': 'Cart', 'target': 'Exit', 'value': 30},
    ],
    sourceField='source',
    targetField='target',
    weightField='value',
    nodeWidthRatio=0.008,
    nodePaddingRatio=0.03,
)
```

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

### Create AntdGauge Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdGauge to create gauge or meter visualizations. Configure custom indicators, ranges, and statistics for displaying single values as percentages.

```python
import feffery_antd_charts as fact

fact.AntdGauge(
    percent=0.75,
    range={
        'color': '#30BF78',
    },
    indicator={
        'pointer': {
            'style': {
                'stroke': '#D0D0D0',
            },
        },
        'pin': {
            'style': {
                'stroke': '#D0D0D0',
            },
        },
    },
    axis={
        'label': {'formatter': {'func': '(v) => Number(v) * 100'}},
        'subTickLine': {
            'count': 3,
        },
    },
    statistic={
        'content': {
            'formatter': {
                'func': "({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`"
            },
            'style': {
                'color': 'rgba(0,0,0,0.65)',
                'fontSize': 28,
            },
        },
    },
)
```

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

### Create AntdStock Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a stock chart (candlestick/OHLC). Requires financial data with 'open', 'close', 'high', 'low', and 'trade_date' fields.

```python
import feffery_antd_charts as fact
from feffery_antd_charts.demo_data import stock_data

fact.AntdStock(
    data=stock_data,
    xField='trade_date',
    yField=['open', 'close', 'high', 'low'],
)
```

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

### AntdPie - Pie Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Create pie and donut charts with AntdPie to show part-to-whole relationships. Configure inner radius for donut style and specify color and angle fields.

```python
import feffery_antd_charts as fact

fact.AntdPie(
    data=[
        {'type': 'Category A', 'x': 85},
        {'type': 'Category B', 'x': 72},
        {'type': 'Category C', 'x': 63},
        {'type': 'Category D', 'x': 95},
        {'type': 'Category E', 'x': 58},
    ],
    colorField='type',
    angleField='x',
    radius=0.9,
)
```

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

### Create AntdProgress Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Creates a linear progress bar to show completion status. Configure height, width, and color.

```python
import feffery_antd_charts as fact

fact.AntdProgress(
    height=50,
    width=300,
    autoFit=False,
    percent=0.7,
    color=['#5B8FF9', '#E8EDF3'],
)
```

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

### Create AntdWaterfall Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Builds a waterfall chart to visualize cumulative changes. Requires 'type' and 'money' fields in data.

```python
import feffery_antd_charts as fact

fact.AntdWaterfall(
    data=[
        {'type': 'Starting Balance', 'money': 1000},
        {'type': 'Revenue', 'money': 500},
        {'type': 'Operating Costs', 'money': -200},
        {'type': 'Marketing', 'money': -150},
        {'type': 'Investment Income', 'money': 100},
        {'type': 'Taxes', 'money': -125},
    ],
    xField='type',
    yField='money',
    meta={
        'type': {'alias': 'Category'},
        'money': {'alias': 'Amount'},
    },
)
```

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

### Create AntdRingProgress Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a circular progress indicator to display completion percentages. Set height, width, and color.

```python
import feffery_antd_charts as fact

fact.AntdRingProgress(
    height=100,
    width=100,
    autoFit=False,
    percent=0.7,
    color=['#5B8FF9', '#E8EDF3'],
)
```

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

### Create AntdHeatmap Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdHeatmap for heatmaps that visualize data intensity across two dimensions using color coding.

```python
import feffery_antd_charts as fact
import random

fact.AntdHeatmap(
    data=[
        {
            'x': f'x{x}',
            'y': f'y{y}',
            'value': round(random.uniform(0, 100), 2),
        }
        for x in range(1, 11)
        for y in range(1, 11)
    ],
    xField='x',
    yField='y',
    colorField='value',
)
```

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

### Create AntdBullet Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a bullet chart for comparing actual values against targets. Requires 'title', 'ranges', 'measures', and 'target' fields.

```python
import feffery_antd_charts as fact

fact.AntdBullet(
    data=[
        {
            'title': 'Satisfaction',
            'ranges': [100],
            'measures': [80],
            'target': 85,
        },
    ],
    measureField='measures',
    rangeField='ranges',
    targetField='target',
    xField='title',
    color={
        'range': '#f0efff',
        'measure': '#5B8FF9',
        'target': '#3D76DD',
    },
    xAxis={'line': None},
)
```

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

### Create AntdLiquid Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdLiquid for liquid fill gauges with wave animation. This component is suitable for visually appealing percentage displays.

```python
import feffery_antd_charts as fact

fact.AntdLiquid(
    percent=0.25,
    outline={
        'border': 4,
        'distance': 8,
    },
    wave={
        'length': 128,
    },
)
```

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

### Create AntdChord Diagram

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdChord to create chord diagrams that visualize relationships and flows between entities in a circular layout.

```python
import feffery_antd_charts as fact

fact.AntdChord(
    data=[
        {'source': 'Beijing', 'target': 'Shanghai', 'value': 80},
        {'source': 'Beijing', 'target': 'Guangzhou', 'value': 46},
        {'source': 'Shanghai', 'target': 'Guangzhou', 'value': 62},
        {'source': 'Shanghai', 'target': 'Shenzhen', 'value': 82},
        {'source': 'Guangzhou', 'target': 'Shenzhen', 'value': 76},
    ],
    sourceField='source',
    targetField='target',
    weightField='value',
)
```

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

### Create AntdViolin Plot

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Creates a violin plot combining box plot statistics with density estimation. Requires 'x' and 'y' fields in data.

```python
import feffery_antd_charts as fact
import random

fact.AntdViolin(
    data=[
        {'x': f'Group {i}', 'y': round(random.normalvariate(i, 1), 2)}
        for i in range(1, 6)
        for _ in range(50)
    ],
    xField='x',
    yField='y',
    height=500,
)
```

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

### Create AntdBidirectionalBar Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Builds a bidirectional bar chart for comparing two metrics. Requires an 'x' field and two 'y' fields (e.g., 'male', 'female').

```python
import feffery_antd_charts as fact

fact.AntdBidirectionalBar(
    data=[
        {'country': 'USA', 'male': 165.2, 'female': 72.9},
        {'country': 'China', 'male': 104.4, 'female': 55.3},
        {'country': 'India', 'male': 54.4, 'female': 44.7},
        {'country': 'Brazil', 'male': 44.4, 'female': 39.5},
    ],
    xField='country',
    yField=['male', 'female'],
    xAxis={'position': 'bottom'},
    tooltip={'shared': True, 'showMarkers': False},
)
```

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

### AntdLine - Multi-series Line Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Create multi-series line charts by specifying a 'seriesField'. This allows comparison of different categories over the same x-axis.

```python
# Multi-series line chart
fact.AntdLine(
    data=[
        {'date': '2020-01', 'y': 50, 'type': 'Series A'},
        {'date': '2020-01', 'y': 30, 'type': 'Series B'},
        {'date': '2020-02', 'y': 75, 'type': 'Series A'},
        {'date': '2020-02', 'y': 55, 'type': 'Series B'},
        {'date': '2020-03', 'y': 60, 'type': 'Series A'},
        {'date': '2020-03', 'y': 45, 'type': 'Series B'},
    ],
    xField='date',
    yField='y',
    seriesField='type',
)
```

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

### Create AntdTreemap Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Visualizes hierarchical data using nested rectangles. Requires a nested JSON structure with 'name' and 'value' fields.

```python
import feffery_antd_charts as fact
import random

fact.AntdTreemap(
    data={
        'name': 'Root',
        'children': [
            {'name': f'Category {i}', 'value': random.randint(20, 100)}
            for i in range(1, 11)
        ],
    },
    colorField='name',
    height=600,
)
```

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

### Create AntdRose Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a rose chart (nightingale diagram) for radial data comparison. Requires 'x' and 'y' fields.

```python
import feffery_antd_charts as fact

fact.AntdRose(
    data=[
        {'class': f'Category {i}', 'value': i * 15}
        for i in range(1, 9)
    ],
    xField='class',
    yField='value',
    radius=0.9,
)
```

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

### Create AntdBox Plot

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generates a box plot to show statistical distribution. Data should include 'x' field and statistical quantiles ('low', 'q1', 'median', 'q3', 'high').

```python
import feffery_antd_charts as fact
import numpy as np
from feffery_dash_utils.component_prop_utils import to_box_data

fact.AntdBox(
    data=[
        {
            'x': f'Series {i}',
            **to_box_data(np.random.normal(50 + i*10, 10, 100)),
        }
        for i in range(1, 6)
    ],
    xField='x',
    yField=['low', 'q1', 'median', 'q3', 'high'],
)
```

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

### AntdDualAxes - Dual Axes Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Generate dual axes charts with AntdDualAxes for comparing data with different scales on the same x-axis. Supports combinations like line-line or line-column.

```python
import feffery_antd_charts as fact

fact.AntdDualAxes(
    data=[
        # Left axis data
        [
            {'date': '2020-01', 'y1': 50},
            {'date': '2020-02', 'y1': 75},
            {'date': '2020-03', 'y1': 60},
        ],
        # Right axis data
        [
            {'date': '2020-01', 'y2': 500},
            {'date': '2020-02', 'y2': 750},
            {'date': '2020-03', 'y2': 600},
        ],
    ],
    xField='date',
    yField=['y1', 'y2'],
    geometryOptions=[{'geometry': 'line'}, {'geometry': 'line'}],
)
```

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

### Create AntdHistogram

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Displays the distribution of numerical data. Requires a 'value' field and specifies 'binWidth' for data grouping.

```python
import feffery_antd_charts as fact
import random

fact.AntdHistogram(
    data=[
        {'value': round(random.normalvariate(100, 10), 2)}
        for _ in range(100)
    ],
    binField='value',
    binWidth=5,
)
```

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

### AntdColumn - Column Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Create vertical bar charts (column charts) using AntdColumn for comparing categorical data. Supports grouped and stacked modes.

```python
import feffery_antd_charts as fact

fact.AntdColumn(
    data=[
        {'date': '2020-01', 'y': 50},
        {'date': '2020-02', 'y': 75},
        {'date': '2020-03', 'y': 60},
        {'date': '2020-04', 'y': 90},
        {'date': '2020-05', 'y': 85},
    ],
    xField='date',
    yField='y',
)
```

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

### Create AntdFunnel Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdFunnel for funnel charts that visualize stages in a process with progressive filtering, commonly used for conversion analysis.

```python
import feffery_antd_charts as fact

fact.AntdFunnel(
    data=[
        {'stage': 'Resume Screening', 'number': 253},
        {'stage': 'Initial Interview', 'number': 151},
        {'stage': 'Technical Interview', 'number': 113},
        {'stage': 'Offer Extended', 'number': 87},
        {'stage': 'Hired', 'number': 59},
    ],
    xField='stage',
    yField='number',
    legend=False,
)
```

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

### Create AntdScatter Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdScatter to create scatter plots that show relationships between two continuous variables. Optional bubble sizing is supported.

```python
import feffery_antd_charts as fact
import random

fact.AntdScatter(
    data=[
        {
            'x': random.uniform(0, 100),
            'y': random.uniform(0, 100),
        }
        for _ in range(100)
    ],
    xField='x',
    yField='y',
)
```

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

### AntdArea - Area Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdArea to generate area charts, which visualize quantities over time with filled regions. Supports stacking and smooth curves.

```python
import feffery_antd_charts as fact

fact.AntdArea(
    data=[
        {'date': '2020-01', 'y': 50},
        {'date': '2020-02', 'y': 75},
        {'date': '2020-03', 'y': 60},
        {'date': '2020-04', 'y': 90},
        {'date': '2020-05', 'y': 85},
    ],
    xField='date',
    yField='y',
)
```

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

### Create AntdRadar Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdRadar to generate radar or spider charts. This is useful for comparing multiple variables across different categories.

```python
import feffery_antd_charts as fact

fact.AntdRadar(
    data=[
        {'class': 'Sales', 'value': 85},
        {'class': 'Marketing', 'value': 72},
        {'class': 'Development', 'value': 90},
        {'class': 'Support', 'value': 68},
        {'class': 'Operations', 'value': 75},
    ],
    xField='class',
    yField='value',
    radius=0.9,
)
```

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

### AntdBar - Horizontal Bar Chart

Source: https://context7.com/cnfeffery/feffery-antd-charts-docs/llms.txt

Use AntdBar for horizontal bar charts, which are suitable when category labels are long. Requires 'x' and 'type' fields for data.

```python
import feffery_antd_charts as fact

fact.AntdBar(
    data=[
        {'type': 'Category A', 'x': 85},
        {'type': 'Category B', 'x': 72},
        {'type': 'Category C', 'x': 63},
        {'type': 'Category D', 'x': 95},
        {'type': 'Category E', 'x': 58},
    ],
    xField='x',
    yField='type',
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.