# VChart

## Tutorials

- [Site Guide](https://visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [Quick Start](https://visactor.io/vchart/guide/tutorial_docs/Getting_Started)
- [How to join the  VChart  community](https://visactor.io/vchart/guide/tutorial_docs/Contribution_Guide)
- [How to Obtain VChart](https://visactor.io/vchart/guide/tutorial_docs/Basic/How_to_Get_VChart)
- [How to Reference VChart in Projects](https://visactor.io/vchart/guide/tutorial_docs/Basic/How_to_Import_VChart)
- [A Basic Spec](https://visactor.io/vchart/guide/tutorial_docs/Basic/A_Basic_Spec)
- [Chart Components](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Understanding_VChart)
- [Data Types and Data Definition](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Data/Data_Types_and_Interface)
- [DataSet](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Data/Dataset_and_Data_Processing)
- [Title](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Title)
- [Axes](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes)
- [Label Data Labels](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Label)
- [Graphic Elements](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Mark)
- [Series](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Composition_and_Effect_of_Series)
- [Tooltip](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip)
- [Legend](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend)
- [Crosshair](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Crosshair)
- [Indicator Card](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Indicator)
- [DataZoom Data Filtering Slider](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Datazoom)
- [Scrollbar](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Scrollbar)
- [Player](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Player)
- [Brush Selection](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Brush)
- [Marker Data Annotation](https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/marker)
- [Chart Types](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/chart_types)
- [Combination Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination)
- [Line Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Line)
- [Area Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Area)
- [Bar Chart / Bar Graph](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Bar)
- [Pie / Ring Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Pie)
- [Rose Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Rose)
- [Histogram](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Histogram)
- [Scatter Plot](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Scatter)
- [Heatmap](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Heatmap)
- [Box Plot](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/BoxPlot)
- [Waterfall Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Waterfall)
- [Funnel Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Funnel)
- [Sequence Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Sequence)
- [Range Column Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/RangeColumn)
- [Range Area Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/RangeArea)
- [Word Cloud](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/WordCloud)
- [Gauge Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Gauge)
- [Treemap](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Treemap)
- [Map](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Map)
- [Radar Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Radar)
- [Sankey Diagram](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Sankey)
- [Progress Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Progress)
- [Circle Packing](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/CirclePacking)
- [Sunburst Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Sunburst)
- [Correlation Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Correlation)
- [Liquid Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Liquid)
- [Mosaic Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Mosaic)
- [Pictogram Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Pictogram)
- [3d 折线图](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_Line)
- [3d Area Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_Area)
- [3d 散点图](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_Scatter)
- [3D Bar/Column Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_Bar)
- [3D Word Cloud](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_WordCloud)
- [3D Funnel Chart](https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/3d_Funnel)
- [VChart Animation Tutorial](https://visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types)
- [Animation Properties and Configurations](https://visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Attributes_and_Settings)
- [Configuration and Arrangement of Complex Animations](https://visactor.io/vchart/guide/tutorial_docs/Animation/Configuration_and_Choreography_of_Complex_Animations)
- [Common Animation Cases](https://visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Cases)
- [Layout Strategies](https://visactor.io/vchart/guide/tutorial_docs/Layout/Layout_Strategy)
- [Layout Example: Grid Layout](https://visactor.io/vchart/guide/tutorial_docs/Layout/Layout_Cases/example-grid)
- [Layout Example: Custom Layout](https://visactor.io/vchart/guide/tutorial_docs/Layout/Layout_Cases/example-custom)
- [Custom Animation](https://visactor.io/vchart/guide/tutorial_docs/extend/custom_animation)
- [Custom Layout](https://visactor.io/vchart/guide/tutorial_docs/extend/custom_layout)
- [Custom Mark](https://visactor.io/vchart/guide/tutorial_docs/extend/custom_mark)
- [Richtext and dom extension](https://visactor.io/vchart/guide/tutorial_docs/extend/Richtext_and_Dom)
- [Theme Concept and Design Rules](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
- [Theme Configuration](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme)
- [Color Palette Configuration](https://visactor.io/vchart/guide/tutorial_docs/Theme/Color_Theme)
- [Custom Themes](https://visactor.io/vchart/guide/tutorial_docs/Theme/Customize_Theme)
- [VChart Extended Theme Packages](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
- [Themes for Semi Design](https://visactor.io/vchart/guide/tutorial_docs/Theme/Semi_Design)
- [Themes for Arco Design](https://visactor.io/vchart/guide/tutorial_docs/Theme/Arco_Design)
- [Themes for O Design](https://visactor.io/vchart/guide/tutorial_docs/Theme/Ve_O_Design)
- [Media Query](https://visactor.io/vchart/guide/tutorial_docs/Self-adaption/Media_Query)
- [VMind Getting Started](https://visactor.io/vchart/guide/tutorial_docs/Intelligent_Visualization/VMind_Getting_Started)
- [Getting Started with Data Video](https://visactor.io/vchart/guide/tutorial_docs/Intelligent_Visualization/Getting_Started_with_Data_Video)
- [VChart Progressive Rendering Tutorial](https://visactor.io/vchart/guide/tutorial_docs/Progressive_Render)
- [VChart Load on Demand Tutorial](https://visactor.io/vchart/guide/tutorial_docs/Load_on_Demand)
- [Node Server-Side Rendering](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node)
- [React VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)
- [React Lynx VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react-lynx)
- [Taro VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/taro)
- [Vue VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/vue)
- [Python](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/python)
- [Lynx](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/lynx)
- [Cross-end Instructions](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/how)
- [Lark Mini-Program Widget](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/block)
- [Lark Mini Program](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/lark)
- [Byte Mini Program](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/tt)
- [WX Mini Program](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/wx)
- [Semi Design](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/Semi_Design)
- [Arco Design](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/Arco_Design)
- [OMI](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/omi)
- [Openinula VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/openinula)
- [Harmony VChart](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/harmony)
- [univer](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/univer)
- [svg plugin](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/svg)
- [Events](https://visactor.io/vchart/guide/tutorial_docs/Event)
- [Function](https://visactor.io/vchart/guide/tutorial_docs/Function)
- [Formatter Plugin](https://visactor.io/vchart/guide/tutorial_docs/Chart_Plugins/Formatter)
- [About vchart-extension](https://visactor.io/vchart/guide/tutorial_docs/Chart_Extensions/about_extensions)
- [Series Break](https://visactor.io/vchart/guide/tutorial_docs/Chart_Extensions/series_break)
- [Conversion Funnel](https://visactor.io/vchart/guide/tutorial_docs/Chart_Extensions/conversion_funnel)

## Chart Demos

- [Basic Appear Animation Config](https://visactor.io/vchart/demo/storytelling/appear-animation-config)
- [Bar One-by-one Appear Animation (By Group)](https://visactor.io/vchart/demo/storytelling/bar-oneByOne-group)
- [Bar One-by-one Appear Animation (By Series)](https://visactor.io/vchart/demo/storytelling/bar-oneByOne-series)
- [Bar One-by-one Appear Animation (By Graphic)](https://visactor.io/vchart/demo/storytelling/bar-oneByOne-rect)
- [Pie Appear Animation Presets](https://visactor.io/vchart/demo/storytelling/pie-preset-animation)
- [Accordion highlight animation for bar charts](https://visactor.io/vchart/demo/storytelling/bar-highlight-animation)
- [Stream light animation for area charts](https://visactor.io/vchart/demo/storytelling/area-streamlight)
- [Carousel animation for pie charts](https://visactor.io/vchart/demo/storytelling/ring-carousel-animation)
- [Simple demo for animation arrangement](https://visactor.io/vchart/demo/storytelling/simple-animation-arrangement)
- [Dynamic Comparative Bar Chart](https://visactor.io/vchart/demo/storytelling/dynamic-comparative-bar-chart)
- [Dynamic Bar Chart](https://visactor.io/vchart/demo/storytelling/ranking-bar)
- [Dynamic Line Chart](https://visactor.io/vchart/demo/storytelling/dynamic-line-chart)
- [Dynamic Rose Chart](https://visactor.io/vchart/demo/storytelling/dynamic-rose-chart)
- [Dynamic Scatterplot](https://visactor.io/vchart/demo/storytelling/timeline-scatter)
- [Circular Chart](https://visactor.io/vchart/demo/storytelling/weekly-activity)
- [Global animation for switching between bar and pie charts](https://visactor.io/vchart/demo/storytelling/bar-to-pie)
- [Global animation for switching between bar charts and scatter plots](https://visactor.io/vchart/demo/storytelling/bar-to-scatter)
- [Column Parallel With HightLight](https://visactor.io/vchart/demo/vscreen/column-parallel-highlight)
- [Column Parallel with StreamLight](https://visactor.io/vchart/demo/vscreen/column-parallel-streamlight)
- [Line with Growth](https://visactor.io/vchart/demo/vscreen/line-growth)
- [Line with Load](https://visactor.io/vchart/demo/vscreen/line-load)
- [Area with Growth](https://visactor.io/vchart/demo/vscreen/area-growth)
- [Area with Load](https://visactor.io/vchart/demo/vscreen/area-load)
- [Bar With HightLight](https://visactor.io/vchart/demo/vscreen/bar-highlight)
- [Bar with StreamLight](https://visactor.io/vchart/demo/vscreen/bar-streamlight)
- [Double Axis with Load](https://visactor.io/vchart/demo/vscreen/double-axis-load)
- [Pie with Scale](https://visactor.io/vchart/demo/vscreen/pie-scale)
- [Pie with Relocate](https://visactor.io/vchart/demo/vscreen/pie-relocate)
- [Bilateral with Growth](https://visactor.io/vchart/demo/vscreen/bilateral-growth)
- [Scatter with Ripple](https://visactor.io/vchart/demo/vscreen/scatter-ripple)
- [Radar with Ridial](https://visactor.io/vchart/demo/vscreen/radar-ridial)
- [WordCloud with Scale](https://visactor.io/vchart/demo/vscreen/word-cloud-scale)
- [Sankey](https://visactor.io/vchart/demo/vscreen/sankey)
- [Funnel](https://visactor.io/vchart/demo/vscreen/funnel)
- [Gauge](https://visactor.io/vchart/demo/vscreen/gauge)
- [Liquid](https://visactor.io/vchart/demo/vscreen/liquid)
- [Basic line chart](https://visactor.io/vchart/demo/line-chart/basic-line)
- [Dashed Line at the End](https://visactor.io/vchart/demo/line-chart/dash-line)
- [Horizontal Line Chart](https://visactor.io/vchart/demo/line-chart/horizontal-line)
- [Multi-series Line Chart](https://visactor.io/vchart/demo/line-chart/multi-line)
- [Line Chart with Null Values](https://visactor.io/vchart/demo/line-chart/null-value-line)
- [Percentage Stacked Line Chart](https://visactor.io/vchart/demo/line-chart/percentage-stacked-line)
- [Smooth Line Chart](https://visactor.io/vchart/demo/line-chart/smoothed-line)
- [Stacked Line Chart](https://visactor.io/vchart/demo/line-chart/stacked-line)
- [Step Line Chart](https://visactor.io/vchart/demo/line-chart/step-line)
- [Unstacked Line Chart](https://visactor.io/vchart/demo/line-chart/unstacked-line)
- [Offline Chart Axis padding adjustment](https://visactor.io/vchart/demo/line-chart/line-axes-padding)
- [Line chart sampling](https://visactor.io/vchart/demo/line-chart/line-sampling)
- [Line chart overlap](https://visactor.io/vchart/demo/line-chart/line-overlap)
- [Highlight All Related Points When Clicking the Dimension Item](https://visactor.io/vchart/demo/line-chart/line-custom-state)
- [Set the default select dimension after render](https://visactor.io/vchart/demo/line-chart/line-default-select)
- [Basic Area Chart](https://visactor.io/vchart/demo/area-chart/basic-area)
- [Vertical Area Chart](https://visactor.io/vchart/demo/area-chart/horizontal-area)
- [Area Chart with Negative Values](https://visactor.io/vchart/demo/area-chart/negative-values-area)
- [Area chart with null values](https://visactor.io/vchart/demo/area-chart/null-value-area)
- [Percentage Stacked Area Chart](https://visactor.io/vchart/demo/area-chart/percentage-stacked-area)
- [Range Area Chart](https://visactor.io/vchart/demo/area-chart/range-area)
- [Segment Range Area Chart](https://visactor.io/vchart/demo/area-chart/segment-range-area)
- [Smoothed Area Chart](https://visactor.io/vchart/demo/area-chart/smoothed-area)
- [Stacked Area Chart](https://visactor.io/vchart/demo/area-chart/stacked-area)
- [Step Area Chart](https://visactor.io/vchart/demo/area-chart/step-area)
- [Streamgraph](https://visactor.io/vchart/demo/area-chart/stream-graph)
- [Multi-series area chart](https://visactor.io/vchart/demo/area-chart/area-with-marker)
- [非堆叠面积图](https://visactor.io/vchart/demo/area-chart/unstacked-area)
- [面积图样式](https://visactor.io/vchart/demo/area-chart/area-style)
- [Dashed Stacked Area Chart with Distinguished End](https://visactor.io/vchart/demo/area-chart/stacked-dash-area)
- [Basic Column Chart](https://visactor.io/vchart/demo/bar-chart/basic-column)
- [Grouped Bar Chart](https://visactor.io/vchart/demo/bar-chart/group-column)
- [Grouped Stacked Column Chart](https://visactor.io/vchart/demo/bar-chart/group-stack-column)
- [Grouped Percentage Stacked Bar Chart](https://visactor.io/vchart/demo/bar-chart/group-stack-percentage-column)
- [Stacked Bar Chart](https://visactor.io/vchart/demo/bar-chart/stack-column)
- [Percentage Stacked Bar Chart](https://visactor.io/vchart/demo/bar-chart/stack-percentage-column)
- [Bi-direction Stack Grouped Bar Chart](https://visactor.io/vchart/demo/bar-chart/bi-direction-stack-column)
- [Base Bar Chart](https://visactor.io/vchart/demo/bar-chart/basic-bar)
- [Bi-directional Bar Chart](https://visactor.io/vchart/demo/bar-chart/bi-direction-bar)
- [Gradient Rounded Bar Chart](https://visactor.io/vchart/demo/bar-chart/gradient-column)
- [Grouped Bar Chart](https://visactor.io/vchart/demo/bar-chart/group-bar)
- [Population Pyramid](https://visactor.io/vchart/demo/bar-chart/population-pyramid)
- [Percentage Stacked Bar Chart](https://visactor.io/vchart/demo/bar-chart/stack-percentage-bar)
- [Group histogram interval](https://visactor.io/vchart/demo/bar-chart/group-bar-with-padding)
- [Spacing adjustment within grouped bars](https://visactor.io/vchart/demo/bar-chart/group-bar-with-barGapInGroup)
- [Bar Chart with Background](https://visactor.io/vchart/demo/bar-chart/bar-background)
- [Bar Chart with functional label position](https://visactor.io/vchart/demo/bar-chart/bar-functional-label-position)
- [Bar Chart with MarkPoint](https://visactor.io/vchart/demo/bar-chart/bar-markPoint)
- [TGI Bar Chart](https://visactor.io/vchart/demo/bar-chart/tgi-bar)
- [Bar Chart with Customized Label](https://visactor.io/vchart/demo/bar-chart/bar-customized-label)
- [Axis Break Column Chart](https://visactor.io/vchart/demo/bar-chart/bar-break-by-axis)
- [Basic Histogram](https://visactor.io/vchart/demo/histogram-chart/histogram-basis)
- [Histogram with Different Bin Ranges](https://visactor.io/vchart/demo/histogram-chart/histogram-different-bin)
- [Stacked Histogram](https://visactor.io/vchart/demo/histogram-chart/histogram-stack)
- [Horizontal Stacked Histogram](https://visactor.io/vchart/demo/histogram-chart/histogram-stack-h)
- [Range Bar Chart](https://visactor.io/vchart/demo/range-column-chart/range-bar)
- [Range Column Chart](https://visactor.io/vchart/demo/range-column-chart/range-column)
- [Basic Box Plot](https://visactor.io/vchart/demo/box-plot/basic-box-plot)
- [Grouped Box Plot](https://visactor.io/vchart/demo/box-plot/grouped-box-plot)
- [Box Plot Style](https://visactor.io/vchart/demo/box-plot/box-plot-style)
- [Basic Pie Chart](https://visactor.io/vchart/demo/pie-chart/basic-pie)
- [Nested Pie Chart](https://visactor.io/vchart/demo/pie-chart/nested-pie)
- [Pie Chart with Indicator Card](https://visactor.io/vchart/demo/pie-chart/pie-indicator)
- [Pie Chart Indicator Fit Strategy](https://visactor.io/vchart/demo/pie-chart/pie-indicator-fitstrategy)
- [Pie Chart Label Layout](https://visactor.io/vchart/demo/pie-chart/pie-label)
- [Radius mappable pie chart](https://visactor.io/vchart/demo/pie-chart/radius-scale-pie)
- [Ring Chart](https://visactor.io/vchart/demo/pie-chart/ring)
- [Linear Gradient Color Pie Chart](https://visactor.io/vchart/demo/pie-chart/linear-color-pie)
- [Customized legend interaction of pie chart](https://visactor.io/vchart/demo/pie-chart/customized-legend-pie)
- [Auto-wrap richtext label in pie chart](https://visactor.io/vchart/demo/pie-chart/richtext-autowrap)
- [Auto-ellipsis richtext label in pie chart](https://visactor.io/vchart/demo/pie-chart/richtext-autoEllipsis)
- [Basic Rose Chart](https://visactor.io/vchart/demo/rose-chart/basic-rose)
- [Grouped Rose Chart](https://visactor.io/vchart/demo/rose-chart/rose-grouped)
- [Stacked Rose Chart](https://visactor.io/vchart/demo/rose-chart/rose-stacked)
- [Grouped Stacked Rose Chart](https://visactor.io/vchart/demo/rose-chart/rose-stacked-group)
- [Basic Funnel Chart](https://visactor.io/vchart/demo/funnel-chart/basic-funnel)
- [Custom Funnel Chart](https://visactor.io/vchart/demo/funnel-chart/custom-funnel)
- [Rectangular Conversion Funnel Chart](https://visactor.io/vchart/demo/funnel-chart/rect-funnel)
- [Conversion Funnel Chart](https://visactor.io/vchart/demo/funnel-chart/transform-funnel)
- [Custom Annotation in Funnel Chart](https://visactor.io/vchart/demo/funnel-chart/funnel-custom-annotation)
- [Funnel Conversion Arrows via CustomMarks](https://visactor.io/vchart/demo/funnel-chart/funnel-template)
- [Comparative Funnel Template](https://visactor.io/vchart/demo/funnel-chart/comparative-funnel-template)
- [Extension Chart - Conversion Funnel](https://visactor.io/vchart/demo/funnel-chart/conversion-funnel)
- [Basic Scatter Chart](https://visactor.io/vchart/demo/scatter-chart/basic-scatter)
- [Bubble Scatter Chart](https://visactor.io/vchart/demo/scatter-chart/bubble-scatter)
- [Jitter Scatter Plot](https://visactor.io/vchart/demo/scatter-chart/jitter-scatter)
- [One-Dimensional Scatter Chart](https://visactor.io/vchart/demo/scatter-chart/one-dimension-scatter)
- [Stacked Scatter Plot](https://visactor.io/vchart/demo/scatter-chart/stack-scatter)
- [Scatter Chart of different shape](https://visactor.io/vchart/demo/scatter-chart/scatter-shape)
- [Basic Radar Chart](https://visactor.io/vchart/demo/radar-chart/basic-radar)
- [Grouped Radar Chart](https://visactor.io/vchart/demo/radar-chart/multiple-radar)
- [Hollow Radar Chart](https://visactor.io/vchart/demo/radar-chart/radar-with-innerRadius)
- [Percentage Stacked Radar Chart](https://visactor.io/vchart/demo/radar-chart/stack-percent-radar)
- [Stacked Radar Chart](https://visactor.io/vchart/demo/radar-chart/stack-radar)
- [Basic Map](https://visactor.io/vchart/demo/map-chart/basic-map)
- [Scatter Map](https://visactor.io/vchart/demo/map-chart/scatter-map)
- [Map With Flying Lines](https://visactor.io/vchart/demo/map-chart/map-with-flying-lines)
- [Basic Sankey Chart](https://visactor.io/vchart/demo/sankey-chart/basic-sankey)
- [Vertical Sankey Chart](https://visactor.io/vchart/demo/sankey-chart/direction-sankey)
- [Node Left Aligned Sankey Chart](https://visactor.io/vchart/demo/sankey-chart/align-nodes-left-sankey)
- [Hierarchical Sankey Chart](https://visactor.io/vchart/demo/sankey-chart/hierarchical-sankey)
- [Interactive Sankey Diagram](https://visactor.io/vchart/demo/sankey-chart/interection-sankey)
- [Another Data Format for Sankey Charts](https://visactor.io/vchart/demo/sankey-chart/another-data-structure-sankey)
- [Sankey Diagram Multiple Edge Configurations](https://visactor.io/vchart/demo/sankey-chart/nameKey-sankey)
- [Specify size of node in sankey chart](https://visactor.io/vchart/demo/sankey-chart/specified-node)
- [set customized node of html in sankey chart](https://visactor.io/vchart/demo/sankey-chart/customized-node)
- [Sankey Diagram with Scrollbar](https://visactor.io/vchart/demo/sankey-chart/sankey-with-scrollbar)
- [Social Media Seuqnce Chart](https://visactor.io/vchart/demo/sequence-chart/social-media-event)
- [NBA Sequence Chart](https://visactor.io/vchart/demo/sequence-chart/NBA-player-event)
- [Basic Word Cloud Chart](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-basic)
- [Word Cloud Text Clipping](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-clip)
- [Word Cloud Auto-fit to Canvas](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-enlarge)
- [Word Cloud Text Formatting](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-format)
- [Word Cloud without Size Field Configuration](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-no-valueField)
- [Word Cloud with Random Angle](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-rotate)
- [Word Cloud Text Scaling](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shrink)
- [Shape Word Cloud](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shape-basis)
- [Shape Word Cloud Custom Color](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shape-custom-color)
- [Shape Word Cloud with Random Rotation Angles](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shape-rotate)
- [Text outline Word Cloud](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shape-text)
- [geometric outline Word Cloud](https://visactor.io/vchart/demo/word-cloud-chart/word-cloud-shape-geometry)
- [Basic Gauge Chart](https://visactor.io/vchart/demo/gauge-chart/basic-gauge)
- [Clock Example](https://visactor.io/vchart/demo/gauge-chart/clock)
- [Gradient Gauge Chart](https://visactor.io/vchart/demo/gauge-chart/gauge-gradient)
- [Gauge Chart with CircularProgress Series](https://visactor.io/vchart/demo/gauge-chart/gauge-progress)
- [Gauge Chart with Gauge Series](https://visactor.io/vchart/demo/gauge-chart/gauge-segment)
- [Gauge Chart with Tick Mask](https://visactor.io/vchart/demo/gauge-chart/gauge-progress-tick)
- [Segmented Gauge Chart with Tick Mask](https://visactor.io/vchart/demo/gauge-chart/gauge-segment-tick)
- [Gauge Chart with Segment Ticks and Target Value](https://visactor.io/vchart/demo/gauge-chart/gauge-segment-custom-tick)
- [Gauge Chart with Track Mark](https://visactor.io/vchart/demo/gauge-chart/gauge-track)
- [Linear Progress Chart](https://visactor.io/vchart/demo/progress/linear-progress)
- [Segmented Linear Progress Chart](https://visactor.io/vchart/demo/progress/segment-linear-progress)
- [Linear Progress Chart with text](https://visactor.io/vchart/demo/progress/linear-progress-with-text)
- [Linear Progress Chart with Multiple Labels](https://visactor.io/vchart/demo/progress/linear-progress-with-multi-label)
- [Linear Progress Chart with Target Value](https://visactor.io/vchart/demo/progress/linear-progress-with-target-value)
- [Circular Progress Chart](https://visactor.io/vchart/demo/progress/circular-progress)
- [Circular Progress Chart with text](https://visactor.io/vchart/demo/progress/circular-progress-with-text)
- [Circular Progress Chart with Tick Mask](https://visactor.io/vchart/demo/progress/circular-progress-tick)
- [Basic Rectangle Treemap](https://visactor.io/vchart/demo/treemap-chart/basic-treemap)
- [Treemap Displaying Parent Level](https://visactor.io/vchart/demo/treemap-chart/treemap-show-parent-level)
- [Basic Waterfall Chart](https://visactor.io/vchart/demo/waterfall/basic-waterfall)
- [Decomposition Waterfall Chart](https://visactor.io/vchart/demo/waterfall/collect-waterfall)
- [Horizontal Waterfall Chart](https://visactor.io/vchart/demo/waterfall/direction-waterfall)
- [Stacked Waterfall Chart](https://visactor.io/vchart/demo/waterfall/stack-waterfall)
- [Basic Heatmap](https://visactor.io/vchart/demo/heatmap-chart/basic-heatmap)
- [Basic CirclePacking Chart](https://visactor.io/vchart/demo/circle-packing-chart/basic-circle-packing)
- [Multi-root CirclePacking Chart](https://visactor.io/vchart/demo/circle-packing-chart/circle-packing-multiple-roots)
- [CirclePacking Chart with Padding](https://visactor.io/vchart/demo/circle-packing-chart/circle-packing-padding)
- [Bubble CirclePacking Chart](https://visactor.io/vchart/demo/circle-packing-chart/bubble-circle-packing)
- [Basic Sunburst Chart](https://visactor.io/vchart/demo/sunburst-chart/basic-sunburst)
- [Sunburst - Hiding Dense Labels](https://visactor.io/vchart/demo/sunburst-chart/sunburst-auto-label)
- [Sunburst Layout](https://visactor.io/vchart/demo/sunburst-chart/sunburst-layout)
- [Correlation Chart](https://visactor.io/vchart/demo/correlation-chart/correlation-chart)
- [Liquid Chart](https://visactor.io/vchart/demo/liquid-chart/liquid-chart)
- [Liquid Chart Shape](https://visactor.io/vchart/demo/liquid-chart/liquid-chart-shape)
- [Liquid Chart Background](https://visactor.io/vchart/demo/liquid-chart/liquid-chart-background)
- [Liquid Chart Smart Invert](https://visactor.io/vchart/demo/liquid-chart/liquid-chart-smart-invert)
- [Liquid Chart Reverse](https://visactor.io/vchart/demo/liquid-chart/liquid-chart-reverse)
- [Liquid Chart Target](https://visactor.io/vchart/demo/liquid-chart/liquid-chart-target)
- [Venn Chart](https://visactor.io/vchart/demo/venn-chart/venn-chart)
- [Hollow Venn Chart](https://visactor.io/vchart/demo/venn-chart/venn-chart-hollow)
- [Basic mosaic chart](https://visactor.io/vchart/demo/mosaic-chart/basic-mosaic)
- [simple mosaic chart](https://visactor.io/vchart/demo/mosaic-chart/simple-mosaic)
- [group mosaic chart](https://visactor.io/vchart/demo/mosaic-chart/group-mosaic)
- [Cat Stroking For Beginners](https://visactor.io/vchart/demo/pictogram-chart/pictogram-cat)
- [SVG Tickets Seat Map](https://visactor.io/vchart/demo/pictogram-chart/pictogram-seat-map)
- [SVG Beef Cuts](https://visactor.io/vchart/demo/pictogram-chart/pictogram-cow)
- [SVG Keyboard](https://visactor.io/vchart/demo/pictogram-chart/pictogram-keyboard)
- [SVG Motion Path Animation](https://visactor.io/vchart/demo/pictogram-chart/pictogram-route)
- [Shopping Mall Tenant Layout](https://visactor.io/vchart/demo/pictogram-chart/pictogram-mall)
- [Custom Multi-Row Multi-Column Layout in Combination Charts](https://visactor.io/vchart/demo/combination/bar-combine)
- [Combination Chart with Single Column](https://visactor.io/vchart/demo/combination/col-line)
- [Multi-region Pie Chart](https://visactor.io/vchart/demo/combination/col-pie)
- [Dual Axis Chart](https://visactor.io/vchart/demo/combination/dual-axis)
- [Easing Functions Visualization](https://visactor.io/vchart/demo/combination/easing-visualization)
- [Line-Pie Combination Chart](https://visactor.io/vchart/demo/combination/line-pie)
- [Combination Chart in Polar Coordinate System](https://visactor.io/vchart/demo/combination/polar-combine)
- [Custom Single Row Multi-Column Layout for Combination Charts](https://visactor.io/vchart/demo/combination/scatter-combine)
- [Basic Combination Chart](https://visactor.io/vchart/demo/combination/single-region)
- [Bar-Line Combination Chart With UnNormal Axis](https://visactor.io/vchart/demo/combination/bar-line)
- [Bar series in common chart supports autoBandSize](https://visactor.io/vchart/demo/combination/bar-autoBandSize)
- [Pivot Chart](https://visactor.io/vchart/demo/pivot-chart/pivot-chart)
- [Pivot Chart Pie](https://visactor.io/vchart/demo/pivot-chart/pivot-chart-pie)
- [Pivot Chart Radar](https://visactor.io/vchart/demo/pivot-chart/pivot-chart-radar)
- [Pivot Chart Scatter](https://visactor.io/vchart/demo/pivot-chart/pivot-chart-scatter)
- [Pivot Chart Word Cloud](https://visactor.io/vchart/demo/pivot-chart/pivot-chart-wordCloud)
- [Gantt Basic](https://visactor.io/vchart/demo/gantt/gantt-basic)
- [Gantt Custom Layout](https://visactor.io/vchart/demo/gantt/gantt-customLayout)
- [Gantt Edit](https://visactor.io/vchart/demo/gantt/gantt-edit)
- [Gantt Dependency Link Line](https://visactor.io/vchart/demo/gantt/gantt-dependency-link-line)
- [Create Dependency Link Line](https://visactor.io/vchart/demo/gantt/gantt-dependency-link-create)
- [Gantt Interaction —— Drag Table Width](https://visactor.io/vchart/demo/gantt/gantt-interaction-drag-table-width)
- [Gantt Interaction —— Drag TaskBar](https://visactor.io/vchart/demo/gantt/gantt-interaction-drag-taskBar)
- [Gantt Interaction —— Create Schedule](https://visactor.io/vchart/demo/gantt/gantt-interaction-creation-button)
- [Gantt Subtask Show Mode](https://visactor.io/vchart/demo/gantt/gantt-taskShowMode)
- [Gantt Task Merge Cell](https://visactor.io/vchart/demo/gantt/gantt-table-mergeCell)
- [Calendar Basic](https://visactor.io/vchart/demo/calendar/calendar-basic)
- [Calendar Custom Event](https://visactor.io/vchart/demo/calendar/calendar-custom-event)
- [3D面积图](https://visactor.io/vchart/demo/chart-3d/area3d)
- [3D Base Bar Chart](https://visactor.io/vchart/demo/chart-3d/bar3d)
- [3D Basic Funnel Chart](https://visactor.io/vchart/demo/chart-3d/funnel3d)
- [3D 折线图](https://visactor.io/vchart/demo/chart-3d/line3d)
- [3D Basic Pie Chart](https://visactor.io/vchart/demo/chart-3d/pie3d)
- [3D Scatter Chart](https://visactor.io/vchart/demo/chart-3d/scatter3d)
- [3D Shape Word Cloud](https://visactor.io/vchart/demo/chart-3d/wordcloud3d)
- [Basic Title](https://visactor.io/vchart/demo/title/basic-title)
- [Rich Text Title](https://visactor.io/vchart/demo/title/richText-title)
- [Customize Style Title](https://visactor.io/vchart/demo/title/style-title)
- [Sub-ticks and Sub-grid lines](https://visactor.io/vchart/demo/axis/subtick-and-subgrid)
- [General Style Configuration](https://visactor.io/vchart/demo/axis/style)
- [Grid Line Fill](https://visactor.io/vchart/demo/axis/grid-style)
- [Polar Axis Configuration](https://visactor.io/vchart/demo/axis/polar)
- [Domain locate at zero](https://visactor.io/vchart/demo/axis/on-zero)
- [Axis Inversion](https://visactor.io/vchart/demo/axis/inverse)
- [Axis Interaction](https://visactor.io/vchart/demo/axis/interactive)
- [Log axis](https://visactor.io/vchart/demo/axis/log-axis)
- [symlog axis](https://visactor.io/vchart/demo/axis/symlog-axis)
- [Axis Animation](https://visactor.io/vchart/demo/axis/animation)
- [Overall alignment of axis labels](https://visactor.io/vchart/demo/axis/label-container-align)
- [Turn off axis label sampling & dataFilter](https://visactor.io/vchart/demo/axis/disable-sampling)
- [Axis label flush](https://visactor.io/vchart/demo/axis/flush)
- [Axis label autoHide](https://visactor.io/vchart/demo/axis/axis-label-autoHide)
- [Axis label autoRotate](https://visactor.io/vchart/demo/axis/axis-label-autoRotate)
- [Axis label autoLimit](https://visactor.io/vchart/demo/axis/axis-label-autoLimit)
- [Axis label autoWrap](https://visactor.io/vchart/demo/axis/axis-label-autoWrap)
- [Axis label autoHide and autoRotate](https://visactor.io/vchart/demo/axis/axis-label-autoHide-and-autoRotate)
- [Axis tick sync](https://visactor.io/vchart/demo/axis/axis-sync)
- [Axis fixed bandSize and auto scroll bar](https://visactor.io/vchart/demo/axis/axis-band-size)
- [Axis label with vertical direction](https://visactor.io/vchart/demo/axis/axis-vertical-label)
- [Multi-level axes](https://visactor.io/vchart/demo/axis/multiple-layers-of-axis)
- [Multi-level axes](https://visactor.io/vchart/demo/axis/multiple-layers-of-axis-1)
- [Axis Richtext Label](https://visactor.io/vchart/demo/axis/axis-richtext-label)
- [Axis Break](https://visactor.io/vchart/demo/axis/axis-break)
- [Axis InnerOffset](https://visactor.io/vchart/demo/axis/axis-inner-offset)
- [Custom tooltip style](https://visactor.io/vchart/demo/tooltip/custom-tooltip)
- [Custom Tooltip Content Row](https://visactor.io/vchart/demo/tooltip/custom-mark-tooltip)
- [Custom tooltip handler](https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler)
- [Tooltip Custom Formatting](https://visactor.io/vchart/demo/tooltip/format-method)
- [Enterable Tooltip](https://visactor.io/vchart/demo/tooltip/enterable-tooltip)
- [Dimension Tooltip On Time Axis](https://visactor.io/vchart/demo/tooltip/time-axis-tooltip)
- [Mark Tooltip On Area Marks](https://visactor.io/vchart/demo/tooltip/area-mark-tooltip)
- [Group Tooltip On Bar Marks](https://visactor.io/vchart/demo/tooltip/bar-group-tooltip)
- [Group Tooltip On Line Marks](https://visactor.io/vchart/demo/tooltip/line-group-tooltip)
- [Single Selection Mode](https://visactor.io/vchart/demo/legend/single-select)
- [Focus Mode](https://visactor.io/vchart/demo/legend/focus)
- [Legend Displayed Inside the Chart](https://visactor.io/vchart/demo/legend/float)
- [Multiple Legends/Mixed Legends](https://visactor.io/vchart/demo/legend/multiple-legends)
- [Continuous Legend](https://visactor.io/vchart/demo/legend/continuous)
- [Custom Legend Item](https://visactor.io/vchart/demo/legend/custom-data)
- [Custom Legend Interaction](https://visactor.io/vchart/demo/legend/custom-interaction)
- [Tiled Legend Items](https://visactor.io/vchart/demo/legend/custom-line-legend)
- [Custom Legend UI](https://visactor.io/vchart/demo/legend/custom-ui)
- [Scrollbar of legend](https://visactor.io/vchart/demo/legend/scrollbar)
- [specify scale of discrete legend](https://visactor.io/vchart/demo/legend/discrete-legend-scale)
- [Auxiliary Line](https://visactor.io/vchart/demo/crosshair/line)
- [Rectangular Crosshair](https://visactor.io/vchart/demo/crosshair/rect)
- [Crosshair of Radar Chart](https://visactor.io/vchart/demo/crosshair/polar-line)
- [Rose Chart Crosshair](https://visactor.io/vchart/demo/crosshair/polar-rect)
- [Combined chart crosshair](https://visactor.io/vchart/demo/crosshair/multiple-region)
- [Define initial range in data form with thumbnail axis](https://visactor.io/vchart/demo/data-zoom/state-with-data)
- [Axis Zoom Mode](https://visactor.io/vchart/demo/data-zoom/filter-mode-axis)
- [Thumbnail Axis Controls Polar Chart](https://visactor.io/vchart/demo/data-zoom/data-zoom-polar)
- [Thumbnail Axis Preview Chart Style Configuration](https://visactor.io/vchart/demo/data-zoom/preview-data)
- [Datazoom Supports ZoomLock](https://visactor.io/vchart/demo/data-zoom/data-zoom-lock)
- [datazoom supports config maximum and minimum range](https://visactor.io/vchart/demo/data-zoom/data-zoom-span)
- [datazoom supports big data](https://visactor.io/vchart/demo/data-zoom/data-zoom-big-data)
- [Basic Usage of scrollBar](https://visactor.io/vchart/demo/scrollbar/basic-scrollbar-bar-chart)
- [scrollBar Controls Axis Range](https://visactor.io/vchart/demo/scrollbar/scrollbar-line-chart)
- [Vertical scrollBar](https://visactor.io/vchart/demo/scrollbar/scrollbar-specified-value)
- [ScrollBar Supports Zoom and Drag](https://visactor.io/vchart/demo/scrollbar/roam-drag-zoom)
- [ScrollBar Supports Roam Scroll](https://visactor.io/vchart/demo/scrollbar/roam-scroll)
- [Basic Player](https://visactor.io/vchart/demo/player/basic-player)
- [Continuous Player](https://visactor.io/vchart/demo/player/continuous-player)
- [Irregular Rectangle Selection](https://visactor.io/vchart/demo/brush/polygon-brush)
- [Rect Linked Brush](https://visactor.io/vchart/demo/brush/rect-linked-brush)
- [Horizontal Selection Box](https://visactor.io/vchart/demo/brush/x-linked-brush)
- [Selection Control Scale](https://visactor.io/vchart/demo/brush/brush-datazoom)
- [markLine](https://visactor.io/vchart/demo/marker/mark-line-basic)
- [markLine support color with series](https://visactor.io/vchart/demo/marker/mark-line-color-with-series)
- [markLine supports custom label background path](https://visactor.io/vchart/demo/marker/mark-line-custom-label-back)
- [markLine Axis Space Positioning](https://visactor.io/vchart/demo/marker/mark-line-axis)
- [markLine Data Highlighting](https://visactor.io/vchart/demo/marker/mark-line-coordinates)
- [markLine Specifying Data Points and Calculating Linear Regression](https://visactor.io/vchart/demo/marker/mark-line-part-regression)
- [markLine Specifying Related Series Data Points](https://visactor.io/vchart/demo/marker/mark-line-ref-series)
- [multi mark lines](https://visactor.io/vchart/demo/marker/mark-line-multi)
- [markArea](https://visactor.io/vchart/demo/marker/mark-area-basic)
- [markArea Axis Space and Data Point Positioning](https://visactor.io/vchart/demo/marker/mark-area-multi)
- [markArea Quadrant Chart Simulation](https://visactor.io/vchart/demo/marker/mark-area-quadrant)
- [markArea with label](https://visactor.io/vchart/demo/marker/mark-area-with-label)
- [markArea to mark range](https://visactor.io/vchart/demo/marker/mark-area-range)
- [markPoint Data Point Positioning](https://visactor.io/vchart/demo/marker/mark-point-basic)
- [markLine Total-Diff annotation](https://visactor.io/vchart/demo/marker/mark-line-total-diff)
- [markLine CAGR annotation](https://visactor.io/vchart/demo/marker/mark-line-CAGR)
- [markLine hierarchy-diff annotation](https://visactor.io/vchart/demo/marker/mark-line-hierarchy-diff)
- [markPoint with image](https://visactor.io/vchart/demo/marker/mark-point-image)
- [markLine and label position in certesian coordinates](https://visactor.io/vchart/demo/marker/cartesian-mark-line-pos)
- [markLine in polar coordinates](https://visactor.io/vchart/demo/marker/polar-mark-line)
- [markLine and label position in polar coordinates](https://visactor.io/vchart/demo/marker/polar-mark-line-pos)
- [markArea and label position in certesian coordinates](https://visactor.io/vchart/demo/marker/cartesian-mark-area-pos)
- [markArea and label position in polar coordinates](https://visactor.io/vchart/demo/marker/polar-mark-area-pos)
- [markPoint in polar coordinates](https://visactor.io/vchart/demo/marker/polar-mark-point)
- [markPoint in geo coordinates](https://visactor.io/vchart/demo/marker/geo-mark-point)
- [Draw trend line using MarkLine](https://visactor.io/vchart/demo/marker/trend-line)
- [Basic Data Usage](https://visactor.io/vchart/demo/data/basic-data)
- [Data Alias](https://visactor.io/vchart/demo/data/data-fields-alias)
- [Data Filtering By Domain](https://visactor.io/vchart/demo/data/data-fields-domain)
- [Data Sorting](https://visactor.io/vchart/demo/data/data-fields-sort)
- [Data Filtering](https://visactor.io/vchart/demo/data/data-filter)
- [Bar Chart Labels](https://visactor.io/vchart/demo/label/bar-label)
- [Bar Chart Label State](https://visactor.io/vchart/demo/label/bar-label-syncState)
- [Line Chart Labels](https://visactor.io/vchart/demo/label/line-label)
- [Combination Chart Labels](https://visactor.io/vchart/demo/label/combination-chart-label)
- [Label Formatter](https://visactor.io/vchart/demo/label/label-formatter)
- [RichText Label](https://visactor.io/vchart/demo/label/richtext-label)
- [Enable mark tooltip triggered by label](https://visactor.io/vchart/demo/label/label-mark-tooltip)
- [Custom Layout](https://visactor.io/vchart/demo/layout/custom-layout)
- [Row and Column Layout](https://visactor.io/vchart/demo/layout/grid-layout)
- [Row and Column Layout](https://visactor.io/vchart/demo/layout/align-self)
- [Gradient Line Chart](https://visactor.io/vchart/demo/gradient/line)
- [Gradient Color - Height Gradient](https://visactor.io/vchart/demo/gradient/bar)
- [Gradient Area Chart](https://visactor.io/vchart/demo/gradient/area)
- [Gradient Bubble Chart](https://visactor.io/vchart/demo/gradient/scatter)
- [Gradient Color - Color Segmentation on Mobile](https://visactor.io/vchart/demo/gradient/enhancement-gradient-line)
- [Theme Registration and Switching](https://visactor.io/vchart/demo/theme/theme-switch)
- [Different Style of Theme Registration and Switching](https://visactor.io/vchart/demo/theme/theme-style)
- [Custom Mark](https://visactor.io/vchart/demo/custom/mark)
- [Custom Symbol Mark](https://visactor.io/vchart/demo/custom/series-extension)
- [Pie Extension Mark](https://visactor.io/vchart/demo/custom/pie-extension)
- [Custom Shape](https://visactor.io/vchart/demo/custom/custom-shape)
- [image in bar chart](https://visactor.io/vchart/demo/custom/bar-image-extension)
- [pie and bar](https://visactor.io/vchart/demo/custom/pie-extend-bars)
- [Custom State Sorting](https://visactor.io/vchart/demo/custom/state-sort)
- [Render html in custom rect](https://visactor.io/vchart/demo/custom/rect-html)
- [Business Funnel(Simulated with Bar)](https://visactor.io/vchart/demo/custom/business-funnel)
- [Pie Extension Icon](https://visactor.io/vchart/demo/custom/pie-extension-icon)
- [Grouped Bar Chart with Textures](https://visactor.io/vchart/demo/pattern/accessible-column)
- [Pie Chart with Texture](https://visactor.io/vchart/demo/pattern/accessible-pie)
- [Dual Axis Chart Element Activation](https://visactor.io/vchart/demo/interaction/element-active)
- [Area Chart Element Highlight](https://visactor.io/vchart/demo/interaction/area-chart-element-highlight)
- [Pie Chart Multiple Select](https://visactor.io/vchart/demo/interaction/pie-chart-multiple-select)
- [Element Highlight by Group](https://visactor.io/vchart/demo/interaction/line-chart-element-highlight-by-group)
- [Legend Trigger Series Highlight](https://visactor.io/vchart/demo/interaction/highlight-by-legend)
- [ombination Chart Highlight by Key](https://visactor.io/vchart/demo/interaction/combination-chart-highlight-by-key)
- [Legend Trigger Pie Chart Sector Activation](https://visactor.io/vchart/demo/interaction/pie-chart-active-by-legend)
- [Axis Label Trigger Highlight](https://visactor.io/vchart/demo/interaction/rose-chart-highlight-by-name)

## API

- [VChart](https://visactor.io/vchart/api/API/vchart)
- [Event](https://visactor.io/vchart/api/API/event)
- [Theme](https://visactor.io/vchart/api/API/theme)
- [Function](https://visactor.io/vchart/api/API/function)

## FAQ

- [1- Does the tooltip support changing the background color](https://visactor.io/vchart/faq/1- Does the tooltip support changing the background color)
- [2-How can I customize the display of fields in data in Tooltip in VChart](https://visactor.io/vchart/faq/2-How can I customize the display of fields in data in Tooltip in VChart)
- [3- How to solve the issue of line chart bifurcation after combining with stacked line and bidirectional bar charts](https://visactor.io/vchart/faq/3- How to solve the issue of line chart bifurcation after combining with stacked line and bidirectional bar charts)
- [4-The time interval of the coordinate axis scale is given](https://visactor.io/vchart/faq/4-The time interval of the coordinate axis scale is given)
- [5- How to position the chart on the far left of the canvas](https://visactor.io/vchart/faq/5- How to position the chart on the far left of the canvas)
- [6- How to export charts as images](https://visactor.io/vchart/faq/6- How to export charts as images)
- [7- How to draw combination charts in React](https://visactor.io/vchart/faq/7- How to draw combination charts in React)
- [8- Does the tooltip support custom two-line display content](https://visactor.io/vchart/faq/8- Does the tooltip support custom two-line display content)
- [9- How to display 'sum' in the tooltip of a line chart](https://visactor.io/vchart/faq/9- How to display 'sum' in the tooltip of a line chart)
- [10- How to change the color of the legend](https://visactor.io/vchart/faq/10- How to change the color of the legend)
- [11- How to display a color block area within a specified x-axis range in the chart](https://visactor.io/vchart/faq/11- How to display a color block area within a specified x-axis range in the chart)
- [12- How to set grid lines on VChart axes to dashed lines](https://visactor.io/vchart/faq/12- How to set grid lines on VChart axes to dashed lines)
- [13-How does the label of the auxiliary line automatically change lines](https://visactor.io/vchart/faq/13-How does the label of the auxiliary line automatically change lines)
- [14-How to customize the label text content, color, and layout of a pie chart](https://visactor.io/vchart/faq/14-How to customize the label text content, color, and layout of a pie chart)
- [15- How to implement line breaks in pie chart labels](https://visactor.io/vchart/faq/15- How to implement line breaks in pie chart labels)
- [16-How to achieve permanent display of chart tooltips](https://visactor.io/vchart/faq/16-How to achieve permanent display of chart tooltips)
- [17- How to use tooltips and the x-axis in the vchart library](https://visactor.io/vchart/faq/17- How to use tooltips and the x-axis in the vchart library)
- [18-How to truncate, wrap, or perform other formatting effects on axis labels in charts](https://visactor.io/vchart/faq/18-How to truncate, wrap, or perform other formatting effects on axis labels in charts)
- [19-How to configure gradient colors for area charts](https://visactor.io/vchart/faq/19-How to configure gradient colors for area charts)
- [20- How to add graphics to axis labels](https://visactor.io/vchart/faq/20- How to add graphics to axis labels)
- [21- How to adjust the display order of contents in the Tooltip of a VChart stacked bar chart](https://visactor.io/vchart/faq/21- How to adjust the display order of contents in the Tooltip of a VChart stacked bar chart)
- [22- How to center the labels in a bar chart](https://visactor.io/vchart/faq/22- How to center the labels in a bar chart)
- [23- How to customize legend shapes](https://visactor.io/vchart/faq/23- How to customize legend shapes)
- [24- How to configure a custom theme in VChart](https://visactor.io/vchart/faq/24- How to configure a custom theme in VChart)
- [25- How to listen to DataZoom operations](https://visactor.io/vchart/faq/25- How to listen to DataZoom operations)
- [26- How to render axis labels using HTML](https://visactor.io/vchart/faq/26- How to render axis labels using HTML)
- [27-How to customize the mounting node of the tooltip component in VChart](https://visactor.io/vchart/faq/27-How to customize the mounting node of the tooltip component in VChart)
- [28- How to configure a correlation scatterplot in VChart](https://visactor.io/vchart/faq/28- How to configure a correlation scatterplot in VChart)
- [29- How to control layout spacing of charts and components within the chart](https://visactor.io/vchart/faq/29- How to control layout spacing of charts and components within the chart)
- [30-How to add prompt information to the legend](https://visactor.io/vchart/faq/30-How to add prompt information to the legend)
- [31- Can VChart be server-side rendered](https://visactor.io/vchart/faq/31- Can VChart be server-side rendered)
- [32- How to configure the points in a line chart to be sparser in vchart](https://visactor.io/vchart/faq/32- How to configure the points in a line chart to be sparser in vchart)
- [33-How to customize the tooltip display content in a dual axis chart](https://visactor.io/vchart/faq/33-How to customize the tooltip display content in a dual axis chart)
- [34- How to left-align bar chart labels and keep the style consistent](https://visactor.io/vchart/faq/34- How to left-align bar chart labels and keep the style consistent)
- [35- How to disable chart interaction](https://visactor.io/vchart/faq/35- How to disable chart interaction)
- [36-How to configure a DataZoom component in a chart that can be used on a mobile device](https://visactor.io/vchart/faq/36-How to configure a DataZoom component in a chart that can be used on a mobile device)
- [37-When the data is all 0, how to configure the position of the x-axis](https://visactor.io/vchart/faq/37-When the data is all 0, how to configure the position of the x-axis)
- [38-How does the label at the center of the ring chart adapt to the size of the ring](https://visactor.io/vchart/faq/38-How does the label at the center of the ring chart adapt to the size of the ring)
- [39-How to customize the length of the pie chart guide line](https://visactor.io/vchart/faq/39-How to customize the length of the pie chart guide line)
- [41- Does the line chart support setting background colors based on Y-axis segments](https://visactor.io/vchart/faq/41- Does the line chart support setting background colors based on Y-axis segments)
- [42-How can VChart set the number of display bars for Tooltip, and support effects such as scrolling, pagination, and merged display when there is too much data](https://visactor.io/vchart/faq/42-How can VChart set the number of display bars for Tooltip, and support effects such as scrolling, pagination, and merged display when there is too much data)
- [43- Does the thumbnail axis handle shape support SVG](https://visactor.io/vchart/faq/43- Does the thumbnail axis handle shape support SVG)
- [44-How to customize the image and color of a legend](https://visactor.io/vchart/faq/44-How to customize the image and color of a legend)
- [45-How to control the display order of stacking and legends and add display of total information on the tooltip](https://visactor.io/vchart/faq/45-How to control the display order of stacking and legends and add display of total information on the tooltip)
- [46- How to display all words in a word cloud on a small canvas](https://visactor.io/vchart/faq/46- How to display all words in a word cloud on a small canvas)
- [47- How to configure tooltip and legend shapes as rounded rectangles](https://visactor.io/vchart/faq/47- How to configure tooltip and legend shapes as rounded rectangles)
- [48-How to customize the position and offset of the tooltip in the chart](https://visactor.io/vchart/faq/48-How to customize the position and offset of the tooltip in the chart)
- [49- How to configure the hierarchy in a combination chart](https://visactor.io/vchart/faq/49- How to configure the hierarchy in a combination chart)
- [50- How to adjust the layer order of lines in a line chart](https://visactor.io/vchart/faq/50- How to adjust the layer order of lines in a line chart)
- [51-How to use charts libraries in React](https://visactor.io/vchart/faq/51-How to use charts libraries in React)
- [52- Can the legend shape be set to a rectangle](https://visactor.io/vchart/faq/52- Can the legend shape be set to a rectangle)
- [53- How to configure axis unit display on the axes of a line chart](https://visactor.io/vchart/faq/53- How to configure axis unit display on the axes of a line chart)
- [54- How to configure the outer border of graphical elements when hovering on a bar chart](https://visactor.io/vchart/faq/54- How to configure the outer border of graphical elements when hovering on a bar chart)
- [55- How to modify the marker graphic of tooltip content items](https://visactor.io/vchart/faq/55- How to modify the marker graphic of tooltip content items)
- [56- How to set the bar width in a bar chart in VChart](https://visactor.io/vchart/faq/56- How to set the bar width in a bar chart in VChart)
- [57-When listening to events at the Chart level, is it possible to get the type of element that was clicked via the event parameter, similar to the target parameter in dom](https://visactor.io/vchart/faq/57-When listening to events at the Chart level, is it possible to get the type of element that was clicked via the event parameter, similar to the target parameter in dom)
- [58- How to clear the selection in the onbrushEnd event when using vchart](https://visactor.io/vchart/faq/58- How to clear the selection in the onbrushEnd event when using vchart)
- [59- What are the methods for formatting chart labels in VChart](https://visactor.io/vchart/faq/59- What are the methods for formatting chart labels in VChart)
- [60- How to configure the size of a pie chart in VChart](https://visactor.io/vchart/faq/60- How to configure the size of a pie chart in VChart)
- [61-How to generate a simplified mini line chart](https://visactor.io/vchart/faq/61-How to generate a simplified mini line chart)
- [62-How to achieve reverse y-axis effect](https://visactor.io/vchart/faq/62-How to achieve reverse y-axis effect)
- [63-How to configure the range of the axis](https://visactor.io/vchart/faq/63-How to configure the range of the axis)
- [64-How to display the center value when selecting an arc in a pie chart](https://visactor.io/vchart/faq/64-How to display the center value when selecting an arc in a pie chart)
- [65- How to prevent displaying abbreviated tooltips when custom tooltips are already set](https://visactor.io/vchart/faq/65- How to prevent displaying abbreviated tooltips when custom tooltips are already set)
- [66-How do I customize the position of the tooltip to avoid occlusion](https://visactor.io/vchart/faq/66-How do I customize the position of the tooltip to avoid occlusion)
- [67- How to set the axis width in VChart](https://visactor.io/vchart/faq/67- How to set the axis width in VChart)
- [68- Is there a way to deselect all line chart contents currently set to display by default (e.g., a button to hide all)](https://visactor.io/vchart/faq/68- Is there a way to deselect all line chart contents currently set to display by default (e.g., a button to hide all))
- [69- How to select only the current item when clicking a legend](https://visactor.io/vchart/faq/69- How to select only the current item when clicking a legend)
- [70-How can line and bar charts be displayed at the same time](https://visactor.io/vchart/faq/70-How can line and bar charts be displayed at the same time)
- [71- Does the tree map support configuring the style when hovering](https://visactor.io/vchart/faq/71- Does the tree map support configuring the style when hovering)
- [72-How to set column width in bar chart](https://visactor.io/vchart/faq/72-How to set column width in bar chart)
- [73- In the vchart library, why does the area chart's Y-axis display lower values higher](https://visactor.io/vchart/faq/73- In the vchart library, why does the area chart's Y-axis display lower values higher)
- [74- How to adjust bar spacing in a bar chart](https://visactor.io/vchart/faq/74- How to adjust bar spacing in a bar chart)
- [75-How to display the legend title and legend with left-right separation in the same row](https://visactor.io/vchart/faq/75-How to display the legend title and legend with left-right separation in the same row)
- [76-How do I set the scrollbars for the common chart](https://visactor.io/vchart/faq/76-How do I set the scrollbars for the common chart)
- [77-How to customize the display text content of the funnel chart](https://visactor.io/vchart/faq/77-How to customize the display text content of the funnel chart)
- [78-How do I configure the default scroll position for chart scrollbars](https://visactor.io/vchart/faq/78-How do I configure the default scroll position for chart scrollbars)
- [79- How to achieve coordinated display of positions in other charts when moving the mouse in the vchart library](https://visactor.io/vchart/faq/79- How to achieve coordinated display of positions in other charts when moving the mouse in the vchart library)
- [80-How can the background color of the funnel chart's conversion layers be modified](https://visactor.io/vchart/faq/80-How can the background color of the funnel chart's conversion layers be modified)
- [81- How to solve the issue of the upper area chart obscuring the lower point chart in a combo chart](https://visactor.io/vchart/faq/81- How to solve the issue of the upper area chart obscuring the lower point chart in a combo chart)
- [82-How to use chart components in Taro](https://visactor.io/vchart/faq/82-How to use chart components in Taro)
- [83-How to Customize Colors for Different Series in Dual-Axis Chart](https://visactor.io/vchart/faq/83-How to Customize Colors for Different Series in Dual-Axis Chart)
- [84- How to configure the style of legend pager arrows in VChart](https://visactor.io/vchart/faq/84- How to configure the style of legend pager arrows in VChart)
- [85-How to display scales at several points on the x-axis of an area chart](https://visactor.io/vchart/faq/85-How to display scales at several points on the x-axis of an area chart)
- [86- How to emphasize a specific point in a vchart line chart](https://visactor.io/vchart/faq/86- How to emphasize a specific point in a vchart line chart)
- [87- How to handle incomplete label display in VChart pie charts](https://visactor.io/vchart/faq/87- How to handle incomplete label display in VChart pie charts)
- [88- How to customize pie chart labels](https://visactor.io/vchart/faq/88- How to customize pie chart labels)
- [89- How to retrieve all data of the same dimension as the clicked bar in a stacked bar chart](https://visactor.io/vchart/faq/89- How to retrieve all data of the same dimension as the clicked bar in a stacked bar chart)
- [90-How can VChart achieve a profile effect similar to ECharts](https://visactor.io/vchart/faq/90-How can VChart achieve a profile effect similar to ECharts)
- [91- How to add custom items to a tooltip](https://visactor.io/vchart/faq/91- How to add custom items to a tooltip)
- [92- How to set a segment of a dashed line in a line chart](https://visactor.io/vchart/faq/92- How to set a segment of a dashed line in a line chart)
- [93-How to set the style of the line segments in a line chart, such as dashed at the end](https://visactor.io/vchart/faq/93-How to set the style of the line segments in a line chart, such as dashed at the end)
- [94- How to set the background width during bar chart interaction](https://visactor.io/vchart/faq/94- How to set the background width during bar chart interaction)
- [95- How to achieve edge-aligned x-axis labels in a trend chart](https://visactor.io/vchart/faq/95- How to achieve edge-aligned x-axis labels in a trend chart)
- [96-How to display the complete information of the legend when hovering](https://visactor.io/vchart/faq/96-How to display the complete information of the legend when hovering)
- [97-How to use chart library in mini program](https://visactor.io/vchart/faq/97-How to use chart library in mini program)
- [98- How to customize legends in React](https://visactor.io/vchart/faq/98- How to customize legends in React)
- [99- Can a line chart be segmented](https://visactor.io/vchart/faq/99- Can a line chart be segmented)
- [100-How can Tooltip achieve multi column display in VChart](https://visactor.io/vchart/faq/100-How can Tooltip achieve multi column display in VChart)
- [101- How to configure nested pie charts in VChart](https://visactor.io/vchart/faq/101- How to configure nested pie charts in VChart)
- [102-How to automatically update chart data in React components](https://visactor.io/vchart/faq/102-How to automatically update chart data in React components)
- [103-How to change the hover display content when the mouse is moved into the chart area](https://visactor.io/vchart/faq/103-How to change the hover display content when the mouse is moved into the chart area)
- [104- Issues with x-axis data overlapping and y-axis data not displaying when using the vchart library](https://visactor.io/vchart/faq/104- Issues with x-axis data overlapping and y-axis data not displaying when using the vchart library)
- [105- How to customize Tooltip shapes](https://visactor.io/vchart/faq/105- How to customize Tooltip shapes)
- [106- How to set a default selection for a sector in a VChart pie chart](https://visactor.io/vchart/faq/106- How to set a default selection for a sector in a VChart pie chart)
- [107-How can we still make data points respond to hover events without displaying point graphics in area chart](https://visactor.io/vchart/faq/107-How can we still make data points respond to hover events without displaying point graphics in area chart)
- [108-How to configure the axis scale alignment of a two-axis graph](https://visactor.io/vchart/faq/108-How to configure the axis scale alignment of a two-axis graph)
- [109-How to implement a combination of line chart and stacked bar chart](https://visactor.io/vchart/faq/109-How to implement a combination of line chart and stacked bar chart)
- [110-How to customize pointer style in a gauge chart](https://visactor.io/vchart/faq/110-How to customize pointer style in a gauge chart)
- [111- How to sort x-axis labels in a combination chart](https://visactor.io/vchart/faq/111- How to sort x-axis labels in a combination chart)
- [112-How to add transition animations when clicking the legend of a funnel chart](https://visactor.io/vchart/faq/112-How to add transition animations when clicking the legend of a funnel chart)
- [113- How to change bar width in a bar chart](https://visactor.io/vchart/faq/113- How to change bar width in a bar chart)
- [114-How to add a title and subtitle to a chart in VChart](https://visactor.io/vchart/faq/114-How to add a title and subtitle to a chart in VChart)
- [115-How to modify the text color of the percentage of the funnel chart](https://visactor.io/vchart/faq/115-How to modify the text color of the percentage of the funnel chart)
- [116-How to add background color to the bottom of ring chart when it is set with gaps](https://visactor.io/vchart/faq/116-How to add background color to the bottom of ring chart when it is set with gaps)
- [117-How to modify the style of the legend element when the mouse is hovering over the legend](https://visactor.io/vchart/faq/117-How to modify the style of the legend element when the mouse is hovering over the legend)
- [118- How to implement point hover effects in the vchart library](https://visactor.io/vchart/faq/118- How to implement point hover effects in the vchart library)
- [119- How to bind click events to pie chart labels](https://visactor.io/vchart/faq/119- How to bind click events to pie chart labels)
- [120- How to set an adaptive y-axis range in a line chart](https://visactor.io/vchart/faq/120- How to set an adaptive y-axis range in a line chart)
- [121- How to customize the rich text axis label style in radar charts](https://visactor.io/vchart/faq/121- How to customize the rich text axis label style in radar charts)
- [122-How to customize the theme for a chart](https://visactor.io/vchart/faq/122-How to customize the theme for a chart)
- [123-Can we add a horizontal line for the average value to the data](https://visactor.io/vchart/faq/123-Can we add a horizontal line for the average value to the data)
- [124-Is there an API on the mini program that prompts the location of data points when touching the screen with your finger](https://visactor.io/vchart/faq/124-Is there an API on the mini program that prompts the location of data points when touching the screen with your finger)
- [125- How to make the word cloud fully fill the outer container](https://visactor.io/vchart/faq/125- How to make the word cloud fully fill the outer container)
- [126- Line chart in combo chart is obscured, preventing tooltip hover](https://visactor.io/vchart/faq/126- Line chart in combo chart is obscured, preventing tooltip hover)
- [127- How to set the x and y axis labels and bar size in vchart bar charts](https://visactor.io/vchart/faq/127- How to set the x and y axis labels and bar size in vchart bar charts)
- [128- How to achieve overlap of bar chart data in the same dimension rather than stacking](https://visactor.io/vchart/faq/128- How to achieve overlap of bar chart data in the same dimension rather than stacking)
- [129-How to customize Tooltip in dual axis chart](https://visactor.io/vchart/faq/129-How to customize Tooltip in dual axis chart)
- [130-How to configure the colors of different line segments in a line chart](https://visactor.io/vchart/faq/130-How to configure the colors of different line segments in a line chart)
- [131- Can the tick range of a continuous axis be configured to closely match the data range](https://visactor.io/vchart/faq/131- Can the tick range of a continuous axis be configured to closely match the data range)
- [132- How to customize slice colors in VChart pie charts](https://visactor.io/vchart/faq/132- How to customize slice colors in VChart pie charts)
- [133-How to control the display order of discrete legends](https://visactor.io/vchart/faq/133-How to control the display order of discrete legends)
- [134-How does the Ring with Indicator Card dynamically update indicator values](https://visactor.io/vchart/faq/134-How does the Ring with Indicator Card dynamically update indicator values)
- [135-How to customize the colors of bars based on values in a bar chart](https://visactor.io/vchart/faq/135-How to customize the colors of bars based on values in a bar chart)
- [136- How to prevent the stroke from being obscured when hovering over pie chart sectors](https://visactor.io/vchart/faq/136- How to prevent the stroke from being obscured when hovering over pie chart sectors)
- [137- Does the bar chart support setting colors for individual columns](https://visactor.io/vchart/faq/137- Does the bar chart support setting colors for individual columns)
- [138-How to customize the font size of words in Word Cloud Chart](https://visactor.io/vchart/faq/138-How to customize the font size of words in Word Cloud Chart)
- [139-How to configure chart adaptive container width and height](https://visactor.io/vchart/faq/139-How to configure chart adaptive container width and height)
- [140- How to configure the highlight effect in a Sankey diagram](https://visactor.io/vchart/faq/140- How to configure the highlight effect in a Sankey diagram)
- [141- How to draw a multi-row layout line chart](https://visactor.io/vchart/faq/141- How to draw a multi-row layout line chart)
- [142- How to add tracking points in VChart based on Tooltip behavior](https://visactor.io/vchart/faq/142- How to add tracking points in VChart based on Tooltip behavior)
- [143- How to set the maximum number of labels on the X and Y axes](https://visactor.io/vchart/faq/143- How to set the maximum number of labels on the X and Y axes)
- [144- How does the tooltip layer support the display of total data](https://visactor.io/vchart/faq/144- How does the tooltip layer support the display of total data)
- [145- How to show the full content of abbreviated text when hovering with the mouse](https://visactor.io/vchart/faq/145- How to show the full content of abbreviated text when hovering with the mouse)
- [146-How to configure the transform width of the funnel chart](https://visactor.io/vchart/faq/146-How to configure the transform width of the funnel chart)
- [147-How to achieve background segmentation and rounded corner effect in a gauge chart](https://visactor.io/vchart/faq/147-How to achieve background segmentation and rounded corner effect in a gauge chart)
- [148-How to configure horizontal scrollbars when there is too much data in a bar chart in an applet](https://visactor.io/vchart/faq/148-How to configure horizontal scrollbars when there is too much data in a bar chart in an applet)
- [149- How to obtain the relative position of the brush in the coordinate system in the vchart library](https://visactor.io/vchart/faq/149- How to obtain the relative position of the brush in the coordinate system in the vchart library)
- [150- How to format axis labels](https://visactor.io/vchart/faq/150- How to format axis labels)
- [151-How does the legend component limit the width of the graph](https://visactor.io/vchart/faq/151-How does the legend component limit the width of the graph)
- [152- How to display labels on multiple lines](https://visactor.io/vchart/faq/152- How to display labels on multiple lines)
- [153- How to sort data by specified fields](https://visactor.io/vchart/faq/153- How to sort data by specified fields)
- [154- Segmented display of bar progress chart](https://visactor.io/vchart/faq/154- Segmented display of bar progress chart)
- [155- How to adjust the spacing between axis labels in vchart](https://visactor.io/vchart/faq/155- How to adjust the spacing between axis labels in vchart)
- [156- How to assign different colors to multiple lines in a line chart](https://visactor.io/vchart/faq/156- How to assign different colors to multiple lines in a line chart)
- [157- How to individually configure legend styles and change graphic shapes in VChart](https://visactor.io/vchart/faq/157- How to individually configure legend styles and change graphic shapes in VChart)
- [158- How to configure the hover state of graphical elements](https://visactor.io/vchart/faq/158- How to configure the hover state of graphical elements)
- [159-How to configure Tooltip to automatically wrap text](https://visactor.io/vchart/faq/159-How to configure Tooltip to automatically wrap text)
- [160-How to disable the default interactive behavior of legends](https://visactor.io/vchart/faq/160-How to disable the default interactive behavior of legends)
- [161-How to customize the axis label display spacing](https://visactor.io/vchart/faq/161-How to customize the axis label display spacing)
- [162-How to define the mapping relationship of the axes for the combination of line chart and stacked column chart](https://visactor.io/vchart/faq/162-How to define the mapping relationship of the axes for the combination of line chart and stacked column chart)
- [163- How to limit the number of lines in a Tooltip](https://visactor.io/vchart/faq/163- How to limit the number of lines in a Tooltip)
- [164-How to use vchart to display charts in Notebook](https://visactor.io/vchart/faq/164-How to use vchart to display charts in Notebook)
- [165-How to configure the default selection effect of the legend component](https://visactor.io/vchart/faq/165-How to configure the default selection effect of the legend component)
- [166- Does VChart's multi-group bar chart support multi-layer axis labels](https://visactor.io/vchart/faq/166- Does VChart's multi-group bar chart support multi-layer axis labels)
- [167-How to combine percentage bar and TGI chart](https://visactor.io/vchart/faq/167-How to combine percentage bar and TGI chart)
- [168-How do I set up some lines to follow the left axis, while the others follow the right axis in a line chart](https://visactor.io/vchart/faq/168-How do I set up some lines to follow the left axis, while the others follow the right axis in a line chart)
- [169-How to set the order of the chart tooltip display content](https://visactor.io/vchart/faq/169-How to set the order of the chart tooltip display content)
- [170- How to set different colors for each bar in a bar chart](https://visactor.io/vchart/faq/170- How to set different colors for each bar in a bar chart)
- [171- How to achieve multi-group bar charts and highlight interactions based on grouping dimensions](https://visactor.io/vchart/faq/171- How to achieve multi-group bar charts and highlight interactions based on grouping dimensions)
- [172- Can the bar series listen to event callbacks](https://visactor.io/vchart/faq/172- Can the bar series listen to event callbacks)
- [173- How to remove axis tick values](https://visactor.io/vchart/faq/173- How to remove axis tick values)
- [174-How to achieve a bar chart similar to the stacked column chart](https://visactor.io/vchart/faq/174-How to achieve a bar chart similar to the stacked column chart)
- [175-How to define the number of decimal places of a value displayed by a label in VChart](https://visactor.io/vchart/faq/175-How to define the number of decimal places of a value displayed by a label in VChart)
- [176-How to listen to the click event of the histogram to customize the style of the column](https://visactor.io/vchart/faq/176-How to listen to the click event of the histogram to customize the style of the column)
- [177-How to get the data point information in a click event using react-vchart](https://visactor.io/vchart/faq/177-How to get the data point information in a click event using react-vchart)
- [178- How to set different fill colors based on groups in a radar chart](https://visactor.io/vchart/faq/178- How to set different fill colors based on groups in a radar chart)
- [179- Bar chart value labels aligned to the right display](https://visactor.io/vchart/faq/179- Bar chart value labels aligned to the right display)
- [180-How to use charts libraries in Vue](https://visactor.io/vchart/faq/180-How to use charts libraries in Vue)
- [181- How to format the tooltip in a VChart radar chart](https://visactor.io/vchart/faq/181- How to format the tooltip in a VChart radar chart)
- [182- How to assign different colors to a line in VChart](https://visactor.io/vchart/faq/182- How to assign different colors to a line in VChart)
- [183- Can the unit of the y-axis be configured without a function](https://visactor.io/vchart/faq/183- Can the unit of the y-axis be configured without a function)
- [184-How to customize the shape and text style of the legend](https://visactor.io/vchart/faq/184-How to customize the shape and text style of the legend)
- [185- How to set the title font size to semi's heading-4 in vchart](https://visactor.io/vchart/faq/185- How to set the title font size to semi's heading-4 in vchart)
- [186- How to add custom content to the bottom of a tooltip card in vChart](https://visactor.io/vchart/faq/186- How to add custom content to the bottom of a tooltip card in vChart)
- [187- How to listen to events on data dimensions and retrieve corresponding data](https://visactor.io/vchart/faq/187- How to listen to events on data dimensions and retrieve corresponding data)
- [188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles](https://visactor.io/vchart/faq/188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles)
- [189-How to customize the axis scale value of a gauge chart](https://visactor.io/vchart/faq/189-How to customize the axis scale value of a gauge chart)
- [190- How to draw a dual-axis chart](https://visactor.io/vchart/faq/190- How to draw a dual-axis chart)
- [191-How to customize the position of gauge indicator in VChart](https://visactor.io/vchart/faq/191-How to customize the position of gauge indicator in VChart)
- [192-How can I customize colors based on data values in a map chart](https://visactor.io/vchart/faq/192-How can I customize colors based on data values in a map chart)
- [193-How to clear charts and data](https://visactor.io/vchart/faq/193-How to clear charts and data)
- [194-How to customize the text content of the legend](https://visactor.io/vchart/faq/194-How to customize the text content of the legend)
- [195- How to display all labels on the x-axis](https://visactor.io/vchart/faq/195- How to display all labels on the x-axis)
- [196-How to customize legend shapes](https://visactor.io/vchart/faq/196-How to customize legend shapes)
- [197- How to configure animations in VChart combination charts](https://visactor.io/vchart/faq/197- How to configure animations in VChart combination charts)
- [198- How to set the shape type of Legend and Tooltip in VChart line charts](https://visactor.io/vchart/faq/198- How to set the shape type of Legend and Tooltip in VChart line charts)
- [199-Can users click on data points within the VChart to show a list of actions](https://visactor.io/vchart/faq/199-Can users click on data points within the VChart to show a list of actions)
- [200-When hovering over a donut chart, how to configure the style of donut chart](https://visactor.io/vchart/faq/200-When hovering over a donut chart, how to configure the style of donut chart)
- [201-How to configure the scope of the crosshair auxiliary line](https://visactor.io/vchart/faq/201-How to configure the scope of the crosshair auxiliary line)
- [202- Does VChart support setting graphical elements to the selected state](https://visactor.io/vchart/faq/202- Does VChart support setting graphical elements to the selected state)
- [203- How to limit the width of tooltip content](https://visactor.io/vchart/faq/203- How to limit the width of tooltip content)
- [204-How to set the color and transparency of individual words inside the word cloud based on their values](https://visactor.io/vchart/faq/204-How to set the color and transparency of individual words inside the word cloud based on their values)
- [205-How can chart tooltips be configured to display dimensions and measures as single or multiple rows](https://visactor.io/vchart/faq/205-How can chart tooltips be configured to display dimensions and measures as single or multiple rows)
- [206- Can vchart multi-line charts limit the default rendered lines](https://visactor.io/vchart/faq/206- Can vchart multi-line charts limit the default rendered lines)
- [207- How to trigger chart tooltips on mobile devices](https://visactor.io/vchart/faq/207- How to trigger chart tooltips on mobile devices)
- [208-How to configure the position of the markLine text label, can it be configured to display at the starting point, end point or in the middle of the line segment](https://visactor.io/vchart/faq/208-How to configure the position of the markLine text label, can it be configured to display at the starting point, end point or in the middle of the line segment)
- [209- Can the tip displayed above an overly long label when hovering be configured to change background and text colors](https://visactor.io/vchart/faq/209- Can the tip displayed above an overly long label when hovering be configured to change background and text colors)
- [210- How to set the time interval in a timeline](https://visactor.io/vchart/faq/210- How to set the time interval in a timeline)
- [211-How to configure it to ignore part of the display content](https://visactor.io/vchart/faq/211-How to configure it to ignore part of the display content)
- [212- What are the methods for data sampling in VChart charts](https://visactor.io/vchart/faq/212- What are the methods for data sampling in VChart charts)

## Change Log

- [release](https://visactor.io/vchart/changelog/release)

## Contributing

- [1-Setting-Up-the-Development-Environment](https://visactor.io/vchart/contributing/1-Setting-Up-the-Development-Environment)
- [2-Howto Submit an Issue](https://visactor.io/vchart/contributing/2-Howto Submit an Issue)
- [3-How to Contribute Documentation](https://visactor.io/vchart/contributing/3-How to Contribute Documentation)
- [4-How to Contribute to a Demo](https://visactor.io/vchart/contributing/4-How to Contribute to a Demo)
- [5-How to Contribute Code](https://visactor.io/vchart/contributing/5-How to Contribute Code)
- [6-How to upload images](https://visactor.io/vchart/contributing/6-How to upload images)

# VGrammar

## Tutorials

- [website-guide](https://visactor.io/vgrammar/guide/guides/website-guide)
- [quick-start](https://visactor.io/vgrammar/guide/guides/quick-start)
- [grammar-element](https://visactor.io/vgrammar/guide/guides/grammar-element)
- [base](https://visactor.io/vgrammar/guide/guides/marks/base)
- [basic-mark](https://visactor.io/vgrammar/guide/guides/marks/basic-mark)
- [semantic-mark](https://visactor.io/vgrammar/guide/guides/marks/semantic-mark)
- [glyph-mark](https://visactor.io/vgrammar/guide/guides/marks/glyph-mark)
- [component](https://visactor.io/vgrammar/guide/guides/marks/component)
- [chart](https://visactor.io/vgrammar/guide/guides/chart)
- [event](https://visactor.io/vgrammar/guide/guides/event)
- [layout](https://visactor.io/vgrammar/guide/guides/layout)
- [animation](https://visactor.io/vgrammar/guide/guides/animation)
- [advanced-guide](https://visactor.io/vgrammar/guide/guides/advanced-guide)
- [react](https://visactor.io/vgrammar/guide/guides/developer/react)
- [vue](https://visactor.io/vgrammar/guide/guides/developer/vue)

## Chart Demos

- [Basic Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/basic-rect)
- [Range Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/range-rect)
- [Bi-directional Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/bi-direction-rect)
- [Stacked Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/stack-rect)
- [Percentage Stacked Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/percent-rect)
- [Customized Shape for Bar Chart](https://visactor.io/vgrammar/demo/basic-mark-rect/customized-shape)
- [Create Bar Chart with API Mode](https://visactor.io/vgrammar/demo/basic-mark-rect/api-rect)
- [Symmetry rect](https://visactor.io/vgrammar/demo/basic-mark-rect/symmetry-rect)
- [Basic Line Chart](https://visactor.io/vgrammar/demo/basic-mark-line/basic-line)
- [Segmented Curve](https://visactor.io/vgrammar/demo/basic-mark-line/segmental-line)
- [Log Axis Line Chart](https://visactor.io/vgrammar/demo/basic-mark-line/log-line)
- [Archimedean Spiral](https://visactor.io/vgrammar/demo/basic-mark-line/spiral)
- [Connect nulls of line](https://visactor.io/vgrammar/demo/basic-mark-line/connect-nulls-line)
- [Connect nulls of segments](https://visactor.io/vgrammar/demo/basic-mark-line/connect-nulls-segments)
- [Basic Area Chart](https://visactor.io/vgrammar/demo/basic-mark-area/basic-area)
- [Stacked Area Chart](https://visactor.io/vgrammar/demo/basic-mark-area/stack-area)
- [Percentage Area Chart](https://visactor.io/vgrammar/demo/basic-mark-area/percent-area)
- [Vertical Area Chart](https://visactor.io/vgrammar/demo/basic-mark-area/vertical-area)
- [区间面积图](https://visactor.io/vgrammar/demo/basic-mark-area/intersection)
- [Connect nulls of area](https://visactor.io/vgrammar/demo/basic-mark-area/connect-nulls-area)
- [Connect nulls of segments area](https://visactor.io/vgrammar/demo/basic-mark-area/connect-nulls-segments-area)
- [Donut Chart](https://visactor.io/vgrammar/demo/basic-mark-arc/basic-arc)
- [Progress Bar](https://visactor.io/vgrammar/demo/basic-mark-arc/progress-arc)
- [Radial Arc Graph](https://visactor.io/vgrammar/demo/basic-mark-arc/radial-arc)
- [Pie Chart](https://visactor.io/vgrammar/demo/basic-mark-arc/simple-pie)
- [Basic Scatter Plot](https://visactor.io/vgrammar/demo/basic-mark-symbol/basic-symbol)
- [Bubble Chart](https://visactor.io/vgrammar/demo/basic-mark-symbol/bubble)
- [Jitter points](https://visactor.io/vgrammar/demo/basic-mark-symbol/jitter-symbol)
- [Basic Rule Usage](https://visactor.io/vgrammar/demo/basic-mark-rule/basic-rule)
- [Rule Shape Display](https://visactor.io/vgrammar/demo/basic-mark-rule/rule-symbol)
- [Funnel Chart](https://visactor.io/vgrammar/demo/basic-mark-polygon/basic-polygon)
- [Conversion Funnel Chart](https://visactor.io/vgrammar/demo/basic-mark-polygon/flow-funnel)
- [Polygon Intersection](https://visactor.io/vgrammar/demo/basic-mark-polygon/polygon-intersect)
- [Correlation Chart](https://visactor.io/vgrammar/demo/basic-mark-circle/relation-circle)
- [Correlation Chart in top half circle](https://visactor.io/vgrammar/demo/basic-mark-circle/relation-circle-top)
- [Correlation Chart in right half circle](https://visactor.io/vgrammar/demo/basic-mark-circle/relation-circle-right)
- [Basic Usage of text Element](https://visactor.io/vgrammar/demo/basic-mark-text/basic-text)
- [Basic Usage of richtext](https://visactor.io/vgrammar/demo/basic-mark-richtext/basic-richtext)
- [Image Element](https://visactor.io/vgrammar/demo/basic-mark-image/basic-image)
- [Heatmap](https://visactor.io/vgrammar/demo/mark-cell/basic-cell)
- [Calendar Heatmap](https://visactor.io/vgrammar/demo/mark-cell/calender-cell)
- [Bar Chart](https://visactor.io/vgrammar/demo/mark-interval/basic-interval)
- [Bar Chart](https://visactor.io/vgrammar/demo/mark-interval/basic-bar)
- [Polar Bar Chart](https://visactor.io/vgrammar/demo/mark-interval/polar-interval)
- [Polar Coordinate Bar Chart](https://visactor.io/vgrammar/demo/mark-interval/radial-interval)
- [Symmetric bar](https://visactor.io/vgrammar/demo/mark-interval/bar-symmetry)
- [Grouped symmetric bar](https://visactor.io/vgrammar/demo/mark-interval/bar-symmetry-group)
- [Boxplot](https://visactor.io/vgrammar/demo/glyph-mark/boxplot)
- [Horizontal Boxplot](https://visactor.io/vgrammar/demo/glyph-mark/horizontal-boxplot)
- [Boxplot in Polar Coordinates](https://visactor.io/vgrammar/demo/glyph-mark/polar-boxplot)
- [Bar Boxplot](https://visactor.io/vgrammar/demo/glyph-mark/bar-boxplot)
- [Ripple Point Line Chart](https://visactor.io/vgrammar/demo/glyph-mark/ripple)
- [Water Wave Chart](https://visactor.io/vgrammar/demo/glyph-mark/wave)
- [Sankey Diagram](https://visactor.io/vgrammar/demo/glyph-mark/link-path)
- [Candlestick Chart](https://visactor.io/vgrammar/demo/glyph-mark/candle)
- [小提琴图](https://visactor.io/vgrammar/demo/glyph-mark/violin)
- [rect3d Primitive](https://visactor.io/vgrammar/demo/3d-mark/rect3d)
- [3d arc Graphic Element](https://visactor.io/vgrammar/demo/3d-mark/arc3d)
- [pyramid3d Primitive](https://visactor.io/vgrammar/demo/3d-mark/pyramid3d)
- [legend](https://visactor.io/vgrammar/demo/component/legend)
- [Player](https://visactor.io/vgrammar/demo/component/player)
- [DataZoom](https://visactor.io/vgrammar/demo/component/dataZoom)
- [Bar Chart Labels](https://visactor.io/vgrammar/demo/component/label)
- [Slider](https://visactor.io/vgrammar/demo/component/slider)
- [Basic Animation](https://visactor.io/vgrammar/demo/animate/basic-animate)
- [Loop Animation](https://visactor.io/vgrammar/demo/animate/loop-animate)
- [Morph Animation](https://visactor.io/vgrammar/demo/animate/morph-animate)
- [Custom Animation](https://visactor.io/vgrammar/demo/animate/custom-animate)
- [Animation Arrangement](https://visactor.io/vgrammar/demo/animate/arrange-animate)
- [Timeline & Animation](https://visactor.io/vgrammar/demo/animate/timeline)
- [Circle Packing Chart](https://visactor.io/vgrammar/demo/hierarchy/circlepacking)
- [Sunburst Chart](https://visactor.io/vgrammar/demo/hierarchy/sunburst)
- [Tree Chart](https://visactor.io/vgrammar/demo/hierarchy/tree)
- [Sunburst Chart](https://visactor.io/vgrammar/demo/hierarchy/treemap)
- [Large Data Volume Line Chart](https://visactor.io/vgrammar/demo/performance/progressive-line)
- [Large Data Volume Bar Chart](https://visactor.io/vgrammar/demo/performance/progressive-rect)
- [数值轴线图](https://visactor.io/vgrammar/demo/plot/connected-scatter-line)
- [发散颜色散点图](https://visactor.io/vgrammar/demo/plot/plot-diverging-color-point)
- [基础线图](https://visactor.io/vgrammar/demo/plot/plot-line)
- [堆积散点图](https://visactor.io/vgrammar/demo/plot/plot-stack-point)
- [点、线组合图](https://visactor.io/vgrammar/demo/plot/plot-symbol-rule)
- [不同形状的散点图](https://visactor.io/vgrammar/demo/plot/plot-symbol)
- [Sankey Diagram](https://visactor.io/vgrammar/demo/sankey/basic-sankey)
- [Word Cloud](https://visactor.io/vgrammar/demo/wordcloud/basic-wordcloud)
- [Shape Word Cloud](https://visactor.io/vgrammar/demo/wordcloud-shape/basic-wordcloud-shape)

## API

- [View](https://visactor.io/vgrammar/api/API/View)
- [Signal](https://visactor.io/vgrammar/api/API/Signal)
- [Data](https://visactor.io/vgrammar/api/API/Data)
- [Scale](https://visactor.io/vgrammar/api/API/Scale)
- [Coordinate](https://visactor.io/vgrammar/api/API/Coordinate)
- [Mark](https://visactor.io/vgrammar/api/API/Mark)
- [GroupMark](https://visactor.io/vgrammar/api/API/GroupMark)
- [GlyphMark](https://visactor.io/vgrammar/api/API/GlyphMark)
- [Component](https://visactor.io/vgrammar/api/API/Component)
- [Projection](https://visactor.io/vgrammar/api/API/Projection)

# VTable

## Tutorials

- [VTable introduction](https://visactor.io/vtable/guide/introduction)
- [The structure of the table](https://visactor.io/vtable/guide/Getting_Started/The_structure_of_the_table)
- [Getting_Started](https://visactor.io/vtable/guide/Getting_Started/Getting_Started)
- [AI tools help](https://visactor.io/vtable/guide/Getting_Started/AI_tools_help)
- [Contribution Guide](https://visactor.io/vtable/guide/Contribution_Guide)
- [List table overview](https://visactor.io/vtable/guide/table_type/List_table/List_table_overview)
- [list table define and generate](https://visactor.io/vtable/guide/table_type/List_table/list_table_define_and_generate)
- [list table transpose](https://visactor.io/vtable/guide/table_type/List_table/list_table_transpose)
- [tree list](https://visactor.io/vtable/guide/table_type/List_table/tree_list)
- [group list](https://visactor.io/vtable/guide/table_type/List_table/group_list)
- [pivot table overview](https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_overview)
- [pivot table useage](https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_useage)
- [pivot analysis](https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_dataAnalysis)
- [pivot table tree show](https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_tree)
- [pivot table gird&tree show](https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_grid_tree)
- [pivot table custom header](https://visactor.io/vtable/guide/table_type/Pivot_table/custom_header)
- [pivot chart](https://visactor.io/vtable/guide/table_type/pivot_chart)
- [Getting Started](https://visactor.io/vtable/guide/gantt/Getting_Started)
- [gantt introduction](https://visactor.io/vtable/guide/gantt/introduction)
- [Custom Render](https://visactor.io/vtable/guide/gantt/gantt_customLayout)
- [Gantt Edit](https://visactor.io/vtable/guide/gantt/gantt_edit)
- [Subtask Layout](https://visactor.io/vtable/guide/gantt/subtask_layout)
- [Getting Started](https://visactor.io/vtable/guide/calendar/Getting_Started)
- [calendar introduction](https://visactor.io/vtable/guide/calendar/introduction)
- [calendar custom layout](https://visactor.io/vtable/guide/calendar/calendar_custom_layout)
- [cellType](https://visactor.io/vtable/guide/cell_type/cellType)
- [text](https://visactor.io/vtable/guide/cell_type/text)
- [link](https://visactor.io/vtable/guide/cell_type/link)
- [image video](https://visactor.io/vtable/guide/cell_type/image_video)
- [progressbar](https://visactor.io/vtable/guide/cell_type/progressbar)
- [checkbox](https://visactor.io/vtable/guide/cell_type/checkbox)
- [radio](https://visactor.io/vtable/guide/cell_type/radio)
- [sparkline](https://visactor.io/vtable/guide/cell_type/sparkline)
- [chart](https://visactor.io/vtable/guide/cell_type/chart)
- [update option](https://visactor.io/vtable/guide/basic_function/update_option)
- [sort In ListTable](https://visactor.io/vtable/guide/basic_function/sort/list_sort)
- [sort In PivotTable](https://visactor.io/vtable/guide/basic_function/sort/pivot_sort)
- [frozen column & row](https://visactor.io/vtable/guide/basic_function/frozen_column_row)
- [row height column width](https://visactor.io/vtable/guide/basic_function/row_height_column_width)
- [auto wrap text](https://visactor.io/vtable/guide/basic_function/auto_wrap_text)
- [cell merge](https://visactor.io/vtable/guide/basic_function/merge_cell)
- [row series number](https://visactor.io/vtable/guide/basic_function/row_series_number)
- [theme](https://visactor.io/vtable/guide/theme_and_style/theme)
- [style](https://visactor.io/vtable/guide/theme_and_style/style)
- [select](https://visactor.io/vtable/guide/interaction/select)
- [hover_cell](https://visactor.io/vtable/guide/interaction/hover_cell)
- [resize column width](https://visactor.io/vtable/guide/interaction/resize_column_width)
- [drag header](https://visactor.io/vtable/guide/interaction/drag_header)
- [scroll](https://visactor.io/vtable/guide/interaction/scroll)
- [appear animationt](https://visactor.io/vtable/guide/animation/appear_animation)
- [scroll animationt](https://visactor.io/vtable/guide/animation/scroll_animation)
- [carousel animationt](https://visactor.io/vtable/guide/animation/carousel_animation)
- [event list](https://visactor.io/vtable/guide/Event/event_list)
- [Shortcut](https://visactor.io/vtable/guide/shortcut)
- [custom icon](https://visactor.io/vtable/guide/custom_define/custom_icon)
- [custom render(JSX)](https://visactor.io/vtable/guide/custom_define/custom_layout)
- [React Custom Component](https://visactor.io/vtable/guide/custom_define/react-custom-component)
- [Vue Custom Component](https://visactor.io/vtable/guide/custom_define/vue-custom-component)
- [custom render](https://visactor.io/vtable/guide/custom_define/custom_render)
- [custom interactive component](https://visactor.io/vtable/guide/custom_define/custom_component)
- [custom merge](https://visactor.io/vtable/guide/custom_define/custom_merge)
- [custom style](https://visactor.io/vtable/guide/custom_define/custom_style)
- [edit cell](https://visactor.io/vtable/guide/edit/edit_cell)
- [fill handle](https://visactor.io/vtable/guide/edit/fill_handle)
- [records](https://visactor.io/vtable/guide/data/data_format)
- [async lazy load data](https://visactor.io/vtable/guide/data/async_data)
- [pivot table data analysis](https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis)
- [list table data analysis](https://visactor.io/vtable/guide/data_analysis/list_table_dataAnalysis)
- [tooltip](https://visactor.io/vtable/guide/components/tooltip)
- [dropdown](https://visactor.io/vtable/guide/components/dropdown)
- [title](https://visactor.io/vtable/guide/components/title)
- [legend](https://visactor.io/vtable/guide/components/legend)
- [axes](https://visactor.io/vtable/guide/components/axes)
- [Load on Demand](https://visactor.io/vtable/guide/Load_on_Demand)
- [search](https://visactor.io/vtable/guide/search)
- [csv](https://visactor.io/vtable/guide/export/csv)
- [excel](https://visactor.io/vtable/guide/export/excel)
- [Invert Highlight](https://visactor.io/vtable/guide/plugin/invert-highlight)
- [Header Highlight](https://visactor.io/vtable/guide/plugin/header-highlight)
- [React-VTable](https://visactor.io/vtable/guide/Developer_Ecology/react)
- [Openinula-VTable](https://visactor.io/vtable/guide/Developer_Ecology/openinula)
- [Vue-VTable](https://visactor.io/vtable/guide/Developer_Ecology/vue)
- [NodeJS Server-Side Rendering](https://visactor.io/vtable/guide/Developer_Ecology/node)
- [multi-language support](https://visactor.io/vtable/guide/multi_language_support)

## Table Demos

- [100W data performance display](https://visactor.io/vtable/demo/performance/100W)
- [async lazy load data](https://visactor.io/vtable/demo/performance/async-data)
- [List Table](https://visactor.io/vtable/demo/table-type/list-table)
- [List Table Tree](https://visactor.io/vtable/demo/table-type/list-table-tree)
- [List Table Tree(lazy load)](https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load)
- [List Table Group](https://visactor.io/vtable/demo/table-type/list-table-group)
- [List Table Group Checkbox](https://visactor.io/vtable/demo/table-type/list-table-group-checkbox)
- [Transpose Table](https://visactor.io/vtable/demo/table-type/transpose-table)
- [Pivot Analysis Table](https://visactor.io/vtable/demo/table-type/pivot-analysis-table)
- [Pivot Table Row Header Tree Mode](https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree)
- [Pivot Table Grid Tree Mode](https://visactor.io/vtable/demo/table-type/pivot-analysis-table-grid-tree)
- [Pivot Analysis Table with indicator row](https://visactor.io/vtable/demo/table-type/pivot-analysis-table-indicator-row)
- [Pivot Table(custom header tree)](https://visactor.io/vtable/demo/table-type/pivot-table)
- [Pivot Table Tree](https://visactor.io/vtable/demo/table-type/pivot-table-tree)
- [Pivot Table Tree Lazy Load](https://visactor.io/vtable/demo/table-type/pivot-table-tree-lazy-load)
- [Pivot Table Virtual Header](https://visactor.io/vtable/demo/table-type/pivot-table-virtual-header)
- [Pivot Table Multi-Tree](https://visactor.io/vtable/demo/table-type/pivot-table-multi-tree)
- [Pivot Chart](https://visactor.io/vtable/demo/table-type/pivot-chart)
- [Pivot Chart Pie](https://visactor.io/vtable/demo/table-type/pivot-chart-pie)
- [Pivot Chart Radar](https://visactor.io/vtable/demo/table-type/pivot-chart-radar)
- [Pivot Chart Scatter](https://visactor.io/vtable/demo/table-type/pivot-chart-scatter)
- [Pivot Chart Word Cloud](https://visactor.io/vtable/demo/table-type/pivot-chart-wordCloud)
- [Gantt Basic](https://visactor.io/vtable/demo/gantt/gantt-basic)
- [Gantt Custom Layout](https://visactor.io/vtable/demo/gantt/gantt-customLayout)
- [Gantt Edit](https://visactor.io/vtable/demo/gantt/gantt-edit)
- [Gantt Dependency Link Line](https://visactor.io/vtable/demo/gantt/gantt-dependency-link-line)
- [Create Dependency Link Line](https://visactor.io/vtable/demo/gantt/gantt-dependency-link-create)
- [Gantt Interaction —— Drag Table Width](https://visactor.io/vtable/demo/gantt/gantt-interaction-drag-table-width)
- [Gantt Interaction —— Drag TaskBar](https://visactor.io/vtable/demo/gantt/gantt-interaction-drag-taskBar)
- [Gantt Interaction —— Create Schedule](https://visactor.io/vtable/demo/gantt/gantt-interaction-creation-button)
- [Gantt Subtask Show Mode](https://visactor.io/vtable/demo/gantt/gantt-taskShowMode)
- [Gantt Task Merge Cell](https://visactor.io/vtable/demo/gantt/gantt-table-mergeCell)
- [Gantt Task Hour Unit](https://visactor.io/vtable/demo/gantt/gantt-hour)
- [Calendar Basic](https://visactor.io/vtable/demo/calendar/calendar-basic)
- [Calendar Custom Event](https://visactor.io/vtable/demo/calendar/calendar-custom-event)
- [Calendar Custom Layout](https://visactor.io/vtable/demo/calendar/calendar-custom-layout)
- [Cell Content Type](https://visactor.io/vtable/demo/cell-type/multi-type)
- [Progressba Type](https://visactor.io/vtable/demo/cell-type/progressbar)
- [Checkbox Type](https://visactor.io/vtable/demo/cell-type/checkbox)
- [Radio Type](https://visactor.io/vtable/demo/cell-type/radio)
- [Chart Type In ListTable](https://visactor.io/vtable/demo/cell-type/list-chart)
- [Chart Type In ListTable 2](https://visactor.io/vtable/demo/cell-type/list-table-chart)
- [Chart Type In PivotTable](https://visactor.io/vtable/demo/cell-type/chart)
- [Sparkline In PivotTable](https://visactor.io/vtable/demo/cell-type/pivot-sparkline)
- [composite CellType](https://visactor.io/vtable/demo/cell-type/composite-cellType)
- [List Table - Header Group](https://visactor.io/vtable/demo/basic-functionality/list-table-header-group)
- [Line Wrapping](https://visactor.io/vtable/demo/basic-functionality/auto-wrap-text)
- [frozen column](https://visactor.io/vtable/demo/basic-functionality/frozen-col)
- [frozen row](https://visactor.io/vtable/demo/basic-functionality/frozen-row)
- [Sort](https://visactor.io/vtable/demo/basic-functionality/sort)
- [Pre Sort](https://visactor.io/vtable/demo/basic-functionality/pre-sort)
- [Merge Cells](https://visactor.io/vtable/demo/basic-functionality/merge)
- [Custom Merge Cells](https://visactor.io/vtable/demo/basic-functionality/custom-merge)
- [Row Height Mode - Adapt to Content](https://visactor.io/vtable/demo/basic-functionality/height-mode-autoHeight)
- [Column Width Mode - Fits Container Width](https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive)
- [Column Width Mode - Adapt to Content](https://visactor.io/vtable/demo/basic-functionality/width-mode-autoWidth)
- [export image](https://visactor.io/vtable/demo/basic-functionality/export-image)
- [row series number](https://visactor.io/vtable/demo/basic-functionality/row-series-number)
- [pagination](https://visactor.io/vtable/demo/basic-functionality/pagination)
- [Pivot Table corner title](https://visactor.io/vtable/demo/basic-functionality/pivot-table-corner-title)
- [Select cell](https://visactor.io/vtable/demo/interaction/select)
- [Select Highlight](https://visactor.io/vtable/demo/interaction/select-highlight)
- [Hover the Line Cross Highlight](https://visactor.io/vtable/demo/interaction/hover-inline-cross)
- [Hover to highlight the entire line](https://visactor.io/vtable/demo/interaction/hover-inline-row)
- [Right click menu(copy/paste/delete)](https://visactor.io/vtable/demo/interaction/context-menu)
- [Adjust column width](https://visactor.io/vtable/demo/interaction/resize-col-width)
- [Adjust row height](https://visactor.io/vtable/demo/interaction/resize-row-height)
- [dblclick resize column width](https://visactor.io/vtable/demo/interaction/dblclick-resize-col-width)
- [Move header position](https://visactor.io/vtable/demo/interaction/move-header-position)
- [Move row position](https://visactor.io/vtable/demo/interaction/move-row-position)
- [scroll](https://visactor.io/vtable/demo/interaction/scroll)
- [arrowkeys move select](https://visactor.io/vtable/demo/interaction/arrowkeys-move-select)
- [copy paste cell value](https://visactor.io/vtable/demo/interaction/copy-paste-cell-value)
- [head highlight](https://visactor.io/vtable/demo/interaction/head-highlight)
- [invert highlight](https://visactor.io/vtable/demo/interaction/invert-highlight)
- [Style](https://visactor.io/vtable/demo/style/style)
- [Theme - ARCO](https://visactor.io/vtable/demo/theme/arco)
- [Theme - BIGTHT](https://visactor.io/vtable/demo/theme/bright)
- [Theme - custom](https://visactor.io/vtable/demo/theme/custom)
- [Theme - DARK](https://visactor.io/vtable/demo/theme/dark)
- [Theme - DEFAULT](https://visactor.io/vtable/demo/theme/default)
- [Theme -extends](https://visactor.io/vtable/demo/theme/extend)
- [Theme -register](https://visactor.io/vtable/demo/theme/register)
- [Theme - SIMPLIFY](https://visactor.io/vtable/demo/theme/simplify)
- [Appear Animation](https://visactor.io/vtable/demo/animation/appear-animation)
- [Scroll Animation](https://visactor.io/vtable/demo/animation/scroll-animation)
- [Carousel Animation](https://visactor.io/vtable/demo/animation/carousel-animation)
- [Custom Icon](https://visactor.io/vtable/demo/custom-render/custom-icon)
- [Cell custom layout](https://visactor.io/vtable/demo/custom-render/custom-cell-layout)
- [Cell custom layout(JSX)](https://visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx)
- [Global cell custom content](https://visactor.io/vtable/demo/custom-render/custom-render-global)
- [Cell custom content](https://visactor.io/vtable/demo/custom-render/custom-render)
- [Cell custom merge](https://visactor.io/vtable/demo/custom-render/custom-merge-layout)
- [Cell custom style](https://visactor.io/vtable/demo/custom-render/custom-style)
- [Custom Corner Cell](https://visactor.io/vtable/demo/custom-render/complex-corner)
- [editCell](https://visactor.io/vtable/demo/edit/edit-cell)
- [custom date editor](https://visactor.io/vtable/demo/edit/custom-editor)
- [PivotTable edit data](https://visactor.io/vtable/demo/edit/pivot-table-editor)
- [Dynamically adjust data](https://visactor.io/vtable/demo/edit/add-delete-records)
- [fill handle effect](https://visactor.io/vtable/demo/edit/fill-handle)
- [Pivot Analysis Total](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-total)
- [Custom Total](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-custom-total)
- [Sort Dimension](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-sort-dimension)
- [Sort Indicator](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-sort-indicator)
- [Sort Function](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-sort-func)
- [Data Filter](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-filter)
- [Derived Field](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-derivedField)
- [Indicator Aggregation Type](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-aggregation)
- [Calculate Field](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-calculatedField)
- [Custom Aggregation Type](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-customAggregator)
- [Pivot Table Drill](https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill)
- [Data Filter](https://visactor.io/vtable/demo/list-table-data-analysis/list-table-data-filter)
- [Data Aggregation](https://visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation)
- [Multiple Data Aggregation](https://visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple)
- [Drop Down Menu](https://visactor.io/vtable/demo/component/dropdown)
- [tooltip](https://visactor.io/vtable/demo/component/tooltip)
- [tooltip custom content](https://visactor.io/vtable/demo/component/tooltip_custom_content)
- [Scrollbar](https://visactor.io/vtable/demo/component/scrollbar)
- [title](https://visactor.io/vtable/demo/component/title)
- [legend](https://visactor.io/vtable/demo/component/legend)
- [legend-color](https://visactor.io/vtable/demo/component/legend-color)
- [legend-size](https://visactor.io/vtable/demo/component/legend-size)
- [empty tip](https://visactor.io/vtable/demo/component/empty-tip)
- [table export](https://visactor.io/vtable/demo/export/table-export)
- [table export(ignore-icon)](https://visactor.io/vtable/demo/export/table-export-ignore-icon)
- [table export(format)](https://visactor.io/vtable/demo/export/table-export-format)
- [search-component](https://visactor.io/vtable/demo/search/search-component)
- [Sales heat map](https://visactor.io/vtable/demo/business/color-level)
- [Project schedule](https://visactor.io/vtable/demo/business/project-schedule)
- [2018 QSChina University Mathematics Major Rankings Mathematics](https://visactor.io/vtable/demo/business/ranking)
- [Roadmap](https://visactor.io/vtable/demo/business/roadmap)
- [Annual temperature trends by region](https://visactor.io/vtable/demo/business/temperature-trend)
- [Trend table](https://visactor.io/vtable/demo/business/trend)
- [Information preview](https://visactor.io/vtable/demo/business/information)
- [2023 China Population Pyramid](https://visactor.io/vtable/demo/business/population-pyramid)
- [Sales Bubble](https://visactor.io/vtable/demo/business/sales-bubble)
- [Song Play Ranking](https://visactor.io/vtable/demo/business/music-play)

## FAQ

- [1.How to implement multi-level headers in a basic table (ListTable)?](https://visactor.io/vtable/faq/1-How to implement multi-level headers in a basic table)
- [2.How to specify the width of a column and enable automatic line wrapping in a table component?](https://visactor.io/vtable/faq/2-How to specify the width of a column and enable automatic line wrapping in a table component)
- [3.How to automatically calculate the width and height of cells in a table component based on the content?](https://visactor.io/vtable/faq/3-How to automatically calculate the width and height of cells in a table component based on the content)
- [4.In table component, how can the truncated text, which exceeds the width of the cell, be displayed in a popup window to show the complete content?](https://visactor.io/vtable/faq/4-In table component, how can the truncated text, which exceeds the width of the cell, be displayed in a popup window to show the complete content)
- [5.How to customize the content of a tooltip in a pop-up box?](https://visactor.io/vtable/faq/5-How to customize the content of a tooltip in a pop-up box)
- [6.How to sort table contents by data records?](https://visactor.io/vtable/faq/6-How to sort table contents by data records)
- [7.How to improve the performance of rendering a large number of charts in a web page, especially during scroll interactions?](https://visactor.io/vtable/faq/7-How to improve the performance of rendering a large number of charts in a web page)
- [8.How to insert sparklines in table?](https://visactor.io/vtable/faq/8-How to insert sparklines in table)
- [9.How to display user information, such as a combination of avatar + name, in data analysis reports or tables?](https://visactor.io/vtable/faq/9-How to display user information, such as a combination of avatar + name, in data analysis reports or tables)
- [10.How to add a progress bar to the table component?](https://visactor.io/vtable/faq/10-How to add a progress bar to the table component)
- [11.What table components support displaying mini-charts within cells?](https://visactor.io/vtable/faq/11-What table components support displaying mini-charts within cells)
- [12.How to achieve color gradient effect on table component?](https://visactor.io/vtable/faq/12-How to achieve color gradient effect on table component)
- [13.How can the table column width show different effects according to the number of data columns?](https://visactor.io/vtable/faq/13-How can the table column width show different effects according to the number of data columns)
- [14.How to merge cells with the same content in table component?](https://visactor.io/vtable/faq/14-How to merge cells with the same content in table component)
- [15.How to display tree structure data in a table?](https://visactor.io/vtable/faq/15-How to display tree structure data in a table)
- [16.How to customize the drop-down menu in table component?](https://visactor.io/vtable/faq/16-How to customize the drop-down menu in table component)
- [17.How to implement a heatmap using a table component?](https://visactor.io/vtable/faq/17-How to implement a heatmap using a table component)
- [18.How to customize the context menu in the table component?](https://visactor.io/vtable/faq/18-How to customize the context menu in the table component)
- [19.Can the VTable table component copy the contents of selected cells?](https://visactor.io/vtable/faq/19-Can the VTable table component copy the contents of selected cells)
- [20.How to use VTable in Vue?](https://visactor.io/vtable/faq/20-How to use VTable in Vue)
- [21.How to cancel the bubbling of the table event?](https://visactor.io/vtable/faq/21-How to cancel the bubbling of the table event)
- [22.How to deal with line-break?](https://visactor.io/vtable/faq/22-How to deal with line-break)
- [23.How to edit a table's cell with VTable?](https://visactor.io/vtable/faq/23-How to edit a table's cell with VTable)
- [24. How to display table row numbers](https://visactor.io/vtable/faq/24-How to display table row numbers)
- [25.How to automatically calculate and display the aggregate values of the VTable's pivot table?](https://visactor.io/vtable/faq/25-How to automatically calculate and display the aggregate values of the VTable's pivot table)
- [26.  How to use the right-click menu to copy, paste and delete cells in VTable?](https://visactor.io/vtable/faq/26-  How to use the right-click menu to copy, paste and delete cells in VTable)
- [27. How to set the expanded and collapsed state of the tree structure](https://visactor.io/vtable/faq/27-How to set the expanded and collapsed state of the tree structure)
- [28. How can VTable implement a capability similar to the Excel fill handle to batch modify cells?](https://visactor.io/vtable/faq/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells)
- [29. How to obtain the total number of rows in a table and the actual height of the content](https://visactor.io/vtable/faq/29-How to obtain the total number of rows in a table and the actual height of the content)
- [30.  In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?](https://visactor.io/vtable/faq/30-  In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge)
- [31.How to implement hover to a cell to show or hide part of the content](https://visactor.io/vtable/faq/31-How to implement hover to a cell to show or hide part of the content)
- [32.How to implement scrollbar DOM container boundary display](https://visactor.io/vtable/faq/32-How to implement scrollbar DOM container boundary display)
- [33.How to implement drag-and-drop adjustment of line-height](https://visactor.io/vtable/faq/33-How to implement drag-and-drop adjustment of line-height)
- [34.How to implement text type buttons](https://visactor.io/vtable/faq/34-How to implement text type buttons)
- [35.How to set the border style around cells separately](https://visactor.io/vtable/faq/35-How to set the border style around cells separately)
- [36.How to make the table automatically calculate column width based only on the content width of the table header](https://visactor.io/vtable/faq/36-How to make the table automatically calculate column width based only on the content width of the table header)
- [37. What should I do if the bottom and right borders of VTable are not displayed when it is scrolled?](https://visactor.io/vtable/faq/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled)
- [38. Can the VTable component be drag-and-drop to swap rows](https://visactor.io/vtable/faq/38- Can the VTable component be drag-and-drop to swap rows)
- [39. How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row?](https://visactor.io/vtable/faq/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row)
- [40. Can the VTable component achieve different hover colors for different cells?](https://visactor.io/vtable/faq/40- Can the VTable component achieve different hover colors for different cells)
- [41. How can I increase the gap between adjacent sparklines in the VTable component?](https://visactor.io/vtable/faq/41- How can I increase the gap between adjacent sparklines in the VTable component)
- [42.How to add column total information to the list](https://visactor.io/vtable/faq/42-How to add column total information to the list)
- [43.How to listen to table area selection and cancellation events](https://visactor.io/vtable/faq/43-How to listen to table area selection and cancellation events)
- [44.How to set only one column to not be selected for operation](https://visactor.io/vtable/faq/44-How to set only one column to not be selected for operation)
- [45.How to manually control the tooltip display](https://visactor.io/vtable/faq/45-How to manually control the tooltip display)
- [46.How to set multi-level table headers](https://visactor.io/vtable/faq/46-How to set multi-level table headers)
- [47. How to make text automatically omitted based on cell width when using custom rendering with VTable components?](https://visactor.io/vtable/faq/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components)
- [48. When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column?](https://visactor.io/vtable/faq/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column)
- [49. How to implement dimension drill-down function when using VTable pivot table component?](https://visactor.io/vtable/faq/49- How to implement dimension drill-down function when using VTable pivot table component)
- [50. How to manually update the state when using the Checkbox in the VTable component?](https://visactor.io/vtable/faq/50- How to manually update the state when using the Checkbox in the VTable component)
- [51.  How to delete the content of the selected cell using hotkeys in VTable?](https://visactor.io/vtable/faq/51-  How to delete the content of the selected cell using hotkeys in VTable)
- [52. Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?](https://visactor.io/vtable/faq/52-How to configure the editor and whether it can be reused)
- [53. How to control the timing of exiting edit mode after implementing editable cells in VTable components?](https://visactor.io/vtable/faq/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components)
- [54. Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content?](https://visactor.io/vtable/faq/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content)
- [55. After custom rendering in the column configuration of the VTable component, the icon configuration fails. How to solve this?](https://visactor.io/vtable/faq/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this)
- [56.VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event?](https://visactor.io/vtable/faq/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event)
- [57.How to set the text style of the VTable table component?](https://visactor.io/vtable/faq/57-How to set the text style of the VTable table component)
- [58.How to customize highlighted cells in the VTable component](https://visactor.io/vtable/faq/58-How to customize highlighted cells in the VTable component)
- [59.How the VTable component progressively loads sub-nodes in a list](https://visactor.io/vtable/faq/59-How the VTable component progressively loads sub-nodes in a list)
- [60.How the VTable component progressively loads sub-nodes in pivot tables](https://visactor.io/vtable/faq/60-How the VTable component progressively loads sub-nodes in pivot tables)

## Change Log

- [Important Release](https://visactor.io/vtable/changelog/important-release)
- [release log](https://visactor.io/vtable/changelog/release)

## Contributing

- [1-Setting-Up-the-Development-Environment](https://visactor.io/vtable/contributing/1-Setting-Up-the-Development-Environment)
- [2-Howto Submit an Issue](https://visactor.io/vtable/contributing/2-Howto Submit an Issue)
- [3-How to Contribute Documentation](https://visactor.io/vtable/contributing/3-How to Contribute Documentation)
- [4-How to Contribute to a Demo](https://visactor.io/vtable/contributing/4-How to Contribute to a Demo)
- [5-How to Contribute Code](https://visactor.io/vtable/contributing/5-How to Contribute Code)

# VRender

## Tutorials

- [VRender Website Guide](https://visactor.io/vrender/guide/asd/VRender_Website_Guide)
- [Getting Started](https://visactor.io/vrender/guide/asd/Getting_Started)
- [How to Get VRender](https://visactor.io/vrender/guide/asd/Basic/How_to_Get_VRender)
- [How to Import VRender](https://visactor.io/vrender/guide/asd/Basic/How_to_Import_VRender)
- [VRender Basic Tutorial](https://visactor.io/vrender/guide/asd/Basic/Vrender_basic_tutorial)
- [Create Instance](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Create_Instance)
- [Graphic](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Graphic)
- [Event](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Event)
- [Animate](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Animate)
- [Cross platform Interface](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Cross_platform_Interface)
- [Extensions and Plugins](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Extensions_and_Plugins)
- [jsx config](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Jsx)
- [Custom Graphic](https://visactor.io/vrender/guide/asd/Advanced_Tutorial/Custom_Graphic)
- [Flex Layout](https://visactor.io/vrender/guide/asd/Advanced_Tutorial/Flex_Layout)
- [VRender Components Introduction](https://visactor.io/vrender/guide/asd/VRender_Components/VRender_Components_Introduction)
- [PopTip Component](https://visactor.io/vrender/guide/asd/VRender_Components/VRender_Components_PopTip)
- [What Is BoundsPadding](https://visactor.io/vrender/guide/asd/FAQ/What_Is_BoundsPadding)

## Chart Demos

- [basic-arc](https://visactor.io/vrender/demo/graphic-arc/basic-arc)
- [fan](https://visactor.io/vrender/demo/graphic-arc/fan)
- [basic-area](https://visactor.io/vrender/demo/graphic-area/basic-area)
- [basic-circle](https://visactor.io/vrender/demo/graphic-circle/basic-circle)
- [circle-gradient](https://visactor.io/vrender/demo/graphic-circle/circle-gradient)
- [basic-rect](https://visactor.io/vrender/demo/graphic-rect/basic-rect)
- [morphing-animate](https://visactor.io/vrender/demo/graphic-rect/morphing-animate)
- [basic-path](https://visactor.io/vrender/demo/graphic-path/basic-path)
- [basic-symbol](https://visactor.io/vrender/demo/graphic-symbol/basic-symbol)
- [symbol-wave](https://visactor.io/vrender/demo/graphic-symbol/symbol-wave)
- [basic-line](https://visactor.io/vrender/demo/graphic-line/basic-line)
- [basic-glyph](https://visactor.io/vrender/demo/graphic-glyph/basic-glyph)
- [basic-text](https://visactor.io/vrender/demo/graphic-text/basic-text)
- [text-blend](https://visactor.io/vrender/demo/graphic-text/text-blend)
- [basic-richtext](https://visactor.io/vrender/demo/graphic-richtext/basic-richtext)
- [text helicopter](https://visactor.io/vrender/demo/demo/helicopter)

## Contributing

- [1-Setting-Up-the-Development-Environment](https://visactor.io/vrender/contributing/1-Setting-Up-the-Development-Environment)
- [2-Howto Submit an Issue](https://visactor.io/vrender/contributing/2-Howto Submit an Issue)
- [3-How to Contribute Documentation](https://visactor.io/vrender/contributing/3-How to Contribute Documentation)
- [4-How to Contribute to a Demo](https://visactor.io/vrender/contributing/4-How to Contribute to a Demo)
- [5-How to Contribute Code](https://visactor.io/vrender/contributing/5-How to Contribute Code)
- [6-How to upload image](https://visactor.io/vrender/contributing/6-How to upload image)

# VMind

## Tutorials

- [VMind Website Guide](https://visactor.io/vmind/guide/VMind_Website_Guide)
- [Introduction to VMind](https://visactor.io/vmind/guide/Intro_to_VMind)
- [Getting Started](https://visactor.io/vmind/guide/Getting_Started)
- [Contribution Guide](https://visactor.io/vmind/guide/Contribution_Guide)
- [How to Get VMind](https://visactor.io/vmind/guide/Basic_Tutorial/How_to_Get_VMind)
- [How to Import VMind](https://visactor.io/vmind/guide/Basic_Tutorial/How_to_Import_VMind)
- [Create VMind Instance](https://visactor.io/vmind/guide/Basic_Tutorial/Create_VMind_Instance)
- [Data Format and Data Process](https://visactor.io/vmind/guide/Basic_Tutorial/Data_Process)
- [Intelligent Data Aggregation](https://visactor.io/vmind/guide/Basic_Tutorial/Data_Aggregation)
- [Intelligent Chart Generation](https://visactor.io/vmind/guide/Basic_Tutorial/Chart_Generation)
- [Rule-based Chart Generation](https://visactor.io/vmind/guide/Basic_Tutorial/Chart_Advisor)
- [Custom LLM Access Function](https://visactor.io/vmind/guide/Basic_Tutorial/Custom_Request)

## API

- [VMind Instance](https://visactor.io/vmind/api/VMind_Instance)
- [parseCSVData](https://visactor.io/vmind/api/parseCSVData)
- [getFieldInfo](https://visactor.io/vmind/api/getFieldInfo)
- [fillSpecWithData](https://visactor.io/vmind/api/fillSpecWithData)
- [dataQuery](https://visactor.io/vmind/api/dataQuery)
- [generateChart](https://visactor.io/vmind/api/generateChart)

## Scenario

- [Chart Assistant](https://visactor.io/vmind/scenario/Chart_Assistant)
- [Visual Narration: Word Cloud Cube](https://visactor.io/vmind/scenario/Wordcloud_Cube)
- [Data video creation](https://visactor.io/vmind/scenario/Data_Video)
- [Document Assistant](https://visactor.io/vmind/scenario/Document_Assistant)
- [Data Development](https://visactor.io/vmind/scenario/Data_Development)
- [VMind Open API](https://visactor.io/vmind/scenario/Open_API)

# VStory

## Tutorials

- [Site Guide](https://visactor.io/vstory/guide/tutorial_docs/VStory_Website_Guide)
- [Quick Start](https://visactor.io/vstory/guide/tutorial_docs/Getting_Started)
- [How to Obtain VStory](https://visactor.io/vstory/guide/tutorial_docs/Basic/How_to_Get_VStory)
- [How to Reference VStory in Projects](https://visactor.io/vstory/guide/tutorial_docs/Basic/How_to_Import_VStory)
- [A Basic DSL](https://visactor.io/vstory/guide/tutorial_docs/Basic/A_Basic_DSL)
- [dsl](https://visactor.io/vstory/guide/tutorial_docs/VStory_Concepts/dsl)
- [character](https://visactor.io/vstory/guide/tutorial_docs/VStory_Concepts/character)
- [action](https://visactor.io/vstory/guide/tutorial_docs/VStory_Concepts/action)
- [Story and Player](https://visactor.io/vstory/guide/tutorial_docs/VStory_Concepts/story-player)
- [Custom character](https://visactor.io/vstory/guide/tutorial_docs/extend/Custom_Character)

## Chart Demos

- [national memorial](https://visactor.io/vstory/demo/works-show/national-memorial)
- [Visualize History](https://visactor.io/vstory/demo/works-show/visualize-history)
- [Unit Story Telling](https://visactor.io/vstory/demo/works-show/unit-gun-death)
- [charts join](https://visactor.io/vstory/demo/works-show/chart-join)
- [annotation show](https://visactor.io/vstory/demo/works-show/annotation-show)
- [bar leap animate](https://visactor.io/vstory/demo/animate/bar-leap)
- [pie leap animate](https://visactor.io/vstory/demo/animate/pie-leap)
- [bar bounce animate](https://visactor.io/vstory/demo/animate/bar-bounce)
- [ranking bar chart](https://visactor.io/vstory/demo/character/ranking-bar)
- [dynamic line chart](https://visactor.io/vstory/demo/character/dynamic-line)
- [single pie chart](https://visactor.io/vstory/demo/character/single-pie)
- [unit component](https://visactor.io/vstory/demo/character/unit)
- [balloon bar chart](https://visactor.io/vstory/demo/character/balloon-bar)
- [wave scatter](https://visactor.io/vstory/demo/character/wave-scatter)
- [annotation-PopTip](https://visactor.io/vstory/demo/character/poptip)
- [annotation StoryLabelItem](https://visactor.io/vstory/demo/character/story-label-item)
- [vchart chart](https://visactor.io/vstory/demo/character/vchart)
- [vtable table](https://visactor.io/vstory/demo/character/vtable)
- [timeline component](https://visactor.io/vstory/demo/character/timeline)
- [graphics](https://visactor.io/vstory/demo/character/vgraphic)
- [clipped image](https://visactor.io/vstory/demo/character/clipped-image)
- [VChart Animation arrangement](https://visactor.io/vstory/demo/arrange/vchart-arrange)
- [VChart combination chart Animation arrangement](https://visactor.io/vstory/demo/arrange/bar-line-arrange)
- [VChart multiple series Animation arrangement](https://visactor.io/vstory/demo/arrange/line-arrange)
- [unit visualize template](https://visactor.io/vstory/demo/templates/unit-visualize-template)
- [Unit Infographic Example](https://visactor.io/vstory/demo/infographic/unit-infographic)
- [Table Infographic: Pricing Plans](https://visactor.io/vstory/demo/infographic/table/pricing-plans)
- [Line Chart Infographic(Left-right Layout)](https://visactor.io/vstory/demo/infographic/line-chart-leftRight)
- [Venn Chart Infographic](https://visactor.io/vstory/demo/infographic/venn-chart)
- [Scatter Chart Infographic: Eurovision Winners](https://visactor.io/vstory/demo/infographic/scatter-chart-matrix)
- [Funnel Chart Infographic: Social Media](https://visactor.io/vstory/demo/infographic/social-media)
- [Map Chart Infographic: USA Cancer](https://visactor.io/vstory/demo/infographic/usa-cancer-map)
- [Bar Chart Infographic(Left-right Layout)](https://visactor.io/vstory/demo/infographic/bar-chart-leftRight)
- [Pie Chart Infographic(Left-right Layout)](https://visactor.io/vstory/demo/infographic/pie-chart-leftRight)
- [Bar Chart Infographic: HIV Treatment Access](https://visactor.io/vstory/demo/infographic/bar-hiv-chart)
- [Bar Chart Infographic: Regional Sales](https://visactor.io/vstory/demo/infographic/bar-chart-regional-sales)
- [Pie Chart Infographic: Transportation](https://visactor.io/vstory/demo/infographic/pie-chart-transportation)
- [Camera Statistic - Pie Chart](https://visactor.io/vstory/demo/infographic/pie-chart-camera)
- [Bar Chart Infographic: Industry Stability](https://visactor.io/vstory/demo/infographic/bar-work-in-same-industry)
- [Line Chart Infographic: Sprint Burndown](https://visactor.io/vstory/demo/infographic/sprint-burndown)
- [Pie Chart Infographic: Client Breakdown](https://visactor.io/vstory/demo/infographic/client-breakdown)
- [Horizontal Bar Chart Infographic](https://visactor.io/vstory/demo/infographic/bar-chart-horizontal)
- [Pictogram Infographic: Cat Stroking Guide](https://visactor.io/vstory/demo/infographic/cat-stroke)
- [Gauge Infographic: Project Goal Progress](https://visactor.io/vstory/demo/infographic/project-goal)
- [Word Cloud Infographic: Big Data Keywords](https://visactor.io/vstory/demo/infographic/big-data-wordcloud)
- [Word Cloud Infographic: Marketing Keywords](https://visactor.io/vstory/demo/infographic/marking-wordcloud)
- [Area Chart Infographic: Source of New Contacts](https://visactor.io/vstory/demo/infographic/source-of-new-contacts-area-chart)
- [Scatter Infographic: Income and Obesity Rate](https://visactor.io/vstory/demo/infographic/scatter-income-obesity)
- [Scatter Cloud Infographic: Age and Suicide Rate](https://visactor.io/vstory/demo/infographic/scatter-suicide-rate-age)
- [Area chart Infographic: Market share](https://visactor.io/vstory/demo/infographic/market-share-area-chart)
- [Bar chart Infographic: Top 10 Podcasts](https://visactor.io/vstory/demo/infographic/top10-podcasts-bar-chart)

## Contributing

- [1-Setting-Up-the-Development-Environment](https://visactor.io/vstory/contributing/1-Setting-Up-the-Development-Environment)
- [2-Howto Submit an Issue](https://visactor.io/vstory/contributing/2-Howto Submit an Issue)
- [3-How to Contribute Documentation](https://visactor.io/vstory/contributing/3-How to Contribute Documentation)
- [4-How to Contribute to a Demo](https://visactor.io/vstory/contributing/4-How to Contribute to a Demo)
- [5-How to Contribute Code](https://visactor.io/vstory/contributing/5-How to Contribute Code)
- [6-How to upload image](https://visactor.io/vstory/contributing/6-How to upload image)