### Mosaic Chart Quick Start

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/en/tutorial_docs/Chart_Types/Mosaic.md

This example demonstrates the basic setup for a Mosaic chart, including data binding and essential configuration. It shows how to register the chart type and render it. Note the conditional import/registration logic for business contexts versus standalone examples.

```javascript
/** --Add the following code when using in business context-- */
// When using in business context, please additionally import registerMosaicChart and execute
// import { registerMosaicChart } from '@visactor/vchart';
// registerMosaicChart();
/** --Add the above code when using in business context-- */

/** --Delete the following code when using in business context-- */
VCHART_MODULE.registerMosaicChart();
/** --Delete the above code when using in business context-- */
const spec = {
  type: 'mosaic',
  data: [
    {
      id: 'barData',
      values: [
        {
          State: 'WY',
          Age: 'Under 5 Years',
          Population: 25635
        },
        {
          State: 'WY',
          Age: '5 to 13 Years',
          Population: 1890
        },
        {
          State: 'WY',
          Age: '14 to 17 Years',
          Population: 9314
        },
        {
          State: 'DC',
          Age: 'Under 5 Years',
          Population: 30352
        },
        {
          State: 'DC',
          Age: '5 to 13 Years',
          Population: 20439
        },
        {
          State: 'DC',
          Age: '14 to 17 Years',
          Population: 10225
        },
        {
          State: 'VT',
          Age: 'Under 5 Years',
          Population: 38253
        },
        {
          State: 'VT',
          Age: '5 to 13 Years',
          Population: 42538
        },
        {
          State: 'VT',
          Age: '14 to 17 Years',
          Population: 15757
        },
        {
          State: 'ND',
          Age: 'Under 5 Years',
          Population: 51896
        },
        {
          State: 'ND',
          Age: '5 to 13 Years',
          Population: 67358
        },
        {
          State: 'ND',
          Age: '14 to 17 Years',
          Population: 18794
        },
        {
          State: 'AK',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK',
          Age: '14 to 17 Years',
          Population: 22153
        }
      ]
    }
  ],

  label: [
    {
      visible: true,
      position: 'bottom',
      style: {
        fill: '#333'
      },
      filterByGroup: {
        field: 'State',
        type: 'min'
      },
      overlap: false,
      formatMethod: (value, datum, ctx) => {
        return datum['State'];
      }
    },

    {
      visible: true,
      position: 'top',
      style: {
        fill: '#333'
      },
      filterByGroup: {
        field: 'State',
        type: 'max'
      },
      overlap: false,
      formatMethod: (value, datum, ctx) => {
        return `${datum['__VCHART_STACK_END']} ( ${( 
          (datum['__VCHART_MOSAIC_CAT_END_PERCENT'] - datum['__VCHART_MOSAIC_CAT_START_PERCENT']) * 
          100 
        ).toFixed(0)}% )`;
      }
    },
    {
      visible: true,
      position: 'center',
      smartInvert: true
    }
  ],
  xField: 'State',
  yField: 'Population',
  seriesField: 'Age',
  percent: true,
  legends: {
    visible: true
  },
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod: val => {
          return `${(val * 100).toFixed(2)}%`;
        }
      }
    }
    // {
    //   orient: 'bottom',
    //   label: {
    //     visible: false
    //   }
    // }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

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

### Install Rush for Development

Source: https://github.com/visactor/vchart/blob/develop/README.md

Before starting development, install the @microsoft/rush package globally. This tool is used for managing the monorepo.

```bash
$ npm i --global @microsoft/rush
```

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

### Quick Start Word Cloud Chart

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/en/tutorial_docs/Chart_Types/WordCloud.md

This example demonstrates the basic configuration for creating a word cloud chart. It requires specifying the chart type, data source, and mapping fields for text and size.

```javascript
const response = await fetch('https://lf9-dp-fe-tos.byteorg.com/obj/bit-cloud/data-wordcloud.json');
const dataWordCloud = await response.json();

const spec = {
  type: 'wordCloud',
  nameField: 'challenge_name',
  valueField: 'sum_count',
  seriesField: 'challenge_name',
  data: {
    name: 'baseData',
    values: dataWordWordCloud
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// 只为了方便控制台调试用，不要拷贝
window['vchart'] = vchart;
```

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

### Quick Start: 3D Bar Chart Example

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/en/tutorial_docs/Chart_Types/3d_Bar.md

This example demonstrates how to initialize and render a basic 3D bar chart. It includes data, field mappings, and essential 3D view enablement. Ensure the VChart library is included and a container element with the ID 'CONTAINER_ID' is present.

```javascript
const spec = {
  type: 'bar3d',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales',
  bar3d: {
    style: {
      length: 20,
      z: -20
    },
    state: {
      selected: {
        stroke: '#000',
        strokeWidth: 1
      }
    }
  },
  axes: [
    { orient: 'bottom', type: 'band', tick: { tickSize: 20 }, mode: '3d' },
    { orient: 'left', type: 'linear', tick: { tickSize: 20 }, mode: '3d' }
  ]
};

const vchart = new VChart(spec, {
  dom: CONTAINER_ID,
  disableDirtyBounds: true,
  options3d: {
    enable: true
  }
});
vchart.renderSync();
```

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

### Sequence Chart with Tooltip Configuration Example

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/zh/tutorial_docs/Chart_Types/Sequence.md

This example demonstrates a sequence chart with detailed tooltip configurations for bar series, including custom start and end times, and values. It also shows tooltip setup for dot series with event information.

```javascript
const spec = {
  type: 'sequence',
  appendPadding: {
    left: 80,
    right: 80
  },
  series: [
    {
      type: 'bar',
      barTitle: 'register',
      dataId: 'register',
      xField: 'start_time',
      x2Field: 'end_time',
      yField: 'value',
      animation: false,
      label: {
        style: {
          visible: false,
          fill: 'black'
        }
      },
      height: 40,
      padding: 10,
      tooltip: {
        visible: true,
        mark: {
          title: {
            key: 'bar info',
            value: 'bar info'
          },
          content: [
            {
              key: 'start_time',
              value: datum => datum['start_time']
            },
            {
              key: 'start_time_stamp',
              hasShape: false,
              value: datum => datum['start_time']
            },
            {
              key: 'end_time',
              value: datum => datum['end_time']
            },
            {
              key: 'end_time_stamp',
              hasShape: false,
              value: datum => datum['end_time']
            },
            {
              key: 'value',
              value: datum => datum['value']
            }
          ]
        }
      }
    },
    {
      type: 'bar',
      barTitle: 'im',
      dataId: 'im',
      xField: 'start_time',
      x2Field: 'end_time',
      yField: 'value',
      animation: false,
      height: 40,
      padding: 10,
      tooltip: {
        visible: true,
        mark: {
          title: {
            key: 'bar in do',
            value: 'bar info'
          },
          content: [
            {
              key: 'start_time',
              value: datum => datum['start_time']
            },
            {
              key: 'start_time_stamp',
              hasShape: false,
              value: datum => datum['start_time']
            },
            {
              key: 'end_time',
              value: datum => datum['end_time']
            },
            {
              key: 'end_time_stamp',
              hasShape: false,
              value: datum => datum['end_time']
            },
            {
              key: 'value',
              value: datum => datum['value']
            }
          ]
        }
      }
    },
    {
      type: 'bar',
      barTitle: 'comment',
      dataId: 'comment',
      xField: 'start_time',
      x2Field: 'end_time',
      yField: 'value',
      animation: false,
      height: 40,
      padding: 10,
      tooltip: {
        visible: true,
        mark: {
          title: {
            key: 'bar info',
            value: 'bar info'
          },
          content: [
            {
              key: 'start_time',
              value: datum => datum['start_time']
            },
            {
              key: 'start_time_stamp',
              hasShape: false,
              value: datum => datum['start_time']
            },
            {
              key: 'end_time',
              value: datum => datum['end_time']
            },
            {
              key: 'end_time_stamp',
              hasShape: false,
              value: datum => datum['end_time']
            },
            {
              key: 'value',
              value: datum => datum['value']
            }
          ]
        }
      }
    },
    {
      type: 'dot',
      dataId: 'dataDotSeries',
      xField: 'event_time',
      yField: 'id',
      seriesGroupField: 'type',
      titleField: 'type',
      subTitleField: 'id',
      dotTypeField: 'action_type',
      highLightSeriesGroup: 'IP',
      clipHeight: 1000,
      title: {
        style: {
          fill: 'rgba(46, 47, 50)'
        }
      },
      subTitle: {
        style: {
          fill: 'rgba(46, 47, 50)',
          dy: 7
        }
      },
      symbol: {
        style: {
          dx: -20
        }
      },
      tooltip: {
        mark: {
          title: {
            key: 'event info',
            value: 'event info'
          },
          content: [
            {
              hasShape: true,
              shapeType: 'square',
              key: datum => datum['type'],
              value: datum => datum['id']
            },
            {
              hasShape: false,
              key: 'event_time_stamp',
              value: datum => datum['event_time']
            },
            {
              hasShape: true,
              shapeType: 'square',
              key: 'action_type',
              value: datum => datum['action_type']
            },
            {
              hasShape: true,
              shapeType: 'square',

```

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

### Create Example Configuration File

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/SCRIPTS_TROUBLESHOOTING.md

Provides a sample `config.js` structure for the `generate_diagnosis_html.py` script. Ensure it includes `problemReview`, `diagnosis`, and `solutions` objects.

```bash
cat > config.js << 'EOF'
const problemReview = {
  specCode: "const spec = { type: 'bar', data: { values: [] } };"
};

const diagnosis = {
  problem: "图表显示问题",
  cause: "配置项错误"
};

const solutions = [
  {
    title: "修复方案",
    description: "修改配置",
    specCode: "const spec = { type: 'bar', data: { values: [{x:1,y:2}] } };"
  }
];
EOF
```

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

### Start React Development Server (Specific Directory)

Source: https://github.com/visactor/vchart/blob/develop/packages/react-vchart/README.md

Navigate to the package directory and start the React development server using rushx.

```bash
cd packages/react-vchart
$ rushx start
```

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

### Pie Chart with Smooth Label Lines

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/examples/en/pie-chart/smooth-label-line.md

Configure the `label.line.smooth` property to `true` to enable smooth curves for label guide lines. This example also shows basic pie chart setup with data, radius, colors, legends, and tooltips.

```javascript
const spec = {
  type: 'pie',
  data: [
    {
      name: 'data1',
      values: [
        {
          value: 348,
          name: '中介渠道: 34.8%'
        },
        {
          value: 152,
          name: '会员: 15.2%'
        },
        {
          value: 500,
          name: '散客: 50%'
        }
      ]
    }
  ],
  valueField: 'value',
  categoryField: 'name',
  outerRadius: 0.8,
  innerRadius: 0.5,
  color: ['#87DBDD', '#FF8406', '#468DFF'],
  pie: {
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  legends: {
    visible: true,
    orient: 'right',
    title: {
      visible: false
    },
    item: {
      visible: true
    }
  },
  tooltip: {
    transitionDuration: 0
  },
  label: {
    visible: true,
    pickable: false,
    line: {
      smooth: true,
      style: {
        lineWidth: 2
      }
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

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

### VChart Initialization and Full Example

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/api/layout-api.md

A complete HTML example demonstrating VChart initialization, rendering, and interactive resizing. It includes buttons to resize the chart to specific dimensions or fit its container, and uses ResizeObserver for responsive behavior.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
  <style>
    #chart-container { resize: both; overflow: hidden; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <div id="chart-container" style="width: 600px; height: 400px;">
    <div id="chart" style="width: 100%; height: 100%;"></div>
  </div>

  <div style="margin-top: 10px;">
    <button onclick="resizeChart(800, 400)">宽屏</button>
    <button onclick="resizeChart(400, 400)">正方形</button>
    <button onclick="fitContainer()">适应容器</button>
  </div>

  <script>
    const spec = {
      type: 'bar',
      data: [{
        id: 'data',
        values: [
          { category: 'A', value: 20 },
          { category: 'B', value: 35 },
          { category: 'C', value: 25 }
        ]
      }],
      xField: 'category',
      yField: 'value'
    };

    const vchart = new VChart(spec, { dom: 'chart' });
    vchart.renderSync();

    function resizeChart(w, h) {
      const container = document.getElementById('chart-container');
      container.style.width = w + 'px';
      container.style.height = h + 'px';
      vchart.resize(w, h);
    }

    function fitContainer() {
      const container = document.getElementById('chart-container');
      vchart.resize(container.clientWidth, container.clientHeight);
    }

    // 响应容器 resize
    new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      vchart.resize(width, height);
    }).observe(document.getElementById('chart-container'));
  </script>
</body>
</html>
```

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

### Configure Mark Point Start Symbol Style

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/option/en/component/mark-point.md

Defines the style for the symbol at the start of the guide line for a mark point.

```typescript
startSymbol(Object)
```

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

### Full Background Configuration Example

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/option/en/graphic/fill-style.md

Example demonstrating how to configure background properties within a region style, including the image URL and fillOpacity. Proper configuration of fillOpacity is crucial for transparency.

```typescript
const spec = {
  region: [
    {
      style: {
        background:'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png',
        fillOpacity: 1
      }
    }
  ]
}
```

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

### Rush Project Commands

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/contributing/en/1-Setting-Up-the-Development-Environment.md

Execute these commands within the VChart project directory after installing Rush globally. They are used for dependency installation, starting the demo page, and launching the documentation site.

```bash
# Install dependencies
$ rush update
# Start the demo page for vchart
$ rush start
# Start the demo page for react-vchart
$ rush react
# Start the local documentation site
$ rush docs
```

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

### Example: Chained Animation Task for New Data

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/contributing/en/sourcecode/10.5-animation-orchestration.md

This example demonstrates defining a chained animation task for new data points, starting with fade-in, followed by center growth, and a pulse effect.

```typescript
const enterAnimationTasks: IAnimationTask[] = [
  {
    timeOffset: 0,
    actionList: [
      { type: 'fadeIn', duration: 800, easing: 'easeInOutQuad' }
    ],
    nextTaskList: [
      {
        timeOffset: 800,
        actionList: [
          { type: 'growCenterIn', duration: 500, easing: 'easeInOutQuad' }
        ],
        nextTaskList: [
          {
            timeOffset: 500,
            actionList: [
              { type: 'pulse', duration: 300, easing: 'easeInOutQuad' }
            ]
          }
        ]
      }
    ]
  }
];    

```

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

### Create Example Spec File

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/SCRIPTS_TROUBLESHOOTING.md

Provides a sample `spec.js` for the `generate_demo_html.py` script. Ensure the data format and field names match VChart requirements.

```bash
cat > spec.js << 'EOF'
const spec = {
  type: "bar",
  data: {
    values: [
      { category: "A", value: 10 },
      { category: "B", value: 20 },
      { category: "C", value: 15 }
    ]
  },
  xField: "category",
  yField: "value",
  label: { visible: true }
};
EOF
```

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

### VChart Full Example with Event Handling

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/api/event-api.md

A complete HTML example demonstrating VChart initialization and event handling for 'click', 'pointerover', and 'renderFinished' events.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <div id="info" style="margin-top: 10px; padding: 10px; background: #f0f0f0;"></div>

  <script>
    const spec = {
      type: 'bar',
      data: [{
        id: 'data',
        values: [
          { category: 'A', value: 20 },
          { category: 'B', value: 30 },
          { category: 'C', value: 25 }
        ]
      }],
      xField: 'category',
      yField: 'value'
    };

    const vchart = new VChart(spec, { dom: 'chart' });
    vchart.renderSync();

    // 点击事件
    vchart.on('click', { level: 'mark', type: 'bar' }, (params) => {
      document.getElementById('info').innerHTML =
        `点击了: ${params.datum.category}, 值: ${params.datum.value}`;
    });

    // hover 事件
    vchart.on('pointerover', { level: 'mark' }, (params) => {
      if (params.datum) {
        document.getElementById('info').innerHTML =
          `悬停: ${params.datum.category}`;
      }
    });

    // 渲染完成事件
    vchart.on('renderFinished', () => {
      console.log('图表渲染完成');
    });
  </script>
</body>
</html>
```

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

### Vue Options API Bar Chart Example

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/faq/en/180-How to use charts libraries in Vue.md

Illustrates how to create a bar chart using Vue's Options API. This example includes prop definitions and a basic setup for chart initialization.

```vue
<script lang="ts">
import { defineComponent } from "vue";
import { VChart, IBarChartSpec, IChart } from "@visactor/vchart";
import type { PropType } from "vue";

interface BarChartProps {
  colors?: string[];
  data?: any[];
}

export default defineComponent({
  props: {
    colors: Object as PropType<BarChartProps["colors"]>,
    data: Object as PropType<BarChartProps["data"]>,
  },

  setup() {
    let chart: IChart | null = null;
    const parseSpec = (chartProps: BarChartProps) => {
      const colors = chartProps.colors;

      return {
        type: "bar",
        data: [
          {
            id: "barData",
            values: chartProps.data,
          },
        ],
        xField: "name",
        yField: "value",
        color: {
          type: "ordinal",
          domain: [],
          range: colors,
        },
      } as IBarChartSpec;
    };

    const createOrUpdateChart = (chartProps: BarChartProps) => {

```

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

### VChart Theme Switching Example

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/api/theme-api.md

A complete HTML example demonstrating VChart initialization, custom theme registration, and theme switching via buttons. Includes basic bar chart configuration.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <div style="margin-top: 10px;">
    <button onclick="setTheme('default')">默认主题</button>
    <button onclick="setTheme('dark')">深色主题</button>
    <button onclick="setTheme('custom')">自定义主题</button>
  </div>

  <script>
    // 注册自定义主题
    VChart.ThemeManager.registerTheme('custom', {
      colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'],
      background: '#FFF5F5'
    });

    const spec = {
      type: 'bar',
      data: [{
        id: 'data',
        values: [
          { category: 'A', value: 20 },
          { category: 'B', value: 35 },
          { category: 'C', value: 25 }
        ]
      }],
      xField: 'category',
      yField: 'value'
    };

    const vchart = new VChart(spec, { dom: 'chart' });
    vchart.renderSync();

    async function setTheme(name) {
      await vchart.setCurrentTheme(name);
      console.log('当前主题:', vchart.getCurrentThemeName());
    }
  </script>
</body>
</html>
```

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

### Full VChart Example with Animation Control

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/api/animation-api.md

A complete HTML example demonstrating VChart integration, including basic bar chart setup, animation configuration, and interactive buttons for pause, resume, stop, and data update.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <div style="margin-top: 10px;">
    <button onclick="vchart.pauseAnimation()">暂停</button>
    <button onclick="vchart.resumeAnimation()">恢复</button>
    <button onclick="vchart.stopAnimation()">停止</button>
    <button onclick="updateData()">更新数据</button>
  </div>

  <script>
    const spec = {
      type: 'bar',
      data: [{
        id: 'data',
        values: [
          { category: 'A', value: 20 },
          { category: 'B', value: 35 },
          { category: 'C', value: 25 }
        ]
      }],
      xField: 'category',
      yField: 'value',
      animation: true,
      animationAppear: { duration: 2000 }
    };

    const vchart = new VChart(spec, { dom: 'chart' });
    vchart.renderSync();

    function updateData() {
      const newData = spec.data[0].values.map(d => ({
        category: d.category,
        value: Math.random() * 50
      }));
      vchart.updateDataSync('data', newData);
    }

    vchart.on('animationFinished', () => {
      console.log('动画完成');
    });
  </script>
</body>
</html>
```

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

### Start VChart Document Server

Source: https://github.com/visactor/vchart/blob/develop/README.md

Run these commands in the project root to build and serve the VChart documentation locally. Ensure you have run `rush update` and `rush build` first.

```bash
# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs
```

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

### Configure Multiple Axes in Cartesian Charts

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/en/tutorial_docs/Chart_Concepts/Axes.md

Add axis configurations to the 'axes' property to draw multiple axes. This example shows a double Y-axis setup.

```typescript
axes: [
  {
    type: 'linear', // Declare the axis type
    orient: 'left' // Declare the axis display position
  },
  {
    type: 'linear', // Declare the axis type
    orient: 'right' // Declare the axis display position
  }
];
```

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

### Node.js Server-Side Rendering with VChart

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/faq/en/31- Can VChart be server-side rendered.md

This example demonstrates how to render a VChart spec to an image file on the server. Ensure you have 'canvas' installed. Animation is disabled for server-side rendering.

```javascript
const fs = require('fs');

const VChart = require('@visactor/vchart');
const Canvas = require('canvas');

// 正常的图表 spec 配置
const spec = {
  type: 'radar',
  data: [
    {
      id: 'Map',
      values: [
        { key: 'North', value: 31, category: 'Destroyer' },
        { key: 'Northeast', value: 32, category: 'Destroyer' },
        { key: 'East', value: 21, category: 'Destroyer' },
        { key: 'Southeast', value: 15, category: 'Destroyer' },
        { key: 'South', value: 50, category: 'Destroyer' },
        { key: 'Southwest', value: 44, category: 'Destroyer' },
        { key: 'West', value: 32, category: 'Destroyer' },
        { key: 'Northwest', value: 32, category: 'Destroyer' },
        { key: 'North', value: 31, category: 'Destroyer' },
        { key: 'Northeast', value: 32, category: 'Destroyer' },
        { key: 'East', value: 21, category: 'Destroyer' },
        { key: 'Southeast', value: 40, category: 'aircraft carrier' },
        { key: 'South', value: 25, category: 'aircraft carrier' },
        { key: 'Southwest', value: 22, category: 'aircraft carrier' },
        { key: 'West', value: 18, category: 'aircraft carrier' },
        { key: 'Northwest', value: 7, category: 'aircraft carrier' },
        { key: 'North', value: 24, category: 'aircraft carrier' },
        { key: 'Northeast', value: 43, category: 'aircraft carrier' },
        { key: 'East', value: 42, category: 'aircraft carrier' }
      ]
    }
  ],
  categoryField: 'key',
  valueField: 'value',
  seriesField: 'category',
  legends: {
    visible: true,
    orient: 'bottom'
  }
};
const cs = new VChart.default(spec, {
  // 声明使用的渲染环境以及传染对应的渲染环境参数
  mode: 'node',
  modeParams: Canvas,
  animation: false // 关闭动画
});

cs.renderSync();

// 导出图片
const buffer = cs.getImageBuffer();
fs.writeFileSync(`./chart.png`, buffer);
```

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

### Complete Interaction Configuration Example

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/type-details/IInteractionItemSpec-Type-Definition.md

An example demonstrating a comprehensive interaction configuration, including hover, select, and custom interactions with specific settings.

```typescript
const interactionConfig: IInteractionSpec = {
  hover: {
    enable: true,
    trigger: 'pointerover',
    triggerOff: 'pointerout',
    markNames: ['bar']
  },
  select: {
    enable: true,
    mode: 'multiple',
    trigger: 'click',
    triggerOff: 500 // Auto deselect after 500ms
  },
  interactions: [
    {
      type: 'element-highlight',
      markIds: ['line'],
      trigger: 'pointerover',
      highlightState: 'highlight',
      blurState: 'blur'
    },
    {
      type: 'element-active-by-legend',
      markNames: ['series'],
      filterType: 'datum',
      state: 'legendHover'
    }
  ]
};
```

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

### Box Plot Quick Start

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/guide/en/tutorial_docs/Chart_Types/BoxPlot.md

A basic example demonstrating how to create a vertical box plot using VChart. It includes sample data and the necessary specification for rendering.

```javascript
const data = [
  {
    name: 'boxPlot',
    values: [
      {
        x: 'Sub-Saharan Africa',
        y1: 8.72,
        y2: 9.73,
        y3: 10.17,
        y4: 10.51,
        y5: 11.64
      },
      {
        x: 'South Asia',
        y1: 9.4,
        y2: 10.06,
        y3: 10.75,
        y4: 11.56,
        y5: 12.5
      },
      {
        x: 'Middle East & North Africa',
        y1: 9.54,
        y2: 10.6,
        y3: 11.05,
        y4: 11.5,
        y5: 11.92
      },
      {
        x: 'Latin America & Caribbean',
        y1: 8.74,
        y2: 9.46,
        y3: 10.35,
        y4: 10.94,
        y5: 12.21
      },
      {
        x: 'East Asia & Pacific',
        y1: 7.8,
        y2: 8.95,
        y3: 10.18,
        y4: 11.57,
        y5: 13.25
      },
      {
        x: 'Europe & Central Asia',
        y1: 9.52,
        y2: 10.39,
        y3: 10.93,
        y4: 11.69,
        y5: 12.63
      }
    ]
  }
];

const spec = {
  type: 'boxPlot',
  data: data,
  xField: 'x',

  minField: 'y1',
  q1Field: 'y2',
  medianField: 'y3',
  q3Field: 'y4',
  maxField: 'y5',
  direction: 'vertical'
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// 只为了方便控制台调试用，不要拷贝
window['vchart'] = vchart;
```

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

### Bundle Command Usage

Source: https://github.com/visactor/vchart/blob/develop/tools/bundler/README.md

Basic command structure for using the bundle tool with options and an entry point. Example shows setting format, watch mode, environment variables, and custom IDs.

```bash
bundle [options] <entry>

# eg.
bundle -f es -w dev --env __DEV__=true --env __ID__="'my_id'"
```

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

### Padding Configuration Examples

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/option/en/common/layout-item.md

Demonstrates various ways to configure padding for layout items, including single values, arrays, and objects with dynamic calculations.

```typescript
padding: [5]; // 上右下左内边距均为 5px
padding: ['10%']; // 上下内边距为相对 图表视图区域 高的 10%，左右内边距为相对 图表视图区域 宽的 10%
padding: [5, 10]; // 上下内边距为 5px，左右内边距为 10px
padding: [
  5, // 上内边距为 5px
  '10%', // 左右内边距为相对 图表视图区域 宽的 10%
  10 // 下内边距为 10px
];
padding: [
  5, // 上内边距为 5px，
  '10%', // 右内边距为相对 图表视图区域 宽的 10%，
  '5%', // 下内边距为相对 图表视图区域 高的 5%
  (rect: ILayoutRect) => rect.height * 0.1 + 10 // 左内边距为图表视图区域 高的 0.1 + 10
];
```

```typescript
padding: 10,   // 上右下左内边距均为 10px
padding: '10%' // 上右下左内边距均为相对 **图表视图区域** 宽高的 10%
padding: {
  top: 10, // 上方内边距 10px
  left: ({ width }) => width * 0.1, // 左方内边距为布局宽度的 0.1
  right: '10%' // 右方内边距为布局宽度的 0.1
}
```

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

### Scatter Plot with Regression Line

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/examples/en/marker/scatter-regression-line.md

This example shows how to register and use the regression line extension for scatter plots. Ensure you have installed '@visactor/vchart-extension' and keep its version consistent with VChart.

```javascript
/** --Add the following code when using in your project-- */
// When using in your project, please additionally install @visactor/vchart-extension, and keep the package version consistent with vchart
// import { registerRegressionLine, appendScatterRegressionLineConfig } from '@visactor/vchart-extension';
/** --Add the above code when using in your project-- */

/** --Remove the following code when using in your project-- */
const { registerRegressionLine, appendScatterRegressionLineConfig } = VChartExtension;
/** --Remove the above code when using in your project-- */

const data = [
  { name: 'chevrolet chevelle malibu', milesPerGallon: 18, cylinders: 8, horsepower: 130 },
  { name: 'buick skylark 320', milesPerGallon: 15, cylinders: 8, horsepower: 165 },
  { name: 'plymouth satellite', milesPerGallon: 18, cylinders: 8, horsepower: 150 },
  { name: 'amc rebel sst', milesPerGallon: 16, cylinders: 8, horsepower: 150 },
  { name: 'ford torino', milesPerGallon: 17, cylinders: 8, horsepower: 140 },
  { name: 'ford galaxie 500', milesPerGallon: 15, cylinders: 8, horsepower: 198 },
  { name: 'chevrolet impala', milesPerGallon: 14, cylinders: 8, horsepower: 220 },
  { name: 'plymouth fury iii', milesPerGallon: 14, cylinders: 8, horsepower: 215 },
  { name: 'pontiac catalina', milesPerGallon: 14, cylinders: 8, horsepower: 225 },
  { name: 'amc ambassador dpl', milesPerGallon: 15, cylinders: 8, horsepower: 190 },
  { name: 'citroen ds-21 pallas', milesPerGallon: 0, cylinders: 4, horsepower: 115 },
  { name: 'chevrolet chevelle concours (sw)', milesPerGallon: 0, cylinders: 8, horsepower: 165 },
  { name: 'ford torino (sw)', milesPerGallon: 0, cylinders: 8, horsepower: 153 },
  { name: 'plymouth satellite (sw)', milesPerGallon: 0, cylinders: 8, horsepower: 175 },
  { name: 'amc rebel sst (sw)', milesPerGallon: 0, cylinders: 8, horsepower: 175 },
  { name: 'dodge challenger se', milesPerGallon: 15, cylinders: 8, horsepower: 170 },
  { name: "plymouth 'cuda 340", milesPerGallon: 14, cylinders: 8, horsepower: 160 },
  { name: 'ford mustang boss 302', milesPerGallon: 0, cylinders: 8, horsepower: 140 },
  { name: 'chevrolet monte carlo', milesPerGallon: 15, cylinders: 8, horsepower: 150 },
  { name: 'buick estate wagon (sw)', milesPerGallon: 14, cylinders: 8, horsepower: 225 },
  { name: 'toyota corona mark ii', milesPerGallon: 24, cylinders: 4, horsepower: 95 },
  { name: 'plymouth duster', milesPerGallon: 22, cylinders: 6, horsepower: 95 },
  { name: 'amc hornet', milesPerGallon: 18, cylinders: 6, horsepower: 97 },
  { name: 'ford maverick', milesPerGallon: 21, cylinders: 6, horsepower: 85 },
  { name: 'datsun pl510', milesPerGallon: 27, cylinders: 4, horsepower: 88 },
  { name: 'volkswagen 1131 deluxe sedan', milesPerGallon: 26, cylinders: 4, horsepower: 46 },
  { name: 'peugeot 504', milesPerGallon: 25, cylinders: 4, horsepower: 87 },
  { name: 'audi 100 ls', milesPerGallon: 24, cylinders: 4, horsepower: 90 },
  { name: 'saab 99e', milesPerGallon: 25, cylinders: 4, horsepower: 95 },
  { name: 'bmw 2002', milesPerGallon: 26, cylinders: 4, horsepower: 113 },
  { name: 'amc gremlin', milesPerGallon: 21, cylinders: 6, horsepower: 90 },
  { name: 'ford f250', milesPerGallon: 10, cylinders: 8, horsepower: 215 },
  { name: 'chevy c20', milesPerGallon: 10, cylinders: 8, horsepower: 200 },
  { name: 'dodge d200', milesPerGallon: 11, cylinders: 8, horsepower: 210 },
  { name: 'hi 1200d', milesPerGallon: 9, cylinders: 8, horsepower: 193 },
  { name: 'datsun pl510', milesPerGallon: 27, cylinders: 4, horsepower: 88 },
  { name: 'chevrolet vega 2300', milesPerGallon: 28, cylinders: 4, horsepower: 90 },
  { name: 'toyota corona', milesPerGallon: 25, cylinders: 4, horsepower: 95 },
  { name: 'ford pinto', milesPerGallon: 25, cylinders: 4, horsepower: 0 },
  { name: 'volkswagen super beetle 117', milesPerGallon: 0, cylinders: 4, horsepower: 48 },
  { name: 'amc gremlin', milesPerGallon: 19, cylinders: 6, horsepower: 100 },
  { name: 'plymouth satellite custom', milesPerGallon: 16, cylinders: 6, horsepower: 105 },
  { name: 'chevrolet chevelle malibu', milesPerGallon: 17, cylinders: 6, horsepower: 100 },
  { name: 'ford torino 500', milesPerGallon: 19, cylinders: 6, horsepower: 88 },
  { name: 'amc matador', milesPerGallon: 18, cylinders: 6, horsepower: 100 },
  { name: 'chevrolet impala', milesPerGallon: 14, cylinders: 8, horsepower: 165 },
  { name: 'pontiac catalina brougham', milesPerGallon: 14, cylinders: 8, horsepower: 175 },
  { name: 'ford galaxie 500', milesPerGallon: 14, cylinders: 8, horsepower: 153 },
  { name: 'plymouth fury iii', milesPerGallon: 14, cylinders: 8, horsepower: 150 },
  { name: 'dodge monaco (sw)', milesPerGallon: 12, cylinders: 8, horsepower: 180 },
  { name: 'ford country squire (sw)', milesPerGallon: 13, cylinders: 8, horsepower: 170 },
  { name: 'pontiac safari (sw)', milesPerGallon: 13, cylinders: 8, horsepower: 175 }
];

const vchartInstance = new VChart(option);
vchartInstance.render();
```

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

### Step Line Configuration Example

Source: https://github.com/visactor/vchart/blob/develop/skills/vchart-development-assistant/references/type-details/IMarkLineSpec-Type-Definition.md

Example of configuring a step mark line with specific connection directions and expansion.

```APIDOC
## Step Line Configuration

### Description

Configures a step mark line with options for connection direction and expansion distance.

### Code

```typescript
const stepLine: IStepMarkLineSpec = {
  type: 'type-step',
  connectDirection: 'top',
  expandDistance: '20%',
  coordinates: [
    { x: 10, y: 20 },
    { x: 90, y: 80 }
  ],
  label: {
    visible: true,
    text: 'Step Connection'
  },
  line: {
    style: {
      stroke: '#722ed1',
      lineWidth: 2
    }
  }
};
```
```

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

### Polar Mark Line Position Configuration

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/examples/en/marker/polar-mark-line-pos.md

Configure the position of line marks in polar charts. This example sets the start and end points of the line using angle and radius.

```javascript
window['vchart'] = vchart;
```

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

### Basic VChart Initialization

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/faq/en/0-template.md

Demonstrates the fundamental setup for initializing a VChart instance. Ensure you have the necessary VChart library imported.

```javascript
```javascript livedemo

```
```

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

### Cloning and Compiling VChart for Taro

Source: https://github.com/visactor/vchart/blob/develop/docs/assets/faq/en/82-How to use chart components in Taro.md

Clone the VChart repository, install dependencies, and compile the `@visactor/taro-vchart` package for use in Taro projects. This example uses rush for dependency management and compilation.

```bash
#clone
$ git clone git@github.com:VisActor/VChart.git
$ cdVChart
# Install dependencies
$ rush update
# compile
$ rush run -p @visactor/taro-vchart -s dev:lark
```