+
+
+
+## Quote
+
+* Github: https://github.com/VisActor/VChart
+* Demo: https://visactor.bytedance.net/vchart/demo/tooltip/custom-tooltip
+* Spec: https://visactor.io/vchart/option/barChart#tooltip.style
\ No newline at end of file
diff --git a/docs/assets/faq/en/10- How to change the color of the legend.md b/docs/assets/faq/en/10- How to change the color of the legend.md
new file mode 100644
index 000000000..49bde87d8
--- /dev/null
+++ b/docs/assets/faq/en/10- How to change the color of the legend.md
@@ -0,0 +1,343 @@
+---
+title: 49. How to change the color of the VChart legend?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to change the color of the legend?
+## Description
+
+Expect to control the color of the legend independently, not consistent with the graph.
+## Solution
+
+Solutions of different chart libraries are different.
+Generally, the legends of VChart will remain consistent with the color of the main chart elements, providing users with color explanations.
+However, in some scenarios, it may be necessary to optimize the legend style separately, such as adding borders or increasing transparent colors. The legend configuration item of VChart supports separate control of the fill color.
+Method 1: Use `legends.data`, process the `shape` property of each legend in the callback function, thereby achieving the effect of modifying the legend style.
+Method 2: Use `legends.item.shape` to visibly control the style of each legend.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "scatter",
+ xField: "revenues_mm",
+ yField: "profit_mm",
+ seriesField: "category",
+ color: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
+ legends: {
+ type: "discrete",
+ visible: true,
+ orient: "top",
+ position: "end",
+ data: (items) =>
+ items.map((item) => {
+ item.shape.outerBorder = {
+ stroke: item.shape.fill,
+ distance: 2,
+ lineWidth: 1,
+ };
+
+ return item;
+ }),
+ },
+ data: [
+ {
+ id: "data",
+ values: [
+ {
+ company: "Johnson & Johnson",
+ revenues_mm: 71890,
+ profit_mm: 18540,
+ profit_as_of_revenues: 0.2578940047294478,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Procter & Gamble",
+ revenues_mm: 71726,
+ profit_mm: 10508,
+ profit_as_of_revenues: 0.14650196581434904,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Abbvie",
+ revenues_mm: 25638,
+ profit_mm: 5953,
+ profit_as_of_revenues: 0.23219439893907481,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Amgen",
+ revenues_mm: 22991,
+ profit_mm: 7722,
+ profit_as_of_revenues: 0.33587055804445215,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Eli Lilly",
+ revenues_mm: 21222,
+ profit_mm: 2738,
+ profit_as_of_revenues: 0.12901705777023842,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Bristol-Myers Squibb",
+ revenues_mm: 19427,
+ profit_mm: 4457,
+ profit_as_of_revenues: 0.22942296803417925,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Altria Group",
+ revenues_mm: 19337,
+ profit_mm: 14239,
+ profit_as_of_revenues: 0.7363603454517247,
+ category: "Tobacco",
+ },
+ {
+ company: "Kimberly-Clark",
+ revenues_mm: 18202,
+ profit_mm: 2166,
+ profit_as_of_revenues: 0.11899791231732777,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "General Mills",
+ revenues_mm: 16563,
+ profit_mm: 1697,
+ profit_as_of_revenues: 0.10245728430839823,
+ category: "Food",
+ },
+ {
+ company: "Colgate-Palmolive",
+ revenues_mm: 15195,
+ profit_mm: 2441,
+ profit_as_of_revenues: 0.16064494899638038,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Conagra Brands",
+ revenues_mm: 14134,
+ profit_mm: -677,
+ profit_as_of_revenues: -0.04789868402433847,
+ category: "Food",
+ },
+ {
+ company: "Land O'Lakes",
+ revenues_mm: 13233,
+ profit_mm: 245,
+ profit_as_of_revenues: 0.01851432025995617,
+ category: "Food",
+ },
+ {
+ company: "Pepsico",
+ revenues_mm: 62789,
+ profit_mm: 6329,
+ profit_as_of_revenues: 0.1007979104620236,
+ category: "Food",
+ },
+ {
+ company: "Kellogg",
+ revenues_mm: 13014,
+ profit_mm: 694,
+ profit_as_of_revenues: 0.053327186107269095,
+ category: "Food",
+ },
+ {
+ company: "Reynolds American",
+ revenues_mm: 12503,
+ profit_mm: 6073,
+ profit_as_of_revenues: 0.48572342637766935,
+ category: "Tobacco",
+ },
+ {
+ company: "Biogen",
+ revenues_mm: 11449,
+ profit_mm: 3703,
+ profit_as_of_revenues: 0.32343436107957024,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Estee Lauder",
+ revenues_mm: 11262,
+ profit_mm: 1115,
+ profit_as_of_revenues: 0.09900550523885633,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Celgene",
+ revenues_mm: 11229,
+ profit_mm: 1999,
+ profit_as_of_revenues: 0.17802119511977915,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Hormel Foods",
+ revenues_mm: 9523,
+ profit_mm: 890,
+ profit_as_of_revenues: 0.09345794392523364,
+ category: "Food",
+ },
+ {
+ company: "Campbell Soup",
+ revenues_mm: 7961,
+ profit_mm: 563,
+ profit_as_of_revenues: 0.07071975882426831,
+ category: "Food",
+ },
+ {
+ company: "J. M. Smucker",
+ revenues_mm: 7811,
+ profit_mm: 689,
+ profit_as_of_revenues: 0.08820893611573422,
+ category: "Food",
+ },
+ {
+ company: "Dean Foods",
+ revenues_mm: 7710,
+ profit_mm: 120,
+ profit_as_of_revenues: 0.01556420233463035,
+ category: "Food",
+ },
+ {
+ company: "Hershey",
+ revenues_mm: 7440,
+ profit_mm: 720,
+ profit_as_of_revenues: 0.0967741935483871,
+ category: "Food",
+ },
+ {
+ company: "Pfizer",
+ revenues_mm: 52824,
+ profit_mm: 7215,
+ profit_as_of_revenues: 0.13658564288959563,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Constellation Brands",
+ revenues_mm: 6548,
+ profit_mm: 1055,
+ profit_as_of_revenues: 0.16111789859499084,
+ category: "Beverages",
+ },
+ {
+ company: "Dr. Pepper Snapple Group",
+ revenues_mm: 6440,
+ profit_mm: 847,
+ profit_as_of_revenues: 0.13152173913043477,
+ category: "Beverages",
+ },
+ {
+ company: "HRG Group",
+ revenues_mm: 6403,
+ profit_mm: -199,
+ profit_as_of_revenues: -0.031079181633609246,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Treehouse Foods",
+ revenues_mm: 6175,
+ profit_mm: -229,
+ profit_as_of_revenues: -0.03708502024291498,
+ category: "Food",
+ },
+ {
+ company: "Avon Products",
+ revenues_mm: 5853,
+ profit_mm: -108,
+ profit_as_of_revenues: -0.018452075858534086,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Clorox",
+ revenues_mm: 5761,
+ profit_mm: 648,
+ profit_as_of_revenues: 0.11248047214025343,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Coca-Cola",
+ revenues_mm: 41863,
+ profit_mm: 6527,
+ profit_as_of_revenues: 0.15591333635907603,
+ category: "Beverages",
+ },
+ {
+ company: "Merck",
+ revenues_mm: 39807,
+ profit_mm: 3920,
+ profit_as_of_revenues: 0.09847514256286583,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Gilead Sciences",
+ revenues_mm: 30390,
+ profit_mm: 13501,
+ profit_as_of_revenues: 0.4442579795985522,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Philip Morris International",
+ revenues_mm: 26685,
+ profit_mm: 6967,
+ profit_as_of_revenues: 0.2610830054337643,
+ category: "Tobacco",
+ },
+ {
+ company: "Kraft Heinz",
+ revenues_mm: 26487,
+ profit_mm: 3632,
+ profit_as_of_revenues: 0.1371238720881942,
+ category: "Food",
+ },
+ {
+ company: "Mondelez International",
+ revenues_mm: 25923,
+ profit_mm: 1659,
+ profit_as_of_revenues: 0.06399722254368707,
+ category: "Food",
+ },
+ ],
+ },
+ ],
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ vchart.on("dataZoomChange", (params) => {
+ const { value } = params;
+ console.log("changed value:", value.start, value.end);
+ });
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+## Solution
+
+VChart can configure multiple pie-series and then configure their radii as: the outer radius of the inner circle = the inner radius of the outer circle, so as to achieve nested pie charts
+There is also a rose chart similar to a nested pie chart, which can be selected according to the business scenario.
+* outerRadius: number // outer radius, percentage value
+* innerRadius: number // inner radius, percentage value
+
+
+## Code example
+
+```
+const spec = {
+ type: 'common',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: '0~29', value: '126.04' },
+ { type: '30~59', value: '128.77' },
+ { type: '60 and over', value: '77.09' }
+ ]
+ },
+ {
+ id: 'id1',
+ values: [
+ { type: '0~9', value: '39.12' },
+ { type: '10~19', value: '43.01' },
+ { type: '20~29', value: '43.91' },
+ { type: '30~39', value: '45.4' },
+ { type: '40~49', value: '40.89' },
+ { type: '50~59', value: '42.48' },
+ { type: '60~69', value: '39.63' },
+ { type: '70~79', value: '25.17' },
+ { type: '80 and over', value: '12.29' }
+ ]
+ }
+ ],
+ series: [
+ {
+ type: 'pie',
+ dataIndex: 0,
+ outerRadius: 0.65,
+ innerRadius: 0,
+ valueField: 'value',
+ categoryField: 'type',
+ label: { position: 'inside', visible: true }
+ },
+ {
+ type: 'pie',
+ dataIndex: 1,
+ outerRadius: 0.8,
+ innerRadius: 0.67,
+ valueField: 'value',
+ categoryField: 'type',
+ label: {
+ visible: true
+ }
+ }
+ ],
+ color: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'],
+ legends: {
+ visible: true,
+ orient: 'left'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-xkzpxq?file=%2Fsrc%2Findex.js%3A43%2C31
+## Related Documents
+
+Demo：https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-xkzpxq?file=%2Fsrc%2Findex.js%3A43%2C31
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Pie radius configuration: https://www.visactor.io/vchart/option/pieChart#outerRadius
+* The Rose: https://www.visactor.io/vchart/demo/rose-chart/rose-stacked?keyword=roseChart
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/104- Issues with x-axis data overlapping and y-axis data not displaying when using the vchart library.md b/docs/assets/faq/en/104- Issues with x-axis data overlapping and y-axis data not displaying when using the vchart library.md
new file mode 100644
index 000000000..9f966f59c
--- /dev/null
+++ b/docs/assets/faq/en/104- Issues with x-axis data overlapping and y-axis data not displaying when using the vchart library.md
@@ -0,0 +1,37 @@
+---
+title: 67. Issues with x-axis data overlap and y-axis data not being displayed when using vchart library
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+Issues with x-axis data overlap and y-axis data not being displayed when using vchart library
+
+
+# Problem description
+
+I encountered problems when using the vchart library to create bar charts. Whether I tested it on the emulator or the real machine, the data on the x-axis (bottom axis) would overlap.
+
+
+In addition, I also noticed that some of the top labels of the bar chart will be moved inside the bar. Is this normal?
+
+
+# Solution
+
+There are the following solutions:
+Regarding the issue of overlapping data on the x-axis, it is because the sampling setting has been turned off. Originally, it was hoped that all data on the x-axis could be displayed, which resulted in data overlap. You can use a scroll bar to solve this problem and add the following configuration to the chart:
+`scrollBar: [ { orient: 'bottom', start: 0, end: 0.5, roam: true } ]`
+
+
+Regarding the issue of moving the top label of the bar chart to the inside of the bar, this is because the system automatically adjusts to prevent the labels from overlapping each other. This feature can be turned off by setting the label configuration overlap to false.
+`label: {overlap: false}`
+
+
+# Results show
+
+Online demo: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-ytl8dz
+# Related Documents
+
+* VChart scrollbar tutorial documentation: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Scrollbar
+* VChart label overlap document: https://www.visactor.io/vchart/option/barChart#label.overlap
+* VChart github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/105- How to customize Tooltip shapes.md b/docs/assets/faq/en/105- How to customize Tooltip shapes.md
new file mode 100644
index 000000000..7a0238a0e
--- /dev/null
+++ b/docs/assets/faq/en/105- How to customize Tooltip shapes.md
@@ -0,0 +1,78 @@
+---
+title: 75. How to customize the shape of Tooltip in Vchart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Title
+
+How to customize the shape of Tooltip in Vchart?
+# Description
+
+Is there a way to customize the shape of the tooltip in Vchart?
+
+
+# Solution
+
+In the Vchart Spec, there are tooltip-related configurations. Configure the tooltip property to customize the tooltip shape. The mark attribute of the tooltip represents the effect when hovering over the graphic element. [https://visactor.io/vchart/option/pieChart#tooltip.mark](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23tooltip.mark). The mark.content represents the configuration of the content. Configure the shapeType field in mark.content to customize the shape of the tooltip.
+# Code Example
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ tooltip: {
+ mark:
+ {
+ content: {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%',
+ shapeType: 'square'
+ }
+ },
+ },
+ outerRadius: 0.8,
+ valueField: 'value',
+ categoryField: 'type',
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+After running the code, the symbol of the tooltip becomes a rectangle.
+
+
+Online demo: [https://codesandbox.io/p/sandbox/tooltip-shape-cdzny7?file=%2Fsrc%2Findex.ts%3A44%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Ftooltip-shape-cdzny7%3Ffile%3D%252Fsrc%252Findex.ts%253A44%252C2)
+# Related Documents
+
+* VChart official website: [https://visactor.io/vchart/](https%3A%2F%2Fvisactor.io%2Fvchart%2F)
+* VChart tooltip configuration: [https://visactor.io/vchart/option/pieChart#tooltip.mark](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23tooltip.mark)
+* VChart Github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/106- How to set a default selection for a sector in a VChart pie chart.md b/docs/assets/faq/en/106- How to set a default selection for a sector in a VChart pie chart.md
new file mode 100644
index 000000000..4e3f89d3e
--- /dev/null
+++ b/docs/assets/faq/en/106- How to set a default selection for a sector in a VChart pie chart.md
@@ -0,0 +1,96 @@
+---
+title: 83.How to set a default selected effect for VChart pie charts?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set a default selected effect for VChart pie charts?
+
+
+## Problem description
+
+When drawing a pie chart for the first time, I hope to highlight a block. How should I configure it?
+
+
+## Solution
+
+
+
+1. First, you need to set the graphic style in the selected state in the chart spec configuration.
+```
+ pie: {
+ state: {
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+```
+1. Set the default selected data item through setSelected API
+```
+const vchart = new VChart(spec, { dom });
+vchart.renderSync();
+vchart.setSelected({
+ // one data record
+})
+```
+## Code example
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ pie: {
+ state: {
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+vchart.setSelected({ type: 'oxygen'})
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* github：https://github.com/VisActor/VChart
+* Related demo: https://visactor.io/vchart/demo/pie-chart/ring
+
+
+
diff --git a/docs/assets/faq/en/11- How to display a color block area within a specified x-axis range in the chart.md b/docs/assets/faq/en/11- How to display a color block area within a specified x-axis range in the chart.md
new file mode 100644
index 000000000..0d5158199
--- /dev/null
+++ b/docs/assets/faq/en/11- How to display a color block area within a specified x-axis range in the chart.md
@@ -0,0 +1,63 @@
+---
+title: How to display a color block area in a chart that covers the specified x-axis range?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to display a color block area in a chart that covers a specified x-axis range?
+
+
+## Problem description
+
+Similar to the effect shown in the figure below, I hope to draw a color block within the specified x-axis range in the chart. How should I configure it in VChart?
+
+
+## Solution
+
+You can achieve this through the `markArea `component, using the `markArea.coordinates `property to declare the range of data to be annotated.
+* `Coordinates `: Support configuring data values, VChart will automatically map the data to canvas coordinates for range drawing.
+```
+ markArea: [
+ {
+ coordinates: [
+ {
+ Date: 'Jan-20',
+ Price: 0.18
+ },
+ {
+ Date: 'Mar-23',
+ Price: 0.18
+ },
+ {
+ Date: 'Mar-23',
+ Price: 0.12
+ },
+ {
+ Date: 'Jan-20',
+ Price: 0.12
+ }
+ ],
+ label: {
+ text: 'Electricite prices have surged since 2020',
+ position: 'insideTop'
+ }
+ }
+ ],
+```
+
+
+## Code example
+
+https://visactor.io/vchart/demo/marker/mark-area-basic
+
+
+## Results show
+
+
+
+## Related Documents
+
+* github：https://github.com/VisActor/VChart
+* MarkArea demo: https://visactor.io/vchart/demo/marker/mark-area-basic
+* MarkArea tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/marker
+
diff --git a/docs/assets/faq/en/111- How to sort x-axis labels in a combination chart.md b/docs/assets/faq/en/111- How to sort x-axis labels in a combination chart.md
new file mode 100644
index 000000000..fc9cf68de
--- /dev/null
+++ b/docs/assets/faq/en/111- How to sort x-axis labels in a combination chart.md
@@ -0,0 +1,134 @@
+---
+title: How to sort the labels on the x-axis of a combo chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Problem Title
+
+How to sort the labels on the x-axis of a combo chart?
+
+
+## Problem Description
+
+In the following combined chart, the x-axis labels are not sorted by time. Can the sorting effect be achieved through `sortDataByAxis`?
+
+
+
+
+## Solution
+
+The function of `sortDataByAxis` is to sort the data of the series along the axis without affecting the sorting of the axis itself. To display the content on the axis in the desired order, there are two solutions:
+1. Configure the fields in the data to set the domain order of the data to be displayed:
+
+
+1. Sort the data in advance according to the display order.
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'common',
+ seriesField: 'color',
+ data: [
+ {
+ id: 'id0',
+ fields: {
+ x: {
+ domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
+ sortIndex: 0
+ }
+ },
+ values: [
+ { x: '2024-03-21', type: '需求建议', y: 14 },
+ { x: '2024-03-21', type: '功能缺陷', y: 27 },
+ { x: '2024-03-21', type: '其他', y: 1 },
+ { x: '2024-03-21', type: '操作咨询', y: 16 },
+ { x: '2024-03-26', type: '功能缺陷', y: 26 },
+ { x: '2024-03-26', type: '需求建议', y: 9 },
+ { x: '2024-03-26', type: '操作咨询', y: 17 },
+ { x: '2024-03-26', type: '其他', y: 1 },
+ { x: '2024-03-25', type: '功能缺陷', y: 23 },
+ { x: '2024-03-25', type: '操作咨询', y: 19 },
+ { x: '2024-03-25', type: '需求建议', y: 11 },
+ { x: '2024-03-22', type: '需求建议', y: 6 },
+ { x: '2024-03-22', type: '功能缺陷', y: 22 },
+ { x: '2024-03-22', type: '操作咨询', y: 14 },
+ { x: '2024-03-22', type: '其他', y: 2 },
+ { x: '2024-03-27', type: '功能缺陷', y: 16 },
+ { x: '2024-03-27', type: '其他', y: 3 },
+ { x: '2024-03-27', type: '需求建议', y: 8 },
+ { x: '2024-03-27', type: '操作咨询', y: 8 },
+ { x: '2024-03-23', type: '需求建议', y: 2 },
+ { x: '2024-03-23', type: '功能缺陷', y: 2 },
+ { x: '2024-03-20', type: '操作咨询', y: 2 },
+ { x: '2024-03-20', type: '功能缺陷', y: 2 },
+ { x: '2024-03-24', type: '需求建议', y: 1 }
+ ]
+ },
+ {
+ id: 'id1',
+ fields: {
+ x: {
+ domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
+ sortIndex: 0
+ }
+ },
+ values: [
+ { x: '2024-03-21', type: '负面反馈比例', y: 55 },
+ { x: '2024-03-26', type: '负面反馈比例', y: 57 },
+ { x: '2024-03-25', type: '负面反馈比例', y: 62 },
+ { x: '2024-03-22', type: '负面反馈比例', y: 63 },
+ { x: '2024-03-27', type: '负面反馈比例', y: 57 },
+ { x: '2024-03-23', type: '负面反馈比例', y: 75 },
+ { x: '2024-03-20', type: '负面反馈比例', y: 75 },
+ { x: '2024-03-24', type: '负面反馈比例', y: 100 }
+ ]
+ }
+ ],
+ stackSort: true,
+ series: [
+ {
+ type: 'bar',
+ id: 'bar',
+ label: { visible: true },
+ seriesField: 'type',
+ dataIndex: 0,
+ xField: 'x',
+ yField: 'y',
+ stack: true,
+ },
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 1,
+ label: { visible: true },
+ seriesField: 'type',
+ xField: 'x',
+ yField: 'y',
+ stack: false,
+ }
+ ],
+ axes: [
+ { orient: 'left', seriesIndex: [0] },
+ {
+ orient: 'right',
+ seriesId: ['line'],
+ gird: { visible: false },
+ min: 0,
+ max: 100,
+ title: { visible: true, text: '%', position: 'start' }
+ },
+ { orient: 'bottom', label: { visible: true }, type: 'band' }
+ ],
+ legends: { visible: true, orient: 'bottom' }
+};
+```
+## Result Presentation
+
+
+
+## Related documents
+
+* [Tutorial on Data Types and Data Definitions](https%3A%2F%2Fwww.visactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FData%2FData_Types_and_Interface)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/113- How to change bar width in a bar chart.md b/docs/assets/faq/en/113- How to change bar width in a bar chart.md
new file mode 100644
index 000000000..1c458e683
--- /dev/null
+++ b/docs/assets/faq/en/113- How to change bar width in a bar chart.md
@@ -0,0 +1,80 @@
+---
+title: 74. How to change the width of bars in a bar chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Title
+
+How to change the width of bars in a bar chart?
+# Description
+
+I am using vchart to create a bar chart and I want to set the width of the bars. However, I couldn't find the corresponding configuration item in the documentation. I tried some parameters, but none of them worked. How can I set the width of the bars?
+# Solution
+
+To set the width of the bars in a vchart bar chart, you can adjust the width of the chart itself. The bar chart has a `barWidth` property that can be used to adjust the width of the bars.
+# Example Code
+
+```
+const spec = {
+ type: 'bar',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ barWidth: '60%',
+ barMinWidth: 20,
+ barMaxWidth: 50,
+ xField: 'time',
+ yField: 'value',
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+
+
+# Related Documentation
+
+* `barWidth` configuration: [https://visactor.bytedance.net/vchart/option/barChart#barWidth](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Foption%2FbarChart%23barWidth)
+* VChart github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/118- How to implement point hover effects in the vchart library.md b/docs/assets/faq/en/118- How to implement point hover effects in the vchart library.md
new file mode 100644
index 000000000..6f7653762
--- /dev/null
+++ b/docs/assets/faq/en/118- How to implement point hover effects in the vchart library.md
@@ -0,0 +1,67 @@
+---
+title: How to implement hover effect on points in vchart chart library?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Title
+
+How to implement hover effect on points in vchart chart library?
+
+
+# Description
+
+I encountered a problem when using the vchart chart library for visualization development. When using the lightCharts chart library, I can easily implement the hover effect on points, but when I switch to the vchart chart library, I found that I cannot achieve the same effect with the same configuration. I set the size, color and other properties of the points in series.point:
+```
+point: {
+interactive: true,
+zIndex: 10,
+visible: true,
+bar: { style: { fill: 'red', size: 10, }, },
+state: {
+dimension_hover: {
+size: (datum: any) => { return 10; },
+fill: (datum: any) => { return 'red'; }
+}
+}
+}
+```
+But these settings seem to have no effect in the hover state. I want to know if I am missing any important configuration or if my configuration method is incorrect.
+
+
+
+
+# Solution
+
+In my experience, you may need to add the state property in point and add the dimension_hover property in state to achieve the special effect in the hover state. The specific code example is as follows:
+```
+point: {
+style: {
+size: 0
+},
+state: {
+dimension_hover: {
+size: 10,
+outerBorder: {
+distance: 0,
+lineWidth: 6,
+strokeOpacity: 0.2
+}
+}
+}
+}
+```
+Here, dimension_hover defines the effect when the mouse hovers over the point, and you can adjust these settings according to your needs.
+
+
+You can also refer to the official demo of vchart for learning related configurations: https://visactor.bytedance.net/vchart/demo/area-chart/stacked-dash-area. If you need to demonstrate or edit your code online, vchart official website editor and codesandbox are good choices. You can upload your code to these platforms and send us the link, and we will provide further assistance for you.
+
+
+# Result
+
+The hover effect on points in vchart was successfully implemented through the above method, and the reason why the original configuration did not take effect was found - the configuration in series.point conflicted.
+Online demo reference: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-fx4ppt
+
+
+# Related Documents
+
+* Vchart official website: https://visactor.bytedance.net/vchart/
+* Vchart official demo: https://visactor.bytedance.net/vchart/demo/area-chart/stacked-dash-area
\ No newline at end of file
diff --git a/docs/assets/faq/en/119- How to bind click events to pie chart labels.md b/docs/assets/faq/en/119- How to bind click events to pie chart labels.md
new file mode 100644
index 000000000..6456315bd
--- /dev/null
+++ b/docs/assets/faq/en/119- How to bind click events to pie chart labels.md
@@ -0,0 +1,102 @@
+---
+title: How to bind the click event of the pie chart label?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+How to bind the click event of the pie chart label?
+## Problem Description
+
+As shown in the pie chart below, how can I achieve a custom callback when clicking on a label?
+
+
+## Solution
+
+In VChart, the label component does not respond to events by default. This is mainly to avoid affecting the event response of the main chart elements when the labels are dense. To achieve event listening of labels, you need to take two steps:
+* Enable label event response by setting `label.interactive` to `true`
+* Implement event listening of label components through `{ level: 'model', type: 'label' }`
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ pie: {
+ style: {
+ cornerRadius: 10
+ },
+ state: {
+ hover: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ },
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true,
+ interactive: true
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+vchart.on('click',{ level:'model', type:'label'}, (e) => {
+ console.log('label', e)
+})
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Related documents
+
+* [Event API](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fapi%2FAPI%2Fevent)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/12- How to set grid lines on VChart axes to dashed lines.md b/docs/assets/faq/en/12- How to set grid lines on VChart axes to dashed lines.md
new file mode 100644
index 000000000..0a23f1f08
--- /dev/null
+++ b/docs/assets/faq/en/12- How to set grid lines on VChart axes to dashed lines.md
@@ -0,0 +1,112 @@
+---
+title: 38. How to set VChart axis gridlines as dashed lines？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set VChart axis gridlines as dashed lines？
+
+
+## Problem Description
+
+How to set the grid lines of the coordinate axis in VChart as dashed lines and adjust the style of the dashed lines?
+
+
+## Solution
+
+In VChart, the configuration item for axis gridline style is `axes[i].grid.style `. You can adjust the solid line to the dashed line effect you want by configuring the `lineDash`property.
+`lineDash `uses a set of values to specify the alternating length of lines and gaps that describe the pattern. For example:
+```
+lineDash: [2, 3];
+lineDash: [0]; // solid line
+```
+## Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ axes:[
+ {
+ orient:'left',
+ grid:{
+ style:{
+ stroke:"black",
+ lineDash:[5,5]
+ }
+ }
+ },
+ {
+ orient:'bottom',
+ grid:{
+ visible: true,
+ style:{
+ stroke:"black",
+ lineDash:[5,5]
+ }
+ }
+ }
+ ],
+ xField: 'time',
+ yField: 'value'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* [lineDash Configuration Items](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FbarChart-extensionMark-symbol%23style.lineDash(number%5B%5D))
+* [Axis Tutorial](https%3A%2F%2Fvisactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FAxes)
+* github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/120- How to set an adaptive y-axis range in a line chart.md b/docs/assets/faq/en/120- How to set an adaptive y-axis range in a line chart.md
new file mode 100644
index 000000000..7f004a5ac
--- /dev/null
+++ b/docs/assets/faq/en/120- How to set an adaptive y-axis range in a line chart.md
@@ -0,0 +1,97 @@
+---
+title: How to set adaptive y-axis range for line chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set adaptive y-axis range for line chart?
+
+
+## Problem Description
+
+As shown in the figure below, the data range of my line chart is between 80-100. How can I set it so that the Y-axis range can adapt to the range of this data?
+
+
+
+
+## Solution
+
+By default, zero is configured as true for continuous axes, and the axis range will default to starting from the 0 value. If you want the range of the continuous axis to adapt to the data range, you can turn off this configuration item:
+```
+ axes: [
+ { orient: 'left', zero: false },
+ ]
+```
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 80
+ },
+ {
+ time: '4:00',
+ value: 90
+ },
+ {
+ time: '6:00',
+ value: 85
+ },
+ {
+ time: '8:00',
+ value: 84
+ },
+ {
+ time: '10:00',
+ value: 96
+ },
+ {
+ time: '12:00',
+ value: 97
+ },
+ {
+ time: '14:00',
+ value: 97
+ },
+ {
+ time: '16:00',
+ value: 86
+ },
+ {
+ time: '18:00',
+ value: 95
+ }
+ ]
+ },
+ xField: 'time',
+ yField: 'value',
+ axes: [
+ { orient: 'left', zero: false },
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* github：https://github.com/VisActor/VChart
+* https://visactor.io/vchart/option/lineChart-axes-linear#zero
+
diff --git a/docs/assets/faq/en/121- How to customize the rich text axis label style in radar charts.md b/docs/assets/faq/en/121- How to customize the rich text axis label style in radar charts.md
new file mode 100644
index 000000000..993c2e518
--- /dev/null
+++ b/docs/assets/faq/en/121- How to customize the rich text axis label style in radar charts.md
@@ -0,0 +1,199 @@
+---
+title: 13. How to customize radar chart axis labels to richtext in VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to customize radar chart axis labels to richtext in VChart?
+## Description
+
+Expect to support custom icons and different text styles in labels, similar to:
+
+
+## Solution
+
+First, let's analyze the requirements. The label of the **angle axis **in polar coordinates is shown in the figure.
+1. **Add shaft configuration**
+In VChart, you can configure the axis through the `axes`property. `Axes`receives an array, adds an item, and sets the axis type of `axes [0].type: 'angle' `to angle axis;
+1. **Configuration axis label**
+Configure `axes [0].label `to rich text by formatting function `formatMethod`.
+`formatMethod `returns a configuration object with rich text content
+1. `Type: 'rich' `: defines the return text type as rich text
+1. `Text `: Detailed configuration of rich text. Supports two types of text and image. Detailed configuration can refer to the [configuration item document ](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FbarChart%23title.textStyle.character).
+```
+formatMethod: (value, data, c, d) => {
+ return {
+ type: "rich",
+ text: [
+ {
+ image:
+ '',
+ width: 2,
+ height: 10,
+ },
+ {
+ text: ` ${value} `,
+ fontSize: 16,
+ fill: "black",
+ fontWeight: "bold",
+ },
+ {
+ text: ` ${values.find((v) => v.key === value)?.value} `,
+ fontSize: 16,
+ fill: "rgb(22,100,255)",
+ fontWeight: "bold",
+ },
+ ],
+ };
+},
+```
+
+
+
+
+
+
+## Code Example
+
+```
+const values = [
+ {
+ key: 'Strength',
+ value: 5
+ },
+ {
+ key: 'Speed',
+ value: 5
+ },
+ {
+ key: 'Shooting',
+ value: 3
+ },
+ {
+ key: 'Endurance',
+ value: 5
+ },
+ {
+ key: 'Precision',
+ value: 5
+ },
+ {
+ key: 'Growth',
+ value: 5
+ }
+ ];
+
+const spec = {
+ type: 'radar',
+ data: [
+ {
+ id: 'radarData',
+ values
+ }
+ ],
+ categoryField: 'key',
+ valueField: 'value',
+ point: {
+ visible: false // disable point
+ },
+ area: {
+ visible: true, // display area
+ state: {
+ // The style in the hover state of the area
+ hover: {
+ fillOpacity: 0.5
+ }
+ }
+ },
+ line: {
+ style: {
+ lineWidth: 4
+ }
+ },
+ axes: [
+ {
+ orient: 'radius', // radius axis
+ zIndex: 100,
+ min: 0,
+ max: 8,
+ domainLine: {
+ visible: false
+ },
+ label: {
+ visible: true,
+ space: 0,
+ style: {
+ textAlign: 'center',
+ stroke: '#fff',
+ lineWidth: 4
+ }
+ },
+ grid: {
+ smooth: false,
+ style: {
+ lineDash: [0]
+ }
+ }
+ },
+ {
+ orient: 'angle', // angle axis
+ zIndex: 50,
+ tick: {
+ visible: false
+ },
+ domainLine: {
+ visible: false
+ },
+ label: {
+ space: 20,
+ formatMethod: (value, data,c,d) => {
+ console.log(value,data,c,d)
+ return {
+ type: 'rich',
+ text: [
+ {
+ image: '',
+ width: 2,
+ height: 10
+ },
+ {
+ text: ` ${value} `,
+ fontSize: 16,
+ fill: 'black',
+ fontWeight: 'bold'
+ },
+ {
+ text: ` ${values.find(v => v.key === value)?.value} `,
+ fontSize: 16,
+ fill: 'rgb(22,100,255)',
+ fontWeight: 'bold'
+ }
+ ]
+ };
+ }
+ },
+ grid: {
+ style: {
+ lineDash: [0]
+ }
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Related Documentation
+
+richtext demo：https://visactor.io/vchart/demo/label/richtext-label
+Related api：https://visactor.io/vchart/option/radarChart-axes-band#label.formatMethod
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/125- How to make the word cloud fully fill the outer container.md b/docs/assets/faq/en/125- How to make the word cloud fully fill the outer container.md
new file mode 100644
index 000000000..21e8bd0b7
--- /dev/null
+++ b/docs/assets/faq/en/125- How to make the word cloud fully fill the outer container.md
@@ -0,0 +1,57 @@
+---
+title: 99. How the word cloud fills the outer container display
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to display a word cloud on top of the outer container?
+
+
+## Description
+
+We have a relatively small scene displaying word clouds, hoping to make the word cloud fill the entire container as much as possible. I tried the official website, but it seems that it cannot fill the container
+
+
+
+
+## Solution
+
+This is because in VChart, the word cloud is defaulted to use `'circle ' `circular markShape mask graphics, if you want to fill the container as much as possible, you can use `'rect' `shape.
+## Code example
+
+```
+
+const spec = {
+ type: 'wordCloud',
+ nameField: 'Keyword',
+ valueField: 'Score',
+ data: {
+ name: 'baseData',
+ values: [ { "Keyword": "预期寿命", "Score": 0.8571 }, { "Keyword": "心率", "Score": 0.8571 }, { "Keyword": "疾病", "Score": 0.7597 }, { "Keyword": "心跳快慢", "Score": 0.5714 }, { "Keyword": "心跳", "Score": 0.5714 }, { "Keyword": "郭艺芳", "Score": 0.5624 }, { "Keyword": "陈清勇", "Score": 0.5624 }, { "Keyword": "风险因素", "Score": 0.4874 }, { "Keyword": "心动过速", "Score": 0.4874 }, { "Keyword": "寿命", "Score": 0.3849 }, { "Keyword": "快慢", "Score": 0.3844 }, { "Keyword": "生活习惯", "Score": 0.2857 }, { "Keyword": "河北省人民医院", "Score": 0.2857 }, { "Keyword": "四川大学华西医院", "Score": 0.2186 }, { "Keyword": "华西医院", "Score": 0.2121 }, { "Keyword": "阿尔茨海默病", "Score": 0.2067 }, { "Keyword": "人群", "Score": 0.1984 }, { "Keyword": "痴呆", "Score": 0.19 }, { "Keyword": "研究", "Score": 0.1761 }, { "Keyword": "健康", "Score": 0.1754 }, { "Keyword": "习惯", "Score": 0.1709 }, { "Keyword": "医院", "Score": 0.1664 }, { "Keyword": "风险", "Score": 0.1647 }, { "Keyword": "心内科", "Score": 0.16 }, { "Keyword": "生活", "Score": 0.158 }, { "Keyword": "工作", "Score": 0.1554 }, { "Keyword": "心血管疾病", "Score": 0.1299 }, { "Keyword": "咖啡", "Score": 0.0974 }, { "Keyword": "志飞", "Score": 0.0974 }, { "Keyword": "中国妇女报", "Score": 0.0974 }, { "Keyword": "人民医院", "Score": 0.0913 } ]
+ },
+ maskShape: 'rect',
+ width: 400,
+ height: 300,
+ background: '#cccc',
+ padding: 10
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/WordCloud
+* API：https://visactor.io/vchart/option/wordCloudChart#type
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/126- Line chart in combo chart is obscured, preventing tooltip hover.md b/docs/assets/faq/en/126- Line chart in combo chart is obscured, preventing tooltip hover.md
new file mode 100644
index 000000000..67376c8fd
--- /dev/null
+++ b/docs/assets/faq/en/126- Line chart in combo chart is obscured, preventing tooltip hover.md
@@ -0,0 +1,29 @@
+---
+title: 107. The combination chart and line chart are blocked, causing the tooltip to not be hover.
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+The combination chart and line chart are blocked, causing the tooltip to not be hover.
+
+
+## Description
+
+The combination chart and line chart are blocked by the column, causing hover to fail to produce tooltip.
+
+
+
+
+## Solution
+
+You can adjust the order of series declaration, declare bar series first and then declare line series, so that the polyline will be displayed above the column.
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination
+* API：https://visactor.io/vchart/option/commonChart
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/127- How to set the x and y axis labels and bar size in vchart bar charts.md b/docs/assets/faq/en/127- How to set the x and y axis labels and bar size in vchart bar charts.md
new file mode 100644
index 000000000..2822e9e56
--- /dev/null
+++ b/docs/assets/faq/en/127- How to set the x and y axis labels and bar size in vchart bar charts.md
@@ -0,0 +1,95 @@
+---
+title: How to set the x and y axis labels and bar size in vchart bar chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+Title
+How to set the x and y axis labels and bar size in vchart bar chart?
+
+
+Description
+I am using vchart bar chart and I want to set the font size of the x and y axis labels and the size of the bars. However, I couldn't find the corresponding configuration options in the documentation. I tried some parameters, but none of them worked. How can I set them?
+
+
+Solution
+The font size of the x and y axis labels and the size of the bars in vchart bar chart can be configured through the style field of the axis label. At the same time, the size of the bars can be adjusted by adjusting the width of the bar chart.
+
+
+Sample Code
+```
+const spec = {
+ type: 'bar',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ barWidth: '50%',
+ barMinWidth: 20,
+ barMaxWidth: 50,
+ xField: 'time',
+ yField: 'value',
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ formatMethod(val) {
+ return
+`${(val * 100).toFixed(2)}%``
+`;
+ },
+ style: { fontSize: 20 }
+ }
+ },
+ { orient: 'bottom', label: { style: { fontSize: 20 } } }
+ ]
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+Result
+
+
+
+
+Related Documentation
+* Axis label: [https://visactor.bytedance.net/vchart/option/barChart-axes-linear#label.style.fontSize](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Foption%2FbarChart-axes-linear%23label.style.fontSize)
+* barWidth: [https://visactor.bytedance.net/vchart/option/barChart#barWidth](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Foption%2FbarChart%23barWidth)
\ No newline at end of file
diff --git a/docs/assets/faq/en/128- How to achieve overlap of bar chart data in the same dimension rather than stacking.md b/docs/assets/faq/en/128- How to achieve overlap of bar chart data in the same dimension rather than stacking.md
new file mode 100644
index 000000000..2b467ffd3
--- /dev/null
+++ b/docs/assets/faq/en/128- How to achieve overlap of bar chart data in the same dimension rather than stacking.md
@@ -0,0 +1,149 @@
+---
+title: 0. How to achieve a bar chart similar to the stacked column chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to achieve a bar chart similar to the stacked column chart
+
+
+## Description
+
+Seemly to https://www.visactor.io/vchart/demo/bar-chart/stack-column, how to make bars of different colors start from the y-axis zero scale and overlap with each other rather than stacking vertically?
+
+
+
+
+
+
+## Solution
+
+The solution varies depending on the chart library being used. Based on the provided demo, you simply need to set the corresponding field to false in order to disable stacking.
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: false,
+ legends: {
+ visible: true
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ },
+
+ }
+};
+```
+## Results
+
+Online demo：https://codesandbox.io/s/bar-chart-stack-false-cr6667
+
+
+
+
+## Related Documentation
+
+
+
+
+
+Stacked Bar Chart Demo：https://www.visactor.io/vchart/demo/bar-chart/stack-column
+Bar Chart Tutorial：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Bar
+Related api：https://www.visactor.io/vchart/option/barChart#stack
+github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/131- Can the tick range of a continuous axis be configured to closely match the data range.md b/docs/assets/faq/en/131- Can the tick range of a continuous axis be configured to closely match the data range.md
new file mode 100644
index 000000000..1b0083c56
--- /dev/null
+++ b/docs/assets/faq/en/131- Can the tick range of a continuous axis be configured to closely match the data range.md
@@ -0,0 +1,92 @@
+---
+title: Can the graduated range of a continuous shaft be adjusted as close to the data range as possible?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+Can the graduated range of a continuous shaft be adjusted as close to the data range as possible?
+## Problem Description
+
+In the following line graph, the scale range of the continuous axis is much larger than the actual data range. Can it be configured to make the scale range closer to the data range?
+
+
+## Solution
+
+The continuous axis tick algorithm is calculated based on a series of rules, where the axis tick range and the actual data range are also indicators. If you need to further optimize the axis tick range, there are two optimization points:
+* The tick can be adjusted not to be forced to start from 0 by using `zero: false`
+* The tick algorithm can be considered to switch to the d3 algorithm. The d3 tick algorithm is better in ensuring data range.
+```
+axes: [{
+ orient: 'left',
+ tick: {
+ tickMode: 'd3'
+ },
+ zero: false
+ }]
+```
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ xField: 'time',
+ yField: 'value',
+ axes: [{
+ orient: 'left',
+ tick: {
+ tickMode: 'd3'
+ },
+ zero: false
+ }]
+};
+```
+## Result Presentation
+
+
+
+## Related documents
+
+* [github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+* [Axis configuration document](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FlineChart-axes-linear%23tick.tickMode('average'%257C'd3')%2520%3D%2520'average')
\ No newline at end of file
diff --git a/docs/assets/faq/en/132- How to customize slice colors in VChart pie charts.md b/docs/assets/faq/en/132- How to customize slice colors in VChart pie charts.md
new file mode 100644
index 000000000..9a719353b
--- /dev/null
+++ b/docs/assets/faq/en/132- How to customize slice colors in VChart pie charts.md
@@ -0,0 +1,134 @@
+---
+title: 94. How to customize the sector color of a pie chart using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to customize the sector color of a pie chart ?
+## Description
+
+I have a pie chart and I don't want to specify a domain. Instead, I want the colors to iterate from the range and be reused. How should I handle this?
+## Solution
+
+Solutions vary among different chart libraries.
+VChart offers the 'ordinal color feature for customizing colors.
+* `color.range` is used to define a color sequence, and the chart automatically assigns colors to each pie slice. When there are insufficient colors, they are recycled. Within `ordinal color`, `range` is discrete.
+* `color.domain` is used to define the data value range that inputs data maps to the color scale. Within `ordinal color`, `domain` is discrete.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ color: {
+ type: 'ordinal',
+ // optional domain
+ // domain: [
+ // "oxygen",
+ // "silicon",
+ // "aluminum",
+ // "iron",
+ // "calcium",
+ // "sodium",
+ // "potassium",
+ // "others"
+ // ],
+ range: [
+ "red",
+ "green",
+ "blue",
+ ]
+ },
+ pie: {
+ style: {
+ cornerRadius: 10
+ },
+ state: {
+ hover: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ },
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+## Solution
+
+
+
+You can adjust the level of the element when hover, so that the hover element is always displayed above other sectors, which can avoid the problem of stroke obstruction
+```
+ pie: {
+ state: {
+ hover: {
+ stroke: 'black',
+ lineWidth: 4,
+ zIndex: 1
+ }
+ }
+ },
+```
+## Code example
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ valueField: 'value',
+ categoryField: 'type',
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true
+ },
+ pie: {
+ state: {
+ hover: {
+ stroke: 'black',
+ lineWidth: 4,
+ zIndex: 1
+ }
+ }
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* github：https://www.visactor.io/vchart/option/pieChart#pie.style.zIndex
+* Related demo: https://www.visactor.io/vchart/demo/pie-chart/basic-pie
+
+
+
diff --git a/docs/assets/faq/en/137- Does the bar chart support setting colors for individual columns.md b/docs/assets/faq/en/137- Does the bar chart support setting colors for individual columns.md
new file mode 100644
index 000000000..b36a6aa9e
--- /dev/null
+++ b/docs/assets/faq/en/137- Does the bar chart support setting colors for individual columns.md
@@ -0,0 +1,103 @@
+---
+title: 97. How to set a single column color in a bar chart, using VChart？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set a single column color in a bar chart?
+## Description
+
+How do I set the color of a specific column independently?
+## Solution
+
+Different chart libraries have different solutions. VChart allows users to control styles through callback functions, including color, stroke, and other style configurations.
+Bar charts can control colors by configuring `bar.style.fill`.
+`fill` supports callback functions, which can modify the style of a certain column through `datum`, and other data can get the original grouped colors through the `seriesColor` interface.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "bar",
+ data: [
+ {
+ id: "barData",
+ values: [
+ { type: "Autocracies", year: "1930", value: 129 },
+ { type: "Autocracies", year: "1940", value: 133 },
+ { type: "Autocracies", year: "1950", value: 130 },
+ { type: "Autocracies", year: "1960", value: 126 },
+ { type: "Autocracies", year: "1970", value: 117 },
+ { type: "Autocracies", year: "1980", value: 114 },
+ { type: "Autocracies", year: "1990", value: 111 },
+ { type: "Autocracies", year: "2000", value: 89 },
+ { type: "Autocracies", year: "2010", value: 80 },
+ { type: "Autocracies", year: "2018", value: 80 },
+ { type: "Democracies", year: "1930", value: 22 },
+ { type: "Democracies", year: "1940", value: 13 },
+ { type: "Democracies", year: "1950", value: 25 },
+ { type: "Democracies", year: "1960", value: 29 },
+ { type: "Democracies", year: "1970", value: 38 },
+ { type: "Democracies", year: "1980", value: 41 },
+ { type: "Democracies", year: "1990", value: 57 },
+ { type: "Democracies", year: "2000", value: 87 },
+ { type: "Democracies", year: "2010", value: 98 },
+ { type: "Democracies", year: "2018", value: 99 },
+ ],
+ },
+ ],
+ xField: ["year", "type"],
+ yField: "value",
+ seriesField: "type",
+ bar: {
+ style: {
+ fill: (datum, chart) => {
+ if (datum["year"] === "2000") {
+ return "red";
+ }
+ // origin color
+ return chart.seriesColor(datum["type"]);
+ },
+ },
+ },
+ legends: {
+ visible: true,
+ orient: "top",
+ position: "start",
+ },
+ };
+
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Solution
+
+If you want to achieve the highlighting effect in Figure 2, you need to configure the interaction states of `node` and `link` under the premise of `emphasis`. The above figure involves two interaction states: `selected` and `blur`, as follows:
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'sankey',
+ data: [
+ {
+ values: [
+ {
+ nodes: [
+ { nodeName: "Agricultural 'waste'" },
+ { nodeName: 'Bio-conversion' },
+ { nodeName: 'Liquid' },
+ { nodeName: 'Losses' },
+ { nodeName: 'Solid' },
+ { nodeName: 'Gas' },
+ { nodeName: 'Biofuel imports' },
+ { nodeName: 'Biomass imports' },
+ { nodeName: 'Coal imports' },
+ { nodeName: 'Coal' },
+ { nodeName: 'Coal reserves' },
+ { nodeName: 'District heating' },
+ { nodeName: 'Industry' },
+ { nodeName: 'Heating and cooling - commercial' },
+ { nodeName: 'Heating and cooling - homes' },
+ { nodeName: 'Electricity grid' },
+ { nodeName: 'Over generation / exports' },
+ { nodeName: 'H2 conversion' },
+ { nodeName: 'Road transport' },
+ { nodeName: 'Agriculture' },
+ { nodeName: 'Rail transport' },
+ { nodeName: 'Lighting & appliances - commercial' },
+ { nodeName: 'Lighting & appliances - homes' },
+ { nodeName: 'Gas imports' },
+ { nodeName: 'Ngas' },
+ { nodeName: 'Gas reserves' },
+ { nodeName: 'Thermal generation' },
+ { nodeName: 'Geothermal' },
+ { nodeName: 'H2' },
+ { nodeName: 'Hydro' },
+ { nodeName: 'International shipping' },
+ { nodeName: 'Domestic aviation' },
+ { nodeName: 'International aviation' },
+ { nodeName: 'National navigation' },
+ { nodeName: 'Marine algae' },
+ { nodeName: 'Nuclear' },
+ { nodeName: 'Oil imports' },
+ { nodeName: 'Oil' },
+ { nodeName: 'Oil reserves' },
+ { nodeName: 'Other waste' },
+ { nodeName: 'Pumped heat' },
+ { nodeName: 'Solar PV' },
+ { nodeName: 'Solar Thermal' },
+ { nodeName: 'Solar' },
+ { nodeName: 'Tidal' },
+ { nodeName: 'UK land based bioenergy' },
+ { nodeName: 'Wave' },
+ { nodeName: 'Wind' }
+ ],
+ links: [
+ { source: 0, target: 1, value: 124.729 },
+ { source: 1, target: 2, value: 0.597 },
+ { source: 1, target: 3, value: 26.862 },
+ { source: 1, target: 4, value: 280.322 },
+ { source: 1, target: 5, value: 81.144 },
+ { source: 6, target: 2, value: 35 },
+ { source: 7, target: 4, value: 35 },
+ { source: 8, target: 9, value: 11.606 },
+ { source: 10, target: 9, value: 63.965 },
+ { source: 9, target: 4, value: 75.571 },
+ { source: 11, target: 12, value: 10.639 },
+ { source: 11, target: 13, value: 22.505 },
+ { source: 11, target: 14, value: 46.184 },
+ { source: 15, target: 16, value: 104.453 },
+ { source: 15, target: 14, value: 113.726 },
+ { source: 15, target: 17, value: 27.14 },
+ { source: 15, target: 12, value: 342.165 },
+ { source: 15, target: 18, value: 37.797 },
+ { source: 15, target: 19, value: 4.412 },
+ { source: 15, target: 13, value: 40.858 },
+ { source: 15, target: 3, value: 56.691 },
+ { source: 15, target: 20, value: 7.863 },
+ { source: 15, target: 21, value: 90.008 },
+ { source: 15, target: 22, value: 93.494 },
+ { source: 23, target: 24, value: 40.719 },
+ { source: 25, target: 24, value: 82.233 },
+ { source: 5, target: 13, value: 0.129 },
+ { source: 5, target: 3, value: 1.401 },
+ { source: 5, target: 26, value: 151.891 },
+ { source: 5, target: 19, value: 2.096 },
+ { source: 5, target: 12, value: 48.58 },
+ { source: 27, target: 15, value: 7.013 },
+ { source: 17, target: 28, value: 20.897 },
+ { source: 17, target: 3, value: 6.242 },
+ { source: 28, target: 18, value: 20.897 },
+ { source: 29, target: 15, value: 6.995 },
+ { source: 2, target: 12, value: 121.066 },
+ { source: 2, target: 30, value: 128.69 },
+ { source: 2, target: 18, value: 135.835 },
+ { source: 2, target: 31, value: 14.458 },
+ { source: 2, target: 32, value: 206.267 },
+ { source: 2, target: 19, value: 3.64 },
+ { source: 2, target: 33, value: 33.218 },
+ { source: 2, target: 20, value: 4.413 },
+ { source: 34, target: 1, value: 4.375 },
+ { source: 24, target: 5, value: 122.952 },
+ { source: 35, target: 26, value: 839.978 },
+ { source: 36, target: 37, value: 504.287 },
+ { source: 38, target: 37, value: 107.703 },
+ { source: 37, target: 2, value: 611.99 },
+ { source: 39, target: 4, value: 56.587 },
+ { source: 39, target: 1, value: 77.81 },
+ { source: 40, target: 14, value: 193.026 },
+ { source: 40, target: 13, value: 70.672 },
+ { source: 41, target: 15, value: 59.901 },
+ { source: 42, target: 14, value: 19.263 },
+ { source: 43, target: 42, value: 19.263 },
+ { source: 43, target: 41, value: 59.901 },
+ { source: 4, target: 19, value: 0.882 },
+ { source: 4, target: 26, value: 400.12 },
+ { source: 4, target: 12, value: 46.477 },
+ { source: 26, target: 15, value: 525.531 },
+ { source: 26, target: 3, value: 787.129 },
+ { source: 26, target: 11, value: 79.329 },
+ { source: 44, target: 15, value: 9.452 },
+ { source: 45, target: 1, value: 182.01 },
+ { source: 46, target: 15, value: 19.013 },
+ { source: 47, target: 15, value: 289.366 }
+ ]
+ }
+ ]
+ }
+ ],
+ categoryField: 'nodeName',
+ valueField: 'value',
+ sourceField: 'source',
+ targetField: 'target',
+
+ nodeAlign: 'justify',
+ nodeGap: 8,
+ nodeWidth: 10,
+ minNodeHeight: 4,
+
+ title: {
+ text: 'How energy is converted or transmitted before being consumed or lost',
+ subtext: 'Data: Department of Energy & Climate Change via Tom Counsell',
+ subtextStyle: {
+ fontSize: 12
+ }
+ },
+
+ label: {
+ visible: true,
+ style: {
+ fontSize: 10
+ }
+ },
+
+ node: {
+ state: {
+ hover: {
+ stroke: '#333333'
+ },
+ selected: {
+ fillOpacity: 1
+ },
+ blur: {
+ fillOpacity: 0.1
+ }
+ }
+ },
+ link: {
+ state: {
+ hover: {
+ fillOpacity: 1
+ },
+ selected: {
+ fillOpacity: 1
+ },
+ blur: {
+ fillOpacity: 0.1
+ }
+ }
+ },
+
+ emphasis: {
+ enable: true,
+ effect: 'adjacency'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online effect reference: https://visactor.io/vchart/demo/sankey-chart/nameKey-sankey
+
+
+## Related Documents
+
+Demo: https://visactor.io/vchart/demo/sankey-chart/nameKey-sankey
+Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Sankey
+API: https://visactor.io/vchart/option/sankeyChart#emphasis，https://visactor.io/vchart/option/sankeyChart#node.state，https://visactor.io/vchart/option/sankeyChart#link.state
+GitHub: https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/141- How to draw a multi-row layout line chart.md b/docs/assets/faq/en/141- How to draw a multi-row layout line chart.md
new file mode 100644
index 000000000..82866836b
--- /dev/null
+++ b/docs/assets/faq/en/141- How to draw a multi-row layout line chart.md
@@ -0,0 +1,260 @@
+---
+title: 8. How to draw a line chart with a multi-line layout
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to draw a line chart with a multi-line layout
+
+
+## Description
+
+Can line charts achieve grouped line charts with the following multi-line layout?
+
+
+## Solution
+
+VChart can be combined with combo diagrams and grid layouts, refer to demo: https://visactor.io/vchart/demo/combination/col-line.
+## Code Example
+
+```
+const regionStyle = {
+ stroke: 'rgb(201,205,212)',
+ lineWidth: 1,
+ strokeTop: true,
+ strokeBottom: false,
+ strokeLeft: false,
+ strokeRight: false
+};
+const leftAxesCommonSpec = {
+ expand: { max: 0.2 },
+ label: { flush: true, visible: true },
+ tick: { visible: false },
+ forceTickCount: 3
+};
+const spec = {
+ type: 'common',
+ layout: {
+ type: 'grid',
+ col: 2,
+ row: 6,
+ elements: [
+ {
+ modelId: 'legend',
+ col: 0,
+ colSpan: 2,
+ row: 5
+ },
+ {
+ modelId: 'Social Penetration',
+ col: 1,
+ row: 0
+ },
+ {
+ modelId: 'Engagement - Socialization',
+ col: 1,
+ row: 1
+ },
+ {
+ modelId: 'Penetration of Private Messages',
+ col: 1,
+ row: 2
+ },
+ {
+ modelId: 'Number of Private Messages per User',
+ col: 1,
+ row: 3
+ },
+ {
+ modelId: 'Social Penetrationleft',
+ col: 0,
+ row: 0
+ },
+ {
+ modelId: 'Engagement - Socialization-left',
+ col: 0,
+ row: 1
+ },
+ {
+ modelId: 'Penetration of Private Messagesleft',
+ col: 0,
+ row: 2
+ },
+ {
+ modelId: 'Number of Private Messages per Userleft',
+ col: 0,
+ row: 3
+ },
+ {
+ modelId: 'Number of Private Messages per User-bottom',
+ col: 1,
+ row: 4
+ }
+ ]
+ },
+ region: [
+ {
+ id: 'Social Penetration',
+ style: {
+ ...regionStyle,
+ strokeTop: false
+ }
+ },
+ {
+ id: 'Engagement - Socialization',
+ style: regionStyle
+ },
+ {
+ id: 'Penetration of Private Messages',
+ style: regionStyle
+ },
+ {
+ id: 'Number of Private Messages per User',
+ style: regionStyle
+ }
+ ],
+ legends: {
+ padding: {
+ top: 10
+ },
+ visible: true,
+ orient: 'bottom',
+ id: 'legend',
+ regionId: [
+ 'Social Penetration',
+ 'Engagement - Socialization',
+ 'Penetration of Private Messages',
+ 'Number of Private Messages per User'
+ ]
+ },
+ seriesField: 'type',
+ tooltip: {
+ dimension: {
+ title: {
+ value: datum => {
+ return `第 ${datum.x} 天`;
+ }
+ },
+ content: [
+ {
+ key: datum => datum.type,
+ value: datum => datum.y
+ }
+ ]
+ }
+ },
+ series: [
+ {
+ id: 'Social Penetrationseries0',
+ regionId: 'Social Penetration',
+ type: 'line',
+ data: { id: 'Social Penetration' },
+ xField: 'x',
+ yField: 'y'
+ },
+ {
+ id: 'Engagement - Socialization-series0',
+ regionId: 'Engagement - Socialization',
+ type: 'line',
+ data: { id: 'Engagement - Socialization' },
+ xField: 'x',
+ yField: 'y'
+ },
+ {
+ id: 'Penetration of Private Messagesseries0',
+ regionId: 'Penetration of Private Messages',
+ type: 'line',
+ data: { id: 'Penetration of Private Messages' },
+ xField: 'x',
+ yField: 'y'
+ },
+ {
+ id: 'Number of Private Messages per Userseries0',
+ regionId: 'Number of Private Messages per User',
+ type: 'line',
+ data: { id: 'Number of Private Messages per User' },
+ xField: 'x',
+ yField: 'y'
+ }
+ ],
+ axes: [
+ {
+ id: 'Social Penetrationleft',
+ regionId: 'Social Penetration',
+ orient: 'left',
+ title: { visible: true, text: 'SP' },
+ ...leftAxesCommonSpec
+ },
+ {
+ id: 'Engagement - Socialization-left',
+ regionId: 'Engagement - Socialization',
+ orient: 'left',
+ title: { visible: true, text: 'ES' },
+ ...leftAxesCommonSpec
+ },
+ {
+ id: 'Penetration of Private Messagesleft',
+ regionId: 'Penetration of Private Messages',
+ orient: 'left',
+ title: { visible: true, text: 'Penetration of PM' },
+ ...leftAxesCommonSpec
+ },
+ {
+ id: 'Number of Private Messages per Userleft',
+ regionId: 'Number of Private Messages per User',
+ orient: 'left',
+ title: { visible: true, text: 'PM per User' },
+ ...leftAxesCommonSpec
+ },
+ {
+ id: 'Number of Private Messages per User-bottom',
+ regionId: [
+ 'Social Penetration',
+ 'Engagement - Socialization',
+ 'Penetration of Private Messages',
+ 'Number of Private Messages per User'
+ ],
+ orient: 'bottom',
+ label: {
+ firstVisible: true,
+ lastVisible: true,
+ visible: true
+ },
+ tick: { visible: false },
+ paddingInner: 0.99,
+ paddingOuter: 0
+ }
+ ]
+};
+
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/tutorials/col-line-data.json').then(res => {
+ res.json().then(dataJson => {
+ spec.series.forEach(s => {
+ s.data.values = dataJson[s.data.id];
+ });
+ const vchart = new VChart(spec, { dom: CONTAINER_ID });
+ vchart.renderSync();
+
+ // Just for the convenience of console debugging, DO NOT COPY!
+ window['vchart'] = vchart;
+ });
+});
+```
+## Results
+
+https://visactor.io/vchart/demo/combination/col-line
+
+
+## Related Documents
+
+* Demo: https://visactor.io/vchart/demo/combination/col-line
+* Tutorial:
+* Common chart: https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination
+* Grid layout: https://visactor.io/vchart/guide/tutorial_docs/Layout/Layout_Cases/example-grid
+* API:
+* Common chart: https://visactor.io/vchart/option/commonChart
+* Grid layout: https://visactor.io/vchart/option/commonChart#layout.type
+* GitHub: https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/142- How to add tracking points in VChart based on Tooltip behavior.md b/docs/assets/faq/en/142- How to add tracking points in VChart based on Tooltip behavior.md
new file mode 100644
index 000000000..908539abc
--- /dev/null
+++ b/docs/assets/faq/en/142- How to add tracking points in VChart based on Tooltip behavior.md
@@ -0,0 +1,91 @@
+---
+title: 14. How to perform event tracking based on Tooltip behavior in VChart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to perform event tracking based on Tooltip behavior in VChart
+## Description
+
+When users view the chart, they need to know when the tooltip viewing operation was performed on the chart, and the behavior event tracking of the chart needs to be reported.
+## Solution
+
+Different chart libraries have different solutions. VChart provides Tooltip-related events, involving various stages such as triggering tooltips, updating tooltips, and destroying tooltips. You can use `dimensionHover`, `tooltipShow`, and `tooltipHide` events to obtain the required information.
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { type: 'Autocracies', year: '1930', value: 129 },
+ { type: 'Autocracies', year: '1940', value: 133 },
+ { type: 'Autocracies', year: '1950', value: 130 },
+ { type: 'Autocracies', year: '1960', value: 126 },
+ { type: 'Autocracies', year: '1970', value: 117 },
+ { type: 'Autocracies', year: '1980', value: 114 },
+ { type: 'Autocracies', year: '1990', value: 111 },
+ { type: 'Autocracies', year: '2000', value: 89 },
+ { type: 'Autocracies', year: '2010', value: 80 },
+ { type: 'Autocracies', year: '2018', value: 80 },
+ { type: 'Democracies', year: '1930', value: 22 },
+ { type: 'Democracies', year: '1940', value: 13 },
+ { type: 'Democracies', year: '1950', value: 25 },
+ { type: 'Democracies', year: '1960', value: 29 },
+ { type: 'Democracies', year: '1970', value: 38 },
+ { type: 'Democracies', year: '1980', value: 41 },
+ { type: 'Democracies', year: '1990', value: 57 },
+ { type: 'Democracies', year: '2000', value: 87 },
+ { type: 'Democracies', year: '2010', value: 98 },
+ { type: 'Democracies', year: '2018', value: 99 }
+ ]
+ }
+ ],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ legends: {
+ visible: true,
+ orient: 'top',
+ position: 'start'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+vchart.on('dimensionHover', (params)=>{
+ if(params.action === 'enter'){
+ console.log('Triggered when enter Dimension', )
+ } else if(params.action ==='move'){
+ console.log('Triggered when move Dimension', )
+ } else if(params.action ==='leave'){
+ console.log('Triggered when leave Dimension', )
+ }
+})
+
+vchart.on('tooltipShow', (params) => {
+ console.log('Triggered every rendering')
+ if(params.changePositionOnly === true){
+ console.log('Triggered position change only')
+ } else {
+ console.log('Triggered target mark change')
+ }
+})
+
+vchart.on('tooltipHide', (params) => {
+ console.log('Triggered every hide')
+})
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Result
+
+A simple online demo: https://codesandbox.io/p/sandbox/vchart-tooltip-event-gmcgqf?file=%2Fsrc%2Findex.js%3A49%2C1
+## Related Documentation
+
+Tooltip tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip
+Github: https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/143- How to set the maximum number of labels on the X and Y axes.md b/docs/assets/faq/en/143- How to set the maximum number of labels on the X and Y axes.md
new file mode 100644
index 000000000..22bf49ee9
--- /dev/null
+++ b/docs/assets/faq/en/143- How to set the maximum number of labels on the X and Y axes.md
@@ -0,0 +1,301 @@
+---
+title: How to set the maximum number of X-axis and Y-axis labels?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+How to set the maximum number of X-axis and Y-axis labels?
+
+
+## Problem Description
+
+In the following chart, the labels on the x-axis are displayed quite densely. Can we limit the maximum number of labels? Make the x-axis labels look better visually, while all points on the line need to be displayed.
+
+
+
+
+## Solution
+
+In VChart, the number of axis labels is affected by various configurations. There are two ways to limit the number of axis labels:
+* Set `sampling` to `true` so that sampling will be automatically performed according to the width of the labels.
+* Set `tick.tickCount` to specify the number of labels.
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ medalType: 'Gold Medals',
+ count: 40,
+ year: '1952'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 32,
+ year: '1956'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 34,
+ year: '1960'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 36,
+ year: '1964'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 45,
+ year: '1968'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 33,
+ year: '1972'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 34,
+ year: '1976'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: null,
+ year: '1980'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 83,
+ year: '1984'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 36,
+ year: '1988'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 37,
+ year: '1992'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 44,
+ year: '1996'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 37,
+ year: '2000'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 35,
+ year: '2004'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 36,
+ year: '2008'
+ },
+ {
+ medalType: 'Gold Medals',
+ count: 46,
+ year: '2012'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 19,
+ year: '1952'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 25,
+ year: '1956'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 21,
+ year: '1960'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 26,
+ year: '1964'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 28,
+ year: '1968'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 31,
+ year: '1972'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 35,
+ year: '1976'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: null,
+ year: '1980'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 60,
+ year: '1984'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 31,
+ year: '1988'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 34,
+ year: '1992'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 32,
+ year: '1996'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 24,
+ year: '2000'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 40,
+ year: '2004'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 38,
+ year: '2008'
+ },
+ {
+ medalType: 'Silver Medals',
+ count: 29,
+ year: '2012'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 17,
+ year: '1952'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 17,
+ year: '1956'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 16,
+ year: '1960'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 28,
+ year: '1964'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 34,
+ year: '1968'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 30,
+ year: '1972'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 25,
+ year: '1976'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: null,
+ year: '1980'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 30,
+ year: '1984'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 27,
+ year: '1988'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 37,
+ year: '1992'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 25,
+ year: '1996'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 33,
+ year: '2000'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 26,
+ year: '2004'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 36,
+ year: '2008'
+ },
+ {
+ medalType: 'Bronze Medals',
+ count: 29,
+ year: '2012'
+ }
+ ]
+ },
+ xField: 'year',
+ yField: 'count',
+ seriesField: 'medalType',
+ invalidType: 'link',
+ axes: [
+ {
+ orient: 'bottom',
+ tick: {
+ tickCount: 5
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Result Presentation
+
+
+
+## Related Documents
+
+* [Axes Tutorial](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FAxes)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/144- How does the tooltip layer support the display of total data.md b/docs/assets/faq/en/144- How does the tooltip layer support the display of total data.md
new file mode 100644
index 000000000..59bb03447
--- /dev/null
+++ b/docs/assets/faq/en/144- How does the tooltip layer support the display of total data.md
@@ -0,0 +1,173 @@
+---
+title: How to support the display of total data in the Tooltip float layer?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to support the display of total data in the Tooltip float layer?
+## Problem Description
+
+In a chart, if you want to display the aggregated value of all the data, is it achievable?
+
+
+
+
+## Solution
+
+In VChart, there are three types of tooltips:
+* Group Tooltip (group)
+* Dimension Tooltip (dimension)
+* Graphical Element Tooltip (mark)
+For the display of aggregated data mentioned above, Group Tooltip and Dimension Tooltip are applicable, and custom display can be achieved through`tooltip.dimension.updateContent`.
+```
+tooltip: {
+ dimension: {
+ updateContent: (items) => {
+ const total = items.reduce((sum, item) => {
+ return +item.value + sum;
+ }, 0)
+ return [
+ {
+ ...items[0],
+ key: '总计',
+ value: total,
+ hasShape: false,
+ },
+ ...items
+ ];
+ }
+ }
+ }
+```
+## Code Examples
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: true,
+ legends: {
+ visible: true
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ tooltip: {
+ dimension: {
+ updateContent: (items) => {
+ const total = items.reduce((sum, item) => {
+ return +item.value + sum;
+ }, 0)
+ return [
+ {
+ ...items[0],
+ key: '总计',
+ value: total,
+ hasShape: false,
+ },
+ ...items
+ ];
+ }
+ }
+ }
+};
+```
+## Result Display
+
+
+
+## Related documents
+
+* [github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+* [tooltip configuration](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FbarChart%23tooltip.dimension.updateContent)
+* [tooltip formatted content example](https%3A%2F%2Fvisactor.com%2Fvchart%2Fdemo%2Ftooltip%2Fformat-method)
\ No newline at end of file
diff --git a/docs/assets/faq/en/149- How to obtain the relative position of the brush in the coordinate system in the vchart library.md b/docs/assets/faq/en/149- How to obtain the relative position of the brush in the coordinate system in the vchart library.md
new file mode 100644
index 000000000..9df934902
--- /dev/null
+++ b/docs/assets/faq/en/149- How to obtain the relative position of the brush in the coordinate system in the vchart library.md
@@ -0,0 +1,39 @@
+---
+title: 66. How to get the relative position of the brush in the coordinate system in the vchart chart library?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to obtain the relative position of brush in the coordinate system in the vchart chart library?
+
+
+# Problem description
+
+When I was using the vchart library, I encountered a problem. I listened to the onBrushEnd event and wanted to obtain the relative position of the area selected by the brush in the coordinate system. That is, after I drew a frame on the chart, I wanted to obtain the position range of this area on the x/y axis. I tried all the methods I could think of, but did not find the corresponding data.
+
+
+# Solution
+
+According to the design and usage of vchart, currently the vchart API does not directly provide this information, but it is still possible to obtain this necessary information through some other means. The specific steps are as follows:
+1. Use `vchart.getAllComponents () `to find the brush component
+
+
+1. In the brush component, there is a property called `_brushComponent. AABBBounds `, which is the relative position of the checkbox in the region.
+
+
+3. Similarly, with the `vchart.getAllComponents () `method, we can find the components for the x and y axes.
+
+
+4. In the found axis component, we can use the `_scale .invert (position) `method to convert the position of AABBBounds obtained in the previous step to specific values on the x and y axes.
+
+
+In order to prevent a very small position shift when the user clicks and accidentally triggers the brush drawing, we can also set a `sizeThreshold `property for the brush. This property means the checkbox size threshold, which literally means the minimum size of the box you need to draw. The brush event will only be triggered when the size of the box is greater than this threshold.
+
+
+
+
+# Related Documents
+
+* VChart `sizeThreshold `configuration item: https://www.visactor.io/vchart/option/barChart#brush.sizeThreshold
+* VChart github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/15- How to implement line breaks in pie chart labels.md b/docs/assets/faq/en/15- How to implement line breaks in pie chart labels.md
new file mode 100644
index 000000000..f1e65a387
--- /dev/null
+++ b/docs/assets/faq/en/15- How to implement line breaks in pie chart labels.md
@@ -0,0 +1,109 @@
+---
+title: How to achieve line break effect for pie chart labels?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+How to achieve line break effect for pie chart labels?
+
+
+## Solution
+
+The pie chart label supports the formatting method. In the formatting method, we can switch the label to rich text by setting `type: rich` in the return object; rich text supports common line breaks, ICONS, and image displays.
+
+
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '26.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ pie: {
+ style: {
+ cornerRadius: 10
+ },
+ state: {
+ hover: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ },
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true,
+ formatMethod: (label, datum) => {
+ return {
+ type: 'rich',
+ text: [{
+ text: `${label}\n`,
+ fontSize: 12,
+ fill: '#8a8a8a',
+ lineHeight: 20,
+ fontWeight: 400
+ }, {
+ text: `${datum._percent_}%`,
+ fill: '#121212',
+ fontSize: 14,
+ fontWeight: 500,
+ lineHeight: 22,
+ }]
+ }
+ }
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Result Presentation
+
+
+
+## Related documents
+
+* [Rich Text and Dom Extensions](https%3A%2F%2Fvisactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FRichtext_and_Dom)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/150- How to format axis labels.md b/docs/assets/faq/en/150- How to format axis labels.md
new file mode 100644
index 000000000..0a19f25bf
--- /dev/null
+++ b/docs/assets/faq/en/150- How to format axis labels.md
@@ -0,0 +1,98 @@
+---
+title: How to format axis labels?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## **Question Title**
+
+How to format axis labels?
+## **Question Description**
+
+As shown in the figure, when the axis label value is inaccurate with a very long decimal point, can it be formatted?
+
+
+
+## **Solution**
+
+The problem of floating-point precision here is due to the addition operation of floating-point numbers when realizing the alignment of the axis scale. To improve the readability of axis labels, you can format the axis labels through `label.formatMethod`.
+
+
+
+## **Code Example**
+
+```
+const spec = {
+ type: 'common',
+ seriesField: 'color',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { x: 'Monday', type: 'Breakfast', y: 0.1633 },
+ ]
+ },
+ {
+ id: 'id1',
+ values: [
+ { x: 'Monday', type: 'Drink', y: -0.3455 },
+ ]
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 0,
+ label: { visible: true },
+ seriesField: 'type',
+ dataIndex: 0,
+ xField: ['x', 'type'],
+ yField: 'y'
+ },
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 1,
+ label: { visible: true },
+ seriesField: 'type',
+ xField: 'x',
+ yField: 'y',
+ stack: false
+ }
+ ],
+ axes: [
+ { orient: 'left', seriesIndex: [0], id: 'left' },
+ {
+ orient: 'right',
+ seriesId: ['line'],
+ grid: { visible: false },
+ label: {
+ formatMethod: (label) => {
+ return Math.round(label * 100) / 100;
+ }
+ },
+ sync: {
+ axisId: 'left',
+ tickAlign: true
+ }
+ },
+ { orient: 'bottom', label: { visible: true }, type: 'band' }
+ ],
+ legends: {
+ visible: true,
+ orient: 'bottom'
+ }
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## **Result Display**
+
+
+
+## **Related Documentation**
+
+Related configuration: [https://www.visactor.io/vchart/option/barChart-axes-linear#label.formatMethod](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Foption%2FbarChart-axes-linear%23label.formatMethod)
+ Axes axis tutorial: [https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FAxes)
+ github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/152- How to display labels on multiple lines.md b/docs/assets/faq/en/152- How to display labels on multiple lines.md
new file mode 100644
index 000000000..32c538b00
--- /dev/null
+++ b/docs/assets/faq/en/152- How to display labels on multiple lines.md
@@ -0,0 +1,81 @@
+---
+title: 73. How to display multi-line labels in vchart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Title
+
+How to display multi-line labels in vchart?
+# Description
+
+Can vchart display multi-line labels? I want to customize the label content of the pie chart, add the value, and display the specific value on the second line.
+
+
+# Solution
+
+The label configuration of the pie chart is in the `label` field: [https://visactor.io/vchart/option/pieChart#label](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label). The `formatMethod` attribute is used to format the label content: [https://visactor.io/vchart/option/pieChart#label.formatMethod](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label.formatMethod). The configuration function can be used to format the label. The function receives parameters including the original text and data, and returns a string representing the formatted label text. If an array is returned, each item in the array represents a line.
+# Code Example
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ valueField: 'value',
+ categoryField: 'type',
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true,
+ formatMethod: (text, datum) => {
+ return [text, datum.value]
+ }
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+After running the code, the label can be formatted with line breaks.
+Online demo: [https://codesandbox.io/p/sandbox/label-multiline-hhqm7j?file=%2Fsrc%2Findex.ts%3A34%2C37](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Flabel-multiline-hhqm7j%3Ffile%3D%252Fsrc%252Findex.ts%253A34%252C37)
+
+
+# Related Documents
+
+* VChart official website: [https://visactor.io/vchart/](https%3A%2F%2Fvisactor.io%2Fvchart%2F)
+* formatMethod documentation: [https://visactor.io/vchart/option/pieChart#label.formatMethod](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label.formatMethod)
+* VChart github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/153- How to sort data by specified fields.md b/docs/assets/faq/en/153- How to sort data by specified fields.md
new file mode 100644
index 000000000..a3260ad4a
--- /dev/null
+++ b/docs/assets/faq/en/153- How to sort data by specified fields.md
@@ -0,0 +1,92 @@
+---
+title: How to sort data by specified fields?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## *Question Description*
+
+
+
+For the line chart below, can the time sorting only be done externally?
+
+
+
+
+## *Solution*
+
+
+
+When configuring the data, sorting can be done based on fields. Field types are divided into discrete types and continuous types, and sorting order needs to be configured based on field types.
+
+
+
+
+## *Code Example*
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { date: '2023-01-01', type: 'Product A', value: 99.9 },
+ { date: '2023-01-02', type: 'Product C', value: 93.4 },
+ { date: '2023-01-01', type: 'Product B', value: 96.6 },
+ { date: '2023-01-02', type: 'Product A', value: 96.7 },
+ { date: '2023-01-02', type: 'Product B', value: 91.1 },
+ { date: '2023-01-03', type: 'Product A', value: 100.2 },
+ { date: '2023-01-03', type: 'Product B', value: 99.4 },
+ { date: '2023-01-03', type: 'Product C', value: 91.7 },
+ { date: '2023-01-04', type: 'Product A', value: 104.7 },
+ { date: '2023-01-05', type: 'Product B', value: 96 },
+ { date: '2023-01-05', type: 'Product C', value: 92.3 },
+ { date: '2023-01-06', type: 'Product A', value: 95.6 },
+ { date: '2023-01-06', type: 'Product B', value: 89.1 },
+ { date: '2023-01-09', type: 'Product B', value: 100.6},
+ { date: '2023-01-09', type: 'Product C', value: 103.8},
+ { date: '2023-01-04', type: 'Product C', value: 93.1 },
+ { date: '2023-01-04', type: 'Product B', value: 108.1 },
+ { date: '2023-01-07', type: 'Product A', value: 95.3 },
+ { date: '2023-01-07', type: 'Product B', value: 89.2 },
+ { date: '2023-01-07', type: 'Product C', value: 95.7 },
+ { date: '2023-01-08', type: 'Product A', value: 96.1 },
+ { date: '2023-01-08', type: 'Product B', value: 97.6 },
+ { date: '2023-01-09', type: 'Product A', value: 96.1 },
+ { date: '2023-01-10', type: 'Product A', value: 101.6 },
+ { date: '2023-01-10', type: 'Product B', value: 108.3 },
+ { date: '2023-01-10', type: 'Product C', value: 108.9 }
+ ],
+ fields: {
+ date: {
+ type: 'ordinal', // 数据维度 date 的类型是离散类型
+ sortIndex: 1 // 数据会按照 date 进行排序
+ },
+ }
+ },
+ xField: 'date',
+ yField: 'value',
+ seriesField: 'type',
+ point: {
+ visible: false
+ },
+ line: {
+ style: {
+ lineWidth: 2
+ }
+ },
+ legends: { visible: true },
+ axes: [
+ {
+ orient: 'bottom',
+ // paddingInner: 1,
+ // paddingOuter: 0,
+ trimPadding: true
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
diff --git a/docs/assets/faq/en/154- Segmented display of bar progress chart.md b/docs/assets/faq/en/154- Segmented display of bar progress chart.md
new file mode 100644
index 000000000..463ca95aa
--- /dev/null
+++ b/docs/assets/faq/en/154- Segmented display of bar progress chart.md
@@ -0,0 +1,136 @@
+---
+title: 24. How to display segmented linear progress bar?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## **Title**
+
+How to display segmented linear progress bar?
+## **Description**
+
+How can I display a segmented linear progress bar like the one shown in the image below?
+
+
+## **Solution**
+
+In VChart, you can use extension marks to display the dividing lines between each segment.
+## **Code Example**
+
+```
+const spec = {
+ type: "linearProgress",
+ data: [
+ {
+ id: "id0",
+ values: [
+ {
+ type: "Tradition Industries",
+ value: 0.85,
+ goal: 0.7,
+ text: "79.5%"
+ }
+ ]
+ }
+ ],
+ direction: "horizontal",
+ xField: "value",
+ yField: "type",
+ seriesField: "type",
+ height: 80,
+ cornerRadius: 20,
+ progress: {
+ style: {
+ cornerRadius: 0
+ }
+ },
+ bandWidth: 30,
+ axes: [
+ {
+ orient: "right",
+ type: "band",
+ domainLine: { visible: false },
+ tick: { visible: false },
+ label: {
+ formatMethod: (val) => "随便写点啥",
+ style: {
+ fontSize: 16
+ }
+ }
+ },
+ {
+ orient: "bottom",
+ type: "linear",
+ visible: true,
+ grid: {
+ visible: false
+ },
+ label: {
+ formatMethod: (val) => `${val * 100}%`,
+ flush: true
+ }
+ }
+ ],
+ extensionMark: [
+ {
+ type: "rule",
+ dataId: "id0",
+ visible: true,
+ style: {
+ x: (datum, ctx, elements, dataView) => {
+ return ctx.valueToX([1 / 3]);
+ },
+ y: (datum, ctx, elements, dataView) => {
+ return ctx.valueToY([datum.type]) - 15;
+ },
+ x1: (datum, ctx, elements, dataView) => {
+ return ctx.valueToX([1 / 3]);
+ },
+ y1: (datum, ctx, elements, dataView) => {
+ return ctx.valueToY([datum.type]) + 15;
+ },
+ stroke: "#fff",
+ lineWidth: 4,
+ zIndex: 1
+ }
+ },
+ {
+ type: "rule",
+ dataId: "id0",
+ visible: true,
+ style: {
+ x: (datum, ctx, elements, dataView) => {
+ return ctx.valueToX([2 / 3]);
+ },
+ y: (datum, ctx, elements, dataView) => {
+ return ctx.valueToY([datum.type]) - 15;
+ },
+ x1: (datum, ctx, elements, dataView) => {
+ return ctx.valueToX([2 / 3]);
+ },
+ y1: (datum, ctx, elements, dataView) => {
+ return ctx.valueToY([datum.type]) + 15;
+ },
+ stroke: "#fff",
+ lineWidth: 4,
+ zIndex: 1
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID, disableTriggerEvent: true });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## **Result**
+
+
+
+Demo: [https://codesandbox.io/p/sandbox/segment-linear-progress-3v4w5q?file=%2Fsrc%2Findex.ts%3A4%2C14-103%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fsegment-linear-progress-3v4w5q%3Ffile%3D%252Fsrc%252Findex.ts%253A4%252C14-103%252C2)
+## **Related Documents**
+
+Demo：[https://codesandbox.io/p/sandbox/segment-linear-progress-3v4w5q?file=%2Fsrc%2Findex.ts%3A4%2C14-103%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fsegment-linear-progress-3v4w5q%3Ffile%3D%252Fsrc%252Findex.ts%253A4%252C14-103%252C2)
+API：
+* Extension mark: [https://visactor.io/vchart/option/linearProgressChart#extensionMark](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FlinearProgressChart%23extensionMark)
+Github：[https://github.com/VisActor/VChart/](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart%2F)
\ No newline at end of file
diff --git a/docs/assets/faq/en/155- How to adjust the spacing between axis labels in vchart.md b/docs/assets/faq/en/155- How to adjust the spacing between axis labels in vchart.md
new file mode 100644
index 000000000..d1baa45cc
--- /dev/null
+++ b/docs/assets/faq/en/155- How to adjust the spacing between axis labels in vchart.md
@@ -0,0 +1,60 @@
+---
+title: How to adjust spacing between axis labels in vchart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to adjust spacing between axis labels in vchart?
+## Problem Description
+
+When I used vchart to draw a histogram, I found that the spacing between the axis labels was too small, causing the labels to overlap and make it difficult to read. Is there any way to adjust the spacing between axis labels? Can the minGap configuration be configured to set this label spacing?
+## Solution
+
+The configuration item minGap is used to determine the minimum distance between labels in the axis label sampling calculation.
+Now the position of the axis label is associated with the corresponding column position mapping, and the position of the label cannot be configured separately. If you want to adjust the space between axis labels, you can affect the spacing between axis labels by adjusting the paddingOuter property of the scale corresponding to the axis. paddingOuter represents the space occupied by both ends of the axis. Reducing paddingOuter leaves more layout space for labels.
+```
+ axes: [
+ { orient: 'bottom', paddingOuter: 0 }
+ ]
+```
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales',
+ axes: [
+ { orient: 'bottom', paddingOuter: 0 }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+
+
+
+
+## Quote
+
+* Github: https://github.com/VisActor/VChart
+* Spec: https://visactor.bytedance.net/vchart/option/barChart-axes-band#paddingOuter(number%7Cnumber%5B%5D)
+
diff --git a/docs/assets/faq/en/156- How to assign different colors to multiple lines in a line chart.md b/docs/assets/faq/en/156- How to assign different colors to multiple lines in a line chart.md
new file mode 100644
index 000000000..24595b069
--- /dev/null
+++ b/docs/assets/faq/en/156- How to assign different colors to multiple lines in a line chart.md
@@ -0,0 +1,34 @@
+---
+title: How to assign different colors to multiple lines in a line chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to assign different colors to multiple lines in a line chart
+
+
+## Description
+
+Hello, how to assign different colors to multiple polylines?
+
+
+## Solution
+
+1. Configure color in spec, you can refer to this demo [https://visactor.bytedance.net/vchart/demo/area-chart/stream-graph](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Farea-chart%2Fstream-graph)
+1. Configure the color in the element style, you can refer to [https://visactor.bytedance.net/vchart/demo/line-chart/multi-line](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Fline-chart%2Fmulti-line)
+1. Set the color palette by theme, you can refer to the demo [https://visactor.bytedance.net/vchart/demo/theme/theme-switch ](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Ftheme%2Ftheme-switch), documentation: [https://visactor.bytedance.net/vchart/guide/tutorial_docs/Theme/Color_Theme](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fguide%2Ftutorial_docs%2FTheme%2FColor_Theme)
+
+
+
+
+## Related Documents
+
+
+
+* Demo：
+* [https://visactor.bytedance.net/vchart/demo/area-chart/stream-graph](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Farea-chart%2Fstream-graph)
+* [https://visactor.bytedance.net/vchart/demo/line-chart/multi-line](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Fline-chart%2Fmulti-line)
+* [https://visactor.bytedance.net/vchart/demo/theme/theme-switch](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fdemo%2Ftheme%2Ftheme-switch)
+* Tutorial: [https://visactor.bytedance.net/vchart/guide/tutorial_docs/Theme/Color_Theme](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Fguide%2Ftutorial_docs%2FTheme%2FColor_Theme)
+* Github：https://github.com/VisActor/VChart/
+
diff --git a/docs/assets/faq/en/157- How to individually configure legend styles and change graphic shapes in VChart.md b/docs/assets/faq/en/157- How to individually configure legend styles and change graphic shapes in VChart.md
new file mode 100644
index 000000000..683f919ef
--- /dev/null
+++ b/docs/assets/faq/en/157- How to individually configure legend styles and change graphic shapes in VChart.md
@@ -0,0 +1,162 @@
+---
+title: How to configure the style of the legend separately in VChart and change the shape of the graphic
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to configure the style of legends separately in VChart and change the shape of graphics
+
+
+## Problem description
+
+How to change the legend item graphic of a column chart series to a circle
+
+
+## Solution
+
+Legends in VChart can be customized through the data configuration item, where the graphic property is in the `shape `property of the legend item
+```
+ legends: {
+ visible: true,
+ data: items => {
+ return items.map(item => {
+ if(item.label === 'Under 5 Years'){
+ item.shape.symbolType = 'circle';
+ }
+ return item;
+ });
+ },
+ },
+```
+## Code example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: true,
+ legends: {
+ visible: true,
+ data: items => {
+ return items.map(item => {
+ if(item.label === 'Under 5 Years'){
+ item.shape.symbolType = 'circle';
+ }
+ return item;
+ });
+ },
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* Configuration document: https://www.visactor.io/vchart/option/barChart-legends-discrete#data
+* Related demo: https://www.visactor.io/vchart/demo/legend/custom-data
+
+
+
diff --git a/docs/assets/faq/en/158- How to configure the hover state of graphical elements.md b/docs/assets/faq/en/158- How to configure the hover state of graphical elements.md
new file mode 100644
index 000000000..43bca3059
--- /dev/null
+++ b/docs/assets/faq/en/158- How to configure the hover state of graphical elements.md
@@ -0,0 +1,68 @@
+---
+title: 85. How to configure the hover state of the mark?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure primitive hover status?
+## Description
+
+How to enable hover highlighting effect of graphic elements?
+
+
+## Solution
+
+Taking a bar chart as an example, the highlight effect after hovering can be configured through bar.state.hover.
+Different charts need to be configured on different elements. Similarly, line charts are configured through line.state.hover.
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales',
+ bar: {
+ state: {
+ hover: {
+ fill: 'red'
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/hover-state-z5djy8?file=%2Fsrc%2Findex.ts%3A12%2C42
+
+
+
+
+## Related Documentation
+
+Related API：https://www.visactor.io/vchart/option/barChart#bar.state
+Github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/163- How to limit the number of lines in a Tooltip.md b/docs/assets/faq/en/163- How to limit the number of lines in a Tooltip.md
new file mode 100644
index 000000000..4513e111a
--- /dev/null
+++ b/docs/assets/faq/en/163- How to limit the number of lines in a Tooltip.md
@@ -0,0 +1,113 @@
+---
+title: How to limit the number of lines in Tooltip?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+
+
+How to limit the number of lines in Tooltip?
+
+
+## Problem description
+
+When there are too many data items in the Tooltip, it will be automatically categorized as others after more than 20 items. Can I customize this number?
+
+
+
+
+## Solution
+
+Tooltip supports setting the maximum number of lines through `maxLineCount`. It should be noted that vchart's tooltip supports multiple types, and now they need to be set separately.
+
+
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: '100% stacked line chart of cosmetic products sales'
+ },
+ percent: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ formatMethod(val) {
+ return `${(val * 100).toFixed(2)}%`;
+ }
+ }
+ }
+ ],
+ tooltip: {
+ mark: {
+ maxLineCount: 2
+ },
+ dimension: {
+ maxLineCount: 2
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Result Display
+
+
+
+## Related documents
+
+* [Tooltip tip information tutorial](https%3A%2F%2Fvisactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FTooltip)
+* [Tooltip configuration document](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FbarChart%23tooltip.dimension.maxLineCount)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/166- Does VChart's multi-group bar chart support multi-layer axis labels.md b/docs/assets/faq/en/166- Does VChart's multi-group bar chart support multi-layer axis labels.md
new file mode 100644
index 000000000..e183e7d54
--- /dev/null
+++ b/docs/assets/faq/en/166- Does VChart's multi-group bar chart support multi-layer axis labels.md
@@ -0,0 +1,62 @@
+---
+title: 54. Does VChart's multi-group bar chart support multi-layer axis labels?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+Does VChart's multi-group bar chart support multi-layer axis labels?
+
+
+# Problem description
+
+I am a developer who uses the VChart chart library. Recently, I encountered a problem where I wanted to use multi-layer axis labels in multi-group bar charts, like the effect shown in the figure below.
+
+
+
+
+# Solution
+
+When there are multiple fields in xField in spec, bar chart grouping will be enabled. You can enable displaying all grouping axes by setting showAllGroupLayers in the x-axis of axes to true.
+You can refer to the following example:
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ values: [
+ { type: 'Category One', min: 76, max: 100, range: 'A', type2: 'p', color: 'A_p' },
+ //... 其他数据项
+ ]
+ }
+ ],
+ xField: ['type', 'range', 'type2'],
+ yField: 'in',
+ seriesField: 'color',
+ paddingInner: [0.6, 0.6, 0.6],
+ bandPadding: [0.6, 0.6, 0.6],
+ label: { position: 'bothEnd' },
+ axes: [
+ { orient: 'bottom', showAllGroupLayers: true, sampling: false, tick: { tickCount: 2 } }
+ ],
+ legends: { visible: true }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+# Results show
+
+The bar chart will be grouped by xField and display the labels of each group.
+
+
+Online demo: https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-hpvd3j
+
+
+# Related Documents
+
+* VChart **showAllGroupLayers **configuration item: https://www.visactor.io/vchart/option/barChart-axes-band#showAllGroupLayers
+* VChart github：https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/17- How to use tooltips and the x-axis in the vchart library.md b/docs/assets/faq/en/17- How to use tooltips and the x-axis in the vchart library.md
new file mode 100644
index 000000000..7234027f2
--- /dev/null
+++ b/docs/assets/faq/en/17- How to use tooltips and the x-axis in the vchart library.md
@@ -0,0 +1,39 @@
+---
+title: 112. How to use the tooltip and abscissa in the vchart library?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to use the tooltip and abscissa in the vchart library?
+
+
+# Problem description
+
+I am using the vchart library to create charts, but I am having trouble setting the tooltip and abscissa. I tried to configure the tooltip, but it did not display, even if I set it to visible.
+
+
+In addition, I also hope to be able to customize the content of the x-axis. I'm not sure if my usage is incorrect or there are other issues.
+
+
+# Solution
+
+Firstly, regarding the configuration issue of tooltip, your setting method is correct.
+
+
+Then, regarding the issue of tooltip not taking effect, you need to check if your `content `is written in the wrong place. If you want to customize the content of the tooltip, you can refer to [this example of vchart ](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fdemo%2Ftooltip%2Fcustom-tooltip).
+
+
+Finally, regarding the customization of the x-axis, you can achieve it by setting the style in `axes.label `. You can also use `formatMethod `to customize the content. The specific implementation method can refer to [this example of vchart ](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fdemo%2Faxis%2Fgrid-style).
+
+
+
+
+
+
+# Related Documents
+
+* [VChart Tooltip User Guide](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FTooltip)
+* [Example of vchart Axis style settings](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fdemo%2Faxis%2Fstyle)
+* [Vchart Custom Tooltip Example](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fdemo%2Ftooltip%2Fcustom-tooltip)
+* [VChart Axis Grid Style Example](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fdemo%2Faxis%2Fgrid-style)
+
diff --git a/docs/assets/faq/en/170- How to set different colors for each bar in a bar chart.md b/docs/assets/faq/en/170- How to set different colors for each bar in a bar chart.md
new file mode 100644
index 000000000..647d603fc
--- /dev/null
+++ b/docs/assets/faq/en/170- How to set different colors for each bar in a bar chart.md
@@ -0,0 +1,72 @@
+---
+title: 50. How to set different colors for each bar in a bar chart using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set different colors for each bar in a bar chart
+## Description
+
+Column charts need to set different colors for each column.
+## Solution
+
+Different chart libraries have different solutions, which essentially map different data to the colors of the marks.
+VChart provides the `seriesField` configuration, which allows users to specify the grouping field for dividing the series, thereby grouping the marks. After grouping, the same content in the same group will be drawn with the same color and the different content in different groups will be drawn with different colors.
+Step 1: Users need to prepare the data and add grouping information, usually by adding a specific attribute to each data item.
+Step 2: Set `seriesField`.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "bar",
+ data: [
+ {
+ id: "barData",
+ values: [
+ { month: "Monday", sales: 22, index: 0 },
+ { month: "Tuesday", sales: 13, index: 1 },
+ { month: "Wednesday", sales: 25, index: 2 },
+ { month: "Thursday", sales: 29, index: 3 },
+ { month: "Friday", sales: 38, index: 4 },
+ ],
+ },
+ ],
+ seriesField: "index",
+ xField: "month",
+ yField: "sales",
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Solution
+
+1. Requires 4 data fields:
+1. 3 grouping fields: There are 3 layers of grouping on the x-axis, corresponding to fields `xField: ['type', 'type1', 'type2'] `;
+1. 1 series field: used to distinguish color series, `seriesField: 'color'`
+
+
+
+
+1. Highlight interaction: You can configure the built-in `element-highlight-by-group `interaction in VChart, specify the interaction highlighting state to be named `'highligh' `, so as to add a stroke effect to the column in the graphic style:
+```
+ interactions:[
+ {
+ type: 'element-highlight-by-group',
+ highlightState:'highlight'
+ }
+ ],
+ bar:{
+ state:{
+ highlight:{
+ stroke:"black",
+ lineWidth:1,
+ zIndex:100
+ }
+ }
+ },
+```
+
+
+## Code Example
+
+
+
+```
+const spec = {
+ type: 'bar',
+ height:400,
+ data: [
+ {
+ values: [
+ { type: 'Category One', min: 80, color: 'A', type1: 'p', type2: 'T' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p', type2: 'T' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p', type2: 'T' },
+ { type: 'Category One', min: 75, color: 'C', type1: 'p', type2: 'T' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p', type2: 'T' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p', type2: 'T1' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p', type2: 'T1' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p', type2: 'T1' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p', type2: 'T1' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p', type2: 'T1' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p', type2: 'T2' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p', type2: 'T2' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p', type2: 'T2' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p', type2: 'T2' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p', type2: 'T2' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p', type2: 'T3' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p', type2: 'T3' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p', type2: 'T3' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p', type2: 'T3' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p', type2: 'T3' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p', type2: 'T4' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p', type2: 'T4' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p', type2: 'T4' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p', type2: 'T4' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p', type2: 'T4' },
+
+ { type: 'Category One', min: 80, color: 'A', type1: 'p1', type2: 'T' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p1', type2: 'T' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p1', type2: 'T' },
+ { type: 'Category One', min: 75, color: 'C', type1: 'p1', type2: 'T' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p1', type2: 'T' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p1', type2: 'T1' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p1', type2: 'T1' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p1', type2: 'T1' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p1', type2: 'T1' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p1', type2: 'T1' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p1', type2: 'T2' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p1', type2: 'T2' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p1', type2: 'T2' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p1', type2: 'T2' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p1', type2: 'T2' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p1', type2: 'T3' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p1', type2: 'T3' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p1', type2: 'T3' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p1', type2: 'T3' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p1', type2: 'T3' },
+
+ { type: 'Category One', min: 70, color: 'A', type1: 'p1', type2: 'T4' },
+ { type: 'Category One', min: 40, color: 'B', type1: 'p1', type2: 'T4' },
+ { type: 'Category One', min: 40, color: 'D', type1: 'p1', type2: 'T4' },
+ { type: 'Category One', min: 50, color: 'C', type1: 'p1', type2: 'T4' },
+ { type: 'Category One', min: 30, color: 'E', type1: 'p1', type2: 'T4' },
+
+
+
+ { type: 'Category Two', min: 76, color: 'A', type1: 'p', type2: 'T' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p', type2: 'T' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p', type2: 'T' },
+ { type: 'Category Two', min: 65, color: 'C', type1: 'p', type2: 'T' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p', type2: 'T' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p', type2: 'T1' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p', type2: 'T1' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p', type2: 'T1' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p', type2: 'T1' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p', type2: 'T1' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p', type2: 'T2' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p', type2: 'T2' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p', type2: 'T2' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p', type2: 'T2' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p', type2: 'T2' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p', type2: 'T3' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p', type2: 'T3' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p', type2: 'T3' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p', type2: 'T3' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p', type2: 'T3' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p', type2: 'T4' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p', type2: 'T4' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p', type2: 'T4' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p', type2: 'T4' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p', type2: 'T4' },
+
+ { type: 'Category Two', min: 80, color: 'A', type1: 'p1', type2: 'T' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p1', type2: 'T' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p1', type2: 'T' },
+ { type: 'Category Two', min: 75, color: 'C', type1: 'p1', type2: 'T' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p1', type2: 'T' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p1', type2: 'T1' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p1', type2: 'T1' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p1', type2: 'T1' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p1', type2: 'T1' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p1', type2: 'T1' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p1', type2: 'T2' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p1', type2: 'T2' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p1', type2: 'T2' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p1', type2: 'T2' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p1', type2: 'T2' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p1', type2: 'T3' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p1', type2: 'T3' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p1', type2: 'T3' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p1', type2: 'T3' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p1', type2: 'T3' },
+
+ { type: 'Category Two', min: 70, color: 'A', type1: 'p1', type2: 'T4' },
+ { type: 'Category Two', min: 40, color: 'B', type1: 'p1', type2: 'T4' },
+ { type: 'Category Two', min: 40, color: 'D', type1: 'p1', type2: 'T4' },
+ { type: 'Category Two', min: 50, color: 'C', type1: 'p1', type2: 'T4' },
+ { type: 'Category Two', min: 30, color: 'E', type1: 'p1', type2: 'T4' },
+ ]
+ }
+ ],
+ interactions:[
+ {
+ type: 'element-highlight-by-group',
+ highlightState:'highlight'
+ }
+ ],
+ bar:{
+ style:{
+ fillOpacity:(data) => data.type1 === 'p' ? 1: 0.5
+ },
+ state:{
+ highlight:{
+ stroke:"black",
+ lineWidth:1,
+ zIndex:100
+ }
+ }
+ },
+ xField: ['type', 'type1', 'type2'],
+ yField: 'min',
+ seriesField: 'color',
+ axes: [
+ {
+ orient:"left",
+ label:{ visible: false},
+ grid:{ style:{ lineDash:[4,4], stroke:'#dddddd'} }
+ },
+ {
+ orient:"bottom",
+ paddingInner:[0.1,0.05,0.5]
+ }
+ ],
+ tooltip:{
+ visible:false
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Related Documentation
+
+Grouped Stacked Column Chart demo: https://www.visactor.io/vchart/demo/bar-chart/stack-column
+Interactive demo: https://visactor.com/vchart/demo/axis/multiple-layers-of-axis?keyword=axis
+Related api: https://visactor.com/vchart/option/barChart#interactions.type.element-highlight-by-group
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/172- Can the bar series listen to event callbacks.md b/docs/assets/faq/en/172- Can the bar series listen to event callbacks.md
new file mode 100644
index 000000000..7c9cb5b4c
--- /dev/null
+++ b/docs/assets/faq/en/172- Can the bar series listen to event callbacks.md
@@ -0,0 +1,62 @@
+---
+title: 71. Can the bar series listen to event callbacks?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Can the column series listen for event callbacks?
+## Description
+
+When using VChart bar chart in Mini Program, is there an event that can be called back when selecting a bar in the bar chart?
+
+
+## Solution
+
+In vchart, you can obtain the meta information of the current click by listening to pointerdown events; in addition, you can also obtain events on different elements through event filtering.
+
+
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+vchart.on('pointerdown', { level: 'mark' }, (...params) => console.log(params))
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/bar-event-listener-dt8pjg?file=%2Fsrc%2Findex.ts%3A26%2C5
+
+
+## Related Documentation
+
+Event Toturial：https://www.visactor.io/vchart/guide/tutorial_docs/Event
+Related Api：https://www.visactor.io/vchart/api/API/event
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/173- How to remove axis tick values.md b/docs/assets/faq/en/173- How to remove axis tick values.md
new file mode 100644
index 000000000..9839a810b
--- /dev/null
+++ b/docs/assets/faq/en/173- How to remove axis tick values.md
@@ -0,0 +1,27 @@
+---
+title: 104. How to remove the axis scale value?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to remove axis scale values?
+
+
+## Description
+
+How to remove the content in the red box?
+
+
+## Solution
+
+You can configure the label.visible of the bottom axis to false to turn off the axis label.
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes
+* API：https://visactor.bytedance.net/vchart/option/barChart#axes-linear
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/178- How to set different fill colors based on groups in a radar chart.md b/docs/assets/faq/en/178- How to set different fill colors based on groups in a radar chart.md
new file mode 100644
index 000000000..15fd1ca2f
--- /dev/null
+++ b/docs/assets/faq/en/178- How to set different fill colors based on groups in a radar chart.md
@@ -0,0 +1,269 @@
+---
+title: How to set different fill colors for different groups in a radar chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to set different fill colors for different groups in a radar chart?
+## Question Description
+
+As shown in the figure, the radar chart has multiple groups. Can different fill colors be set for different groups?
+
+
+## Solution
+
+All VChart graphical elements support functional styles, which allow you to define custom functions to return different fill colors based on the data in the style.
+
+
+
+
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'radar',
+ data: [
+ {
+ values: [
+ {
+ month: 'Jan.',
+ value: 45,
+ type: 'A'
+ },
+ {
+ month: 'Feb.',
+ value: 61,
+ type: 'A'
+ },
+ {
+ month: 'Mar.',
+ value: 92,
+ type: 'A'
+ },
+ {
+ month: 'Apr.',
+ value: 57,
+ type: 'A'
+ },
+ {
+ month: 'May.',
+ value: 46,
+ type: 'A'
+ },
+ {
+ month: 'Jun.',
+ value: 36,
+ type: 'A'
+ },
+ {
+ month: 'Jul.',
+ value: 33,
+ type: 'A'
+ },
+ {
+ month: 'Aug.',
+ value: 63,
+ type: 'A'
+ },
+ {
+ month: 'Sep.',
+ value: 57,
+ type: 'A'
+ },
+ {
+ month: 'Oct.',
+ value: 53,
+ type: 'A'
+ },
+ {
+ month: 'Nov.',
+ value: 69,
+ type: 'A'
+ },
+ {
+ month: 'Dec.',
+ value: 40,
+ type: 'A'
+ },
+ {
+ month: 'Jan.',
+ value: 31,
+ type: 'B'
+ },
+ {
+ month: 'Feb.',
+ value: 39,
+ type: 'B'
+ },
+ {
+ month: 'Mar.',
+ value: 81,
+ type: 'B'
+ },
+ {
+ month: 'Apr.',
+ value: 39,
+ type: 'B'
+ },
+ {
+ month: 'May.',
+ value: 64,
+ type: 'B'
+ },
+ {
+ month: 'Jun.',
+ value: 21,
+ type: 'B'
+ },
+ {
+ month: 'Jul.',
+ value: 58,
+ type: 'B'
+ },
+ {
+ month: 'Aug.',
+ value: 72,
+ type: 'B'
+ },
+ {
+ month: 'Sep.',
+ value: 47,
+ type: 'B'
+ },
+ {
+ month: 'Oct.',
+ value: 37,
+ type: 'B'
+ },
+ {
+ month: 'Nov.',
+ value: 80,
+ type: 'B'
+ },
+ {
+ month: 'Dec.',
+ value: 74,
+ type: 'B'
+ },
+ {
+ month: 'Jan.',
+ value: 90,
+ type: 'C'
+ },
+ {
+ month: 'Feb.',
+ value: 95,
+ type: 'C'
+ },
+ {
+ month: 'Mar.',
+ value: 62,
+ type: 'C'
+ },
+ {
+ month: 'Apr.',
+ value: 52,
+ type: 'C'
+ },
+ {
+ month: 'May.',
+ value: 74,
+ type: 'C'
+ },
+ {
+ month: 'Jun.',
+ value: 87,
+ type: 'C'
+ },
+ {
+ month: 'Jul.',
+ value: 80,
+ type: 'C'
+ },
+ {
+ month: 'Aug.',
+ value: 69,
+ type: 'C'
+ },
+ {
+ month: 'Sep.',
+ value: 74,
+ type: 'C'
+ },
+ {
+ month: 'Oct.',
+ value: 84,
+ type: 'C'
+ },
+ {
+ month: 'Nov.',
+ value: 94,
+ type: 'C'
+ },
+ {
+ month: 'Dec.',
+ value: 23,
+ type: 'C'
+ }
+ ]
+ }
+ ],
+ categoryField: 'month',
+ valueField: 'value',
+ seriesField: 'type',
+ area: {
+ visible: true,
+ style: {
+ fill: (datum, ctx) => {
+ return datum.type === 'A' ? ctx.seriesColor(datum.type): false;
+ }
+ }
+ },
+ axes: [
+ {
+ orient: 'radius',
+ min: 0,
+ domainLine: {
+ visible: true
+ },
+ label: {
+ visible: true
+ },
+ grid: {
+ smooth: true
+ }
+ },
+ {
+ orient: 'angle',
+ tick: {
+ visible: false
+ },
+ grid: {
+ style: {
+ lineDash: [0]
+ }
+ }
+ }
+ ],
+ legends: {
+ visible: true,
+ orient: 'top'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Result Presentation
+
+
+
+## Related Documents
+
+* [Tutorial of Graphical Elements](https%3A%2F%2Fwww.visactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FSeries%2FMark)[ ](https%3A%2F%2Fvisactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FAxes)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/179- Bar chart value labels aligned to the right display.md b/docs/assets/faq/en/179- Bar chart value labels aligned to the right display.md
new file mode 100644
index 000000000..56e16f0e5
--- /dev/null
+++ b/docs/assets/faq/en/179- Bar chart value labels aligned to the right display.md
@@ -0,0 +1,164 @@
+---
+title: 102. Right-aligned bar chart numeric labels
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Right-aligned display of bar chart numerical labels
+
+
+## Description
+
+Display the labels uniformly on the right and align them to the right.
+
+
+## Solution
+
+You can use the `extensionMark `property provided by VChart to implement it through custom graphics.
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ name: 'Apple',
+ value: 214480
+ },
+ {
+ name: 'Google',
+ value: 155506
+ },
+ {
+ name: 'Amazon',
+ value: 100764
+ },
+ {
+ name: 'Microsoft',
+ value: 92715
+ },
+ {
+ name: 'Coca-Cola',
+ value: 66341
+ },
+ {
+ name: 'Samsung',
+ value: 59890
+ },
+ {
+ name: 'Toyota',
+ value: 53404
+ },
+ {
+ name: 'Mercedes-Benz',
+ value: 48601
+ },
+ {
+ name: 'Facebook',
+ value: 45168
+ },
+ {
+ name: "McDonald's",
+ value: 43417
+ },
+ {
+ name: 'Intel',
+ value: 43293
+ },
+ {
+ name: 'IBM',
+ value: 42972
+ },
+ {
+ name: 'BMW',
+ value: 41006
+ },
+ {
+ name: 'Disney',
+ value: 39874
+ },
+ {
+ name: 'Cisco',
+ value: 34575
+ },
+ {
+ name: 'GE',
+ value: 32757
+ },
+ {
+ name: 'Nike',
+ value: 30120
+ },
+ {
+ name: 'Louis Vuitton',
+ value: 28152
+ },
+ {
+ name: 'Oracle',
+ value: 26133
+ },
+ {
+ name: 'Honda',
+ value: 23682
+ }
+ ]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'value',
+ yField: 'name',
+ axes: [
+ {
+ orient: 'bottom',
+ visible: false
+ }
+ ],
+ label: {
+ visible: false
+ },
+ extensionMark: [
+ {
+ type: 'text',
+ dataId: 'barData',
+ visible: true,
+ style: {
+ text: datum => datum.value,
+ fontSize: 12,
+ x: (datum, ctx) => {
+ return ctx.getRegion().getLayoutRect().width + 10;
+ },
+ y: (datum, ctx) => {
+ return ctx.valueToY([datum.name]) + ctx.yBandwidth() / 2;
+ },
+ textBaseline: 'middle',
+ textAlign: 'right',
+ fill: "#1664FF",
+ fontSize: 12
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Result
+
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/extend/custom_mark
+* API：https://visactor.io/vchart/option/barChart#extensionMark
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/181- How to format the tooltip in a VChart radar chart.md b/docs/assets/faq/en/181- How to format the tooltip in a VChart radar chart.md
new file mode 100644
index 000000000..9041fc5cf
--- /dev/null
+++ b/docs/assets/faq/en/181- How to format the tooltip in a VChart radar chart.md
@@ -0,0 +1,323 @@
+---
+title: 95. How to format Tooltip in Radar charts, using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to format Tooltip in Radar charts?
+## Description
+
+The data in the chart contains very long strings, and in this case, the default `tooltip` display effect is not good, so its display effect needs to be optimized.
+## Solution
+
+Solutions to different chart libraries vary. The `tooltip` component in VChart allows users to custom configure both `key` and `value`, providing the flexibility to customize the tooltip information of chart elements and dimensions.
+In long-text scenarios, typically only the formatting capabilities are needed to format the indicators and abbreviate the dimensions.
+1. Configure `tooltip.mark.content` to format the `value` and `key` in the chart element's `tooltip` respectively.
+2. Configure `tooltip.dimension.content` to format the `value` and `key` in the dimension's `tooltip` respectively.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "radar",
+ data: [
+ {
+ values: [
+ {
+ month: "Jan.",
+ value: 45,
+ type: "A",
+ },
+ {
+ month: "Feb.",
+ value: 61,
+ type: "A",
+ },
+ {
+ month: "Mar.",
+ value: 92,
+ type: "A",
+ },
+ {
+ month: "Apr.",
+ value: 57,
+ type: "A",
+ },
+ {
+ month: "May.",
+ value: 46,
+ type: "A",
+ },
+ {
+ month: "Jun.",
+ value: 36,
+ type: "A",
+ },
+ {
+ month: "Jul.",
+ value: 33,
+ type: "A",
+ },
+ {
+ month: "Aug.",
+ value: 63,
+ type: "A",
+ },
+ {
+ month: "Sep.",
+ value: 57,
+ type: "A",
+ },
+ {
+ month: "Oct.",
+ value: 53,
+ type: "A",
+ },
+ {
+ month: "Nov.",
+ value: 69,
+ type: "A",
+ },
+ {
+ month: "Dec.",
+ value: 40,
+ type: "A",
+ },
+ {
+ month: "Jan.",
+ value: 31,
+ type: "B",
+ },
+ {
+ month: "Feb.",
+ value: 39,
+ type: "B",
+ },
+ {
+ month: "Mar.",
+ value: 81,
+ type: "B",
+ },
+ {
+ month: "Apr.",
+ value: 39,
+ type: "B",
+ },
+ {
+ month: "May.",
+ value: 64,
+ type: "B",
+ },
+ {
+ month: "Jun.",
+ value: 21,
+ type: "B",
+ },
+ {
+ month: "Jul.",
+ value: 58,
+ type: "B",
+ },
+ {
+ month: "Aug.",
+ value: 72,
+ type: "B",
+ },
+ {
+ month: "Sep.",
+ value: 47,
+ type: "B",
+ },
+ {
+ month: "Oct.",
+ value: 37,
+ type: "B",
+ },
+ {
+ month: "Nov.",
+ value: 80,
+ type: "B",
+ },
+ {
+ month: "Dec.",
+ value: 74,
+ type: "B",
+ },
+ {
+ month: "Jan.",
+ value: 90,
+ type: "C",
+ },
+ {
+ month: "Feb.",
+ value: 95,
+ type: "C",
+ },
+ {
+ month: "Mar.",
+ value: 62,
+ type: "C",
+ },
+ {
+ month: "Apr.",
+ value: 52,
+ type: "C",
+ },
+ {
+ month: "May.",
+ value: 74,
+ type: "C",
+ },
+ {
+ month: "Jun.",
+ value: 87,
+ type: "C",
+ },
+ {
+ month: "Jul.",
+ value: 80,
+ type: "C",
+ },
+ {
+ month: "Aug.",
+ value: 69,
+ type: "C",
+ },
+ {
+ month: "Sep.",
+ value: 74,
+ type: "C",
+ },
+ {
+ month: "Oct.",
+ value: 84,
+ type: "C",
+ },
+ {
+ month: "Nov.",
+ value: 94,
+ type: "C",
+ },
+ {
+ month: "Dec.",
+ value: 23,
+ type: "C",
+ },
+ ],
+ },
+ ],
+ categoryField: "month",
+ valueField: "value",
+ seriesField: "type",
+ stack: true,
+ percent: true,
+ area: {
+ visible: true, // show area
+ },
+ axes: [
+ {
+ orient: "radius",
+ min: 0,
+ domainLine: {
+ visible: true,
+ },
+ label: {
+ visible: true,
+ formatMethod: (val) => {
+ return val * 100 + "%";
+ },
+ },
+ grid: {
+ smooth: false,
+ style: {
+ lineDash: [0],
+ },
+ },
+ },
+ {
+ orient: "angle",
+ tick: {
+ visible: false,
+ },
+ domainLine: {
+ visible: false,
+ },
+ grid: {
+ style: {
+ lineDash: [0],
+ },
+ },
+ },
+ ],
+ legends: {
+ visible: true,
+ orient: "top",
+ },
+ tooltip: {
+ mark: {
+ title: {
+ value: "Mark Title",
+ },
+ content: [
+ {
+ key: "key",
+ value: "value",
+ },
+ {
+ key: (datum) => `${datum.type}-${datum.month}`,
+ value: (datum) => `${datum.value.toFixed(2)} k`,
+ },
+ ],
+ },
+ dimension: {
+ title: {
+ value: "Dimension Radar Title",
+ },
+ content: [
+ {
+ key: "key",
+ value: "value",
+ },
+ {
+ key: (datum) => `${datum.type}-${datum.month}`,
+ value: (datum) => `${datum.value.toFixed(2)} k`,
+ },
+ ],
+ },
+ },
+ };
+
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Solution
+
+VChart lines can return different styles to different data on a line through a function. When there is a situation of inconsistent styles, we will draw the line segment from the previous data to the current data as the style corresponding to the current data when drawing
+
+
+## Code example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ x: '1st',
+ y: 0.012
+ },
+ {
+ x: '2nd',
+ y: -0.01
+ },
+ {
+ x: '3rd',
+ y: 0.005
+ },
+ {
+ x: '4th',
+ y: 0.007
+ },
+ {
+ x: '5th',
+ y: 0.01
+ },
+ {
+ x: '6th',
+ y: 0.017
+ },
+ {
+ x: '7th',
+ y: 0.022
+ },
+ {
+ x: '8th (prediction)',
+ y: 0.033,
+ latest: true
+ }
+ ]
+ },
+ xField: 'x',
+ yField: 'y',
+ line: {
+ style: {
+ lineDash: data => {
+ if (data.latest) {
+ return [5, 5];
+ }
+ return [0];
+ },
+ stroke: data => {
+ if (data.latest) {
+ return 'green';
+ }
+ return 'blue';
+ }
+ }
+ },
+ point: {
+ style: {
+ fill: data => {
+ if (data.latest) {
+ return 'green';
+ }
+ return 'blue';
+ }
+ }
+ }
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-mxqfr3?file=%2Fsrc%2Findex.js%3A59%2C13
+## Related Documents
+
+Demo：https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-mxqfr3?file=%2Fsrc%2Findex.js%3A59%2C13
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Line style configuration: https://www.visactor.io/vchart/option/lineChart#line.style.stroke
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/183- Can the unit of the y-axis be configured without a function.md b/docs/assets/faq/en/183- Can the unit of the y-axis be configured without a function.md
new file mode 100644
index 000000000..e9588ec41
--- /dev/null
+++ b/docs/assets/faq/en/183- Can the unit of the y-axis be configured without a function.md
@@ -0,0 +1,89 @@
+---
+title: Is it possible to configure the unit of the y-axis without using a function
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Is it possible to configure the unit of the y-axis without using a function?
+
+
+## Problem Description
+
+Can I format of the y-axis without using a function? For example, some default thousandths, automatic unit addition, etc. Because only a pure json configuration can be used in the mini program scenario, and the callback function cannot be configured.
+
+
+## Solution
+
+Starting from VChart version 1.7.0, custom function content can be registered by registering an expression function:
+```
+function labelFormat(key) {
+ return key + 'test';
+}
+
+// Global registration function
+VChart.registerFunction('labelFormat', labelFormat);
+```
+The name of this registered function can be used in the corresponding chart configuration anywhere that supports custom callback functions:
+```
+const spec = {
+ type: 'bar',
+ data: [...],
+ xField: 'month',
+ yField: 'sales',
+ label: {
+ visible: true,
+ formatMethod: 'labelFormat'
+ }
+};
+```
+The functions of registered functions can take effect in environments such as Feishu widgets and WeChat mini programs.
+
+
+## Code Example
+
+```
+function labelFormat(key) {
+ return key + 'test';
+}
+
+// Global registration function
+VChart.registerFunction('labelFormat', labelFormat);
+
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales',
+ label: {
+ visible: true,
+ formatMethod: 'labelFormat'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* function：https://www.visactor.io/vchart/guide/tutorial_docs/Function
+* github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/185- How to set the title font size to semi's heading-4 in vchart.md b/docs/assets/faq/en/185- How to set the title font size to semi's heading-4 in vchart.md
new file mode 100644
index 000000000..6a977c22a
--- /dev/null
+++ b/docs/assets/faq/en/185- How to set the title font size to semi's heading-4 in vchart.md
@@ -0,0 +1,33 @@
+---
+title: 111. How to set the font size of the title in vchart to semi for heading-4?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to set the font size of title to semi in vchart for heading4?
+
+
+# Problem description
+
+I am using the @visactor/vchart library for data lake visualization. However, I encountered a problem where I want to set the font size of the title in vchart to semi's heading-4 font size, but I don't know how to pass this variable in.
+
+
+# Solution
+
+The new version of vchart provides a package called vchart-semi-theme, which can automatically crawl semi CSS variables on the page, so most of the color values of the chart can use this function. As for font size, although this package currently does not directly provide the function of introducing semi variables, you can manually modify the spec or register the theme to achieve the goal.
+
+
+Usage is as follows:
+1. First, install the vchart-semi-theme package
+2. Use Documentation: https://visactor.bytedance.net/vchart/guide/tutorial_docs/Theme/Theme_Extension
+3. You can refer to some examples: https://vp4y9p.csb.app/
+
+
+Note: Since the use of vchart-semi-theme requires crawling the CSS variables of the page, please make sure that your page contains the required semi CSS variables.
+
+
+# Related Documents
+
+VChart official website: https://visactor.bytedance.net/vchart
+Vchart-semi-theme documentation: https://visactor.bytedance.net/vchart/guide/tutorial_docs/Theme/Theme_Extension
+Online Demo: https://vp4y9p.csb.app/
\ No newline at end of file
diff --git a/docs/assets/faq/en/187- How to listen to events on data dimensions and retrieve corresponding data.md b/docs/assets/faq/en/187- How to listen to events on data dimensions and retrieve corresponding data.md
new file mode 100644
index 000000000..cb97cfa4f
--- /dev/null
+++ b/docs/assets/faq/en/187- How to listen to events on data dimensions and retrieve corresponding data.md
@@ -0,0 +1,71 @@
+---
+title: How to monitor events in data dimensions and obtain corresponding data?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to monitor events in data dimensions and obtain corresponding data?
+
+
+## Problem Description
+
+Hello, we have a requirement here to monitor the location of the bar chart data dimension and highlight the cells in another table based on the data corresponding to the user's click. How should this be achieved?
+
+
+## Solution
+
+Users can listen to the dimensionClick event on the vchart instance to customize the operation performed after clicking on a data dimension. At the same time, the information of the corresponding data dimension can be obtained in the callback function parameters:
+```
+vchart.on('dimensionClick', (args) => {
+ const datum = args.datum;
+ console.log('Dimension Click!', args, datum);
+});
+
+```
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+vchart.on('dimensionClick', (args) => {
+ const datum = args.datum;
+ console.log('Dimension Click!', args, datum);
+});
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* github：https://github.com/VisActor/VChart
+* Event: https://visactor.bytedance.net/vchart/api/API/event
+
diff --git a/docs/assets/faq/en/188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles.md b/docs/assets/faq/en/188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles.md
new file mode 100644
index 000000000..e9358f881
--- /dev/null
+++ b/docs/assets/faq/en/188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles.md
@@ -0,0 +1,45 @@
+---
+title: In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question Title
+
+In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?
+
+
+# Question Description
+
+I am using vchart to make charts and have encountered two issues that I would like to ask everyone. My area chart style has been adjusted to a gradient color, but I don't want the legend color to follow the gradient of the area chart, how should I set it?
+
+
+In addition, I did not find in the information that the legend shape provides a rounded rectangle option, is there any other plan to implement the drawing of rounded rectangles?
+
+
+# Solution
+
+Hello, these two problems can be solved through configuration.
+
+
+If you don't want the legend color to follow the gradient of the area chart, you can change the color of the main mark of the series by configuring the seriesMark.
+seriesMark: 'point',
+As for how to draw legends of rounded rectangles, you can set the symbolType graphic attribute of legend graphics by configuring it. The specific setting content is as follows:
+```
+item:{
+shape:{
+style:{
+symbolType:"M 462 282 c 0 99.405 -80.595 180 -180 180 h -540 c -99.405 0 -180 -80.595 -180 -180 v -540 c 0 -99.405 80.595 -180 180 -180 h 540 c 99.405 0 180 80.595 180 180 v 540 z"
+}
+}
+}
+```
+
+
+# Result Show
+
+Online demo: https://codesandbox.io/p/sandbox/line-chart-hover-forked-t74cvw?file=%2Fsrc%2Findex.ts%3A66%2C13
+
+
+# Related Documentation
+
+* VChart documentation symbolType: https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style.symbolType
+* VChart documentation seriesMark: https://visactor.bytedance.net/vchart/option/lineChart#seriesMark('point'|'line')%20=%20'line'
\ No newline at end of file
diff --git a/docs/assets/faq/en/190- How to draw a dual-axis chart.md b/docs/assets/faq/en/190- How to draw a dual-axis chart.md
new file mode 100644
index 000000000..5b17e51d7
--- /dev/null
+++ b/docs/assets/faq/en/190- How to draw a dual-axis chart.md
@@ -0,0 +1,106 @@
+---
+title: 9. How to draw a dual-axis chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to draw a dual-axis chart
+## Describe
+
+What methods can be used to draw a chart with two axes like this?
+
+
+## Solution
+
+In VChart, you can add a right axis and bind the corresponding series to achieve this. Refer to the demo: https://visactor.io/vchart/demo/combination/dual-axis。
+## Code Example
+
+```
+const spec = {
+ type: 'common',
+ seriesField: 'color',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { x: '周一', type: '早餐', y: 15 },
+ { x: '周一', type: '午餐', y: 25 },
+ { x: '周二', type: '早餐', y: 12 },
+ { x: '周二', type: '午餐', y: 30 },
+ { x: '周三', type: '早餐', y: 15 },
+ { x: '周三', type: '午餐', y: 24 },
+ { x: '周四', type: '早餐', y: 10 },
+ { x: '周四', type: '午餐', y: 25 },
+ { x: '周五', type: '早餐', y: 13 },
+ { x: '周五', type: '午餐', y: 20 },
+ { x: '周六', type: '早餐', y: 10 },
+ { x: '周六', type: '午餐', y: 22 },
+ { x: '周日', type: '早餐', y: 12 },
+ { x: '周日', type: '午餐', y: 19 }
+ ]
+ },
+ {
+ id: 'id1',
+ values: [
+ { x: '周一', type: '饮料', y: 22 },
+ { x: '周二', type: '饮料', y: 43 },
+ { x: '周三', type: '饮料', y: 33 },
+ { x: '周四', type: '饮料', y: 22 },
+ { x: '周五', type: '饮料', y: 10 },
+ { x: '周六', type: '饮料', y: 30 },
+ { x: '周日', type: '饮料', y: 50 }
+ ]
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ id: 'bar',
+ dataIndex: 0,
+ label: { visible: true },
+ seriesField: 'type',
+ dataIndex: 0,
+ xField: ['x', 'type'],
+ yField: 'y'
+ },
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 1,
+ label: { visible: true },
+ seriesField: 'type',
+ xField: 'x',
+ yField: 'y',
+ stack: false
+ }
+ ],
+ axes: [
+ { orient: 'left', seriesIndex: [0] },
+ { orient: 'right', seriesId: ['line'], grid: { visible: false } },
+ { orient: 'bottom', label: { visible: true }, type: 'band' }
+ ],
+ legends: {
+ visible: true,
+ orient: 'bottom'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## 结果展示
+
+
+
+https://visactor.io/vchart/demo/combination/dual-axis
+### Related Documents
+
+Demo: [https://visactor.io/vchart/demo/combination/dual-axis](https%3A%2F%2Fvisactor.io%2Fvchart%2Fdemo%2Fcombination%2Fdual-axis)
+### Tutorial:
+
+* Combination Chart: [https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination](https%3A%2F%2Fvisactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Types%2FCombination) API:
+* Combination Chart: [https://visactor.io/vchart/option/commonChart](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FcommonChart) Github: [https://github.com/VisActor/VChart/](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart%2F)
+
diff --git a/docs/assets/faq/en/195- How to display all labels on the x-axis.md b/docs/assets/faq/en/195- How to display all labels on the x-axis.md
new file mode 100644
index 000000000..31af21ed9
--- /dev/null
+++ b/docs/assets/faq/en/195- How to display all labels on the x-axis.md
@@ -0,0 +1,126 @@
+---
+title: How to make all x-axis labels displayed
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to make all the labels of the x-axis display
+## Problem description
+
+May I ask why some of the text on the x-axis of the chart is not displayed? How can it be displayed?
+
+
+## Solution
+
+The discrete lower axis in VChart defaults to a sampling algorithm based on label width. Therefore, when label overlap may occur, some labels are hidden according to the strategy. The relevant configuration items are as follows:
+```
+axes: {
+ sampling: boolean
+}
+```
+After turning off the sampling, in order to show the effect optimization, we also have a set of anti-overlap strategies for graphics. The configuration items are as follows
+```
+export interface AxisLabelOverlap {
+ autoRotate?: boolean;
+ autoRotateAngle?: number[];
+ autoHide?: boolean;
+ autoHideMethod?: 'parity' | 'greedy' | CustomMethod;
+ ...others
+}
+
+axes: {
+ label: {
+ ...AxisLabelOverlap
+ }
+}
+```
+So you can configure the following two things:
+1. Set sampling: false to forcibly display all tags
+1. Set anti-overlap policies. For example, automatic rotation, which displays more labels. If it is not particularly dense, all labels can be displayed.
+## Code example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: 'Stacked line chart'
+ },
+ stack: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ axes: [{
+ orient: 'bottom',
+ sampling: false,
+ label: {
+ autoRotate: true,
+ autoRotateAngle: [45,90]
+ }
+ }],
+ lineLabel: { visible: true },
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5653c?file=%2Fsrc%2Findex.js%3A14%2C18
+## Related Documents
+
+Demo：https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5653c?file=%2Fsrc%2Findex.js%3A14%2C18
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Axis sampling: https://www.visactor.io/vchart/option/barChart-axes-band#sampling
+* Axis label anti-overlap: https://www.visactor.io/vchart/option/barChart-axes-band#label.autoRotate
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/196-How to customize legend shapes.md b/docs/assets/faq/en/196-How to customize legend shapes.md
new file mode 100644
index 000000000..5004cd93f
--- /dev/null
+++ b/docs/assets/faq/en/196-How to customize legend shapes.md
@@ -0,0 +1,104 @@
+---
+title: 25. How to customize the shape of the legend in VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## **Title**
+
+How to customize the shape of the legend in VChart?
+## **Description**
+
+The default shape of the legend in VChart is a rounded rectangle. How can I customize the shape of the legend?
+
+
+## **Solution**
+
+In VChart, you can customize the shape of the legend through configuration.
+## **Code Example**
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ pie: {
+ style: {
+ cornerRadius: 10
+ },
+ state: {
+ hover: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ },
+ selected: {
+ outerRadius: 0.85,
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left',
+ item: {
+ shape: {
+ style: {
+ symbolType: 'star'
+ }
+ }
+ }
+ },
+ label: {
+ visible: true
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## **Result**
+
+
+
+Demo: [https://codesandbox.io/p/sandbox/pie-legends-shap-6tq5k9?file=%2Fsrc%2Findex.ts%3A69%2C7](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fpie-legends-shap-6tq5k9%3Ffile%3D%252Fsrc%252Findex.ts%253A69%252C7)
+## **Related Documents**
+
+Demo: [https://codesandbox.io/p/sandbox/pie-legends-shap-6tq5k9?file=%2Fsrc%2Findex.ts%3A69%2C7](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fpie-legends-shap-6tq5k9%3Ffile%3D%252Fsrc%252Findex.ts%253A69%252C7)
+API:
+* Legend shape: [https://visactor.io/vchart/option/pieChart-legends-discrete#item.shape.style.symbolType](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart-legends-discrete%23item.shape.style.symbolType)
+Github: [https://github.com/VisActor/VChart/](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart%2F)
\ No newline at end of file
diff --git a/docs/assets/faq/en/197- How to configure animations in VChart combination charts.md b/docs/assets/faq/en/197- How to configure animations in VChart combination charts.md
new file mode 100644
index 000000000..0831e4256
--- /dev/null
+++ b/docs/assets/faq/en/197- How to configure animations in VChart combination charts.md
@@ -0,0 +1,148 @@
+---
+title: 85. How to configure animations in VChart portfolio diagrams?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to configure animations for VChart's combo chart?
+
+
+## Problem description
+
+In a biaxial diagram, how to make the left and right axes execute the animation in order, and after the left axis column is executed, the right axis line will play the animation again?
+
+
+## Solution
+
+Firstly, in VChart, its animation can be configured within each series. We can configure animations separately in columns and lines.
+Then there is a dedicated configuration for outro animation in the series: animationAppear.
+```
+animationAppear?: {
+ preset?: Preset | false;
+ duration?: number;
+ delay?: number;
+ easing?: EasingType;
+ oneByOne?: boolean;
+};
+```
+We can configure delay on the online animation to start playing outro animation after the column completes the animation.
+```
+series: [{
+ type: 'bar',
+ id: 'bar',
+ animationAppear: {
+ duration: 500
+ }
+ },
+ {
+ type: 'line',
+ id: 'line',
+ animationAppear: {
+ delay: 500,
+ }
+ }
+]
+```
+In addition, if `oneByOne `is configured on the bar chart animation, it should be noted that the total animation duration of the bar chart = `x-axis number `* `duration`
+
+
+## Code example
+
+```
+const spec = {
+ type: 'common',
+ seriesField: 'color',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { x: '周一', type: '早餐', y: 15 },
+ { x: '周一', type: '午餐', y: 25 },
+ { x: '周二', type: '早餐', y: 12 },
+ { x: '周二', type: '午餐', y: 30 },
+ { x: '周三', type: '早餐', y: 15 },
+ { x: '周三', type: '午餐', y: 24 },
+ { x: '周四', type: '早餐', y: 10 },
+ { x: '周四', type: '午餐', y: 25 },
+ { x: '周五', type: '早餐', y: 13 },
+ { x: '周五', type: '午餐', y: 20 },
+ { x: '周六', type: '早餐', y: 10 },
+ { x: '周六', type: '午餐', y: 22 },
+ { x: '周日', type: '早餐', y: 12 },
+ { x: '周日', type: '午餐', y: 19 }
+ ]
+ },
+ {
+ id: 'id1',
+ values: [
+ { x: '周一', type: '饮料', y: 22 },
+ { x: '周二', type: '饮料', y: 43 },
+ { x: '周三', type: '饮料', y: 33 },
+ { x: '周四', type: '饮料', y: 22 },
+ { x: '周五', type: '饮料', y: 10 },
+ { x: '周六', type: '饮料', y: 30 },
+ { x: '周日', type: '饮料', y: 50 }
+ ]
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ id: 'bar',
+ dataIndex: 0,
+ label: { visible: true },
+ seriesField: 'type',
+ dataIndex: 0,
+ xField: ['x', 'type'],
+ yField: 'y',
+ animationAppear: {
+ duration: 500,
+ oneByOne: true
+ }
+ },
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 1,
+ label: { visible: true },
+ seriesField: 'type',
+ xField: 'x',
+ yField: 'y',
+ stack: false,
+ animationAppear: {
+ delay: 500 * 7,
+ duration: 500,
+ oneByOne: true
+ }
+ }
+ ],
+ axes: [
+ { orient: 'left', seriesIndex: [0] },
+ { orient: 'right', seriesId: ['line'], grid: { visible: false } },
+ { orient: 'bottom', label: { visible: true }, type: 'band' }
+ ],
+ legends: {
+ visible: true,
+ orient: 'bottom'
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* Animation Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types
+* Related demo: https://www.visactor.io/vchart/demo/storytelling/bar-oneByOne-series
+
+
+
diff --git a/docs/assets/faq/en/198- How to set the shape type of Legend and Tooltip in VChart line charts.md b/docs/assets/faq/en/198- How to set the shape type of Legend and Tooltip in VChart line charts.md
new file mode 100644
index 000000000..84442bacf
--- /dev/null
+++ b/docs/assets/faq/en/198- How to set the shape type of Legend and Tooltip in VChart line charts.md
@@ -0,0 +1,326 @@
+---
+title: 96. How to set the shape type of Legend and Tooltip for a line chart, using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set the shape type of Legend and Tooltip for a line chart?
+## Description
+
+The default legend shape of the line chart and the default shape in the Tooltip are both circles. How to change their styles?
+## Solution
+
+The solutions to different chart libraries are different.
+VChart's `tooltip` component and `legend` component provide the function of controlling the icon shape.
+The icon of `legend` is a standard mark element, and its shape and style can be configured through `shape.style`.
+`tooltip` provides a similar icon style. Due to the implementation of HTML and Canvas in `tooltip`, the supported style functions are slightly less.
+
+
+Supported Shape Type：
+`'circle'`, `'cross'`, `'diamond'`, `'square'`, `'arrow'`, `'arrow2Left'`, `'arrow2Right'`, `'wedge'`, `'thinTriangle'`, `'triangle'`, `'triangleUp'`, `'triangleDown'`, `'triangleRight'`, `'triangleLeft'`, `'stroke'`, `'star'`, `'wye'`, `'rect'`, `'arrowLeft'`,`'arrowRight'`, `'rectRound'`, `'roundLine'`
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "line",
+ data: {
+ values: [
+ {
+ medalType: "Gold Medals",
+ count: 40,
+ year: "1952",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 32,
+ year: "1956",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 34,
+ year: "1960",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 36,
+ year: "1964",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 45,
+ year: "1968",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 33,
+ year: "1972",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 34,
+ year: "1976",
+ },
+ {
+ medalType: "Gold Medals",
+ count: null,
+ year: "1980",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 83,
+ year: "1984",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 36,
+ year: "1988",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 37,
+ year: "1992",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 44,
+ year: "1996",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 37,
+ year: "2000",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 35,
+ year: "2004",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 36,
+ year: "2008",
+ },
+ {
+ medalType: "Gold Medals",
+ count: 46,
+ year: "2012",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 19,
+ year: "1952",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 25,
+ year: "1956",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 21,
+ year: "1960",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 26,
+ year: "1964",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 28,
+ year: "1968",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 31,
+ year: "1972",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 35,
+ year: "1976",
+ },
+ {
+ medalType: "Silver Medals",
+ count: null,
+ year: "1980",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 60,
+ year: "1984",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 31,
+ year: "1988",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 34,
+ year: "1992",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 32,
+ year: "1996",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 24,
+ year: "2000",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 40,
+ year: "2004",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 38,
+ year: "2008",
+ },
+ {
+ medalType: "Silver Medals",
+ count: 29,
+ year: "2012",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 17,
+ year: "1952",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 17,
+ year: "1956",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 16,
+ year: "1960",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 28,
+ year: "1964",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 34,
+ year: "1968",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 30,
+ year: "1972",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 25,
+ year: "1976",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: null,
+ year: "1980",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 30,
+ year: "1984",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 27,
+ year: "1988",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 37,
+ year: "1992",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 25,
+ year: "1996",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 33,
+ year: "2000",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 26,
+ year: "2004",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 36,
+ year: "2008",
+ },
+ {
+ medalType: "Bronze Medals",
+ count: 29,
+ year: "2012",
+ },
+ ],
+ },
+ xField: "year",
+ yField: "count",
+ seriesField: "medalType",
+ invalidType: "link",
+ tooltip: {
+ dimension: {
+ shapeType: "roundLine",
+ },
+ },
+ legends: {
+ visible: true,
+ type: "discrete",
+ item: {
+ shape: {
+ style: {
+ symbolType: "roundLine",
+ },
+ },
+ },
+ },
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+## Solution
+
+The label of the coordinate axis currently supports the configuration of rich text content.
+```
+ label: {
+ formatMethod: label => {
+ return {
+ type: 'rich',
+ text: [
+ {
+ text: `${label}`,
+ fontSize: 16,
+ fontWeight: 'bold',
+ fontStyle: 'italic'
+ },
+ { image: `icon address`, width: 40, height: 40 },
+ ]
+ };
+ }
+ }
+```
+## Code example
+
+```
+const rankIcon = {
+ 'Top 1': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/gold-medal.svg',
+ 'Top 2': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/silver-medal.svg',
+ 'Top 3': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/bronze-medal.svg'
+};
+const spec = {
+ type: 'bar',
+ height: 300,
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { name: 'Top 1', value: 990 },
+ { name: 'Top 2', value: 680 },
+ { name: 'Top 3', value: 255 }
+ ]
+ }
+ ],
+ barWidth: 20,
+ yField: 'name',
+ xField: 'value',
+ bar: {
+ style: {
+ cornerRadius: [0, 10, 10, 0],
+ fill: {
+ gradient: 'linear',
+ x0: 0,
+ y0: 0.5,
+ x1: 1,
+ y1: 0.5,
+ stops: [
+ { offset: 0, color: 'rgb(255,163,1)' },
+ { offset: 1, color: 'rgb(255,4,0)' }
+ ]
+ }
+ }
+ },
+ barBackground: {
+ visible: true
+ },
+ label: {
+ visible: true,
+ position: 'center',
+ style: {
+ fill: 'white',
+ stroke: false
+ }
+ },
+ direction: 'horizontal',
+ seriesField: 'type',
+ padding: { left: 50 },
+ axes: [
+ {
+ orient: 'left',
+ minWidth: 50,
+ label: {
+ formatMethod: label => {
+ return {
+ type: 'rich',
+ text: [
+ { image: rankIcon[label], width: 40, height: 40 },
+ {
+ text: `${label}`,
+ fontSize: 16,
+ fontWeight: 'bold',
+ fontStyle: 'italic'
+ }
+ ]
+ };
+ }
+ }
+ }
+ ]
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* github：https://www.visactor.io/vchart/option/barChart-axes-band#label.formatMethod
+* Related demo: https://www.visactor.io/vchart/demo/axis/axis-richtext-label?keyword=axis
+
+
+
diff --git a/docs/assets/faq/en/202- Does VChart support setting graphical elements to the selected state.md b/docs/assets/faq/en/202- Does VChart support setting graphical elements to the selected state.md
new file mode 100644
index 000000000..b0f96dc13
--- /dev/null
+++ b/docs/assets/faq/en/202- Does VChart support setting graphical elements to the selected state.md
@@ -0,0 +1,111 @@
+---
+title: 84. Does VChart support setting the primitive to the selected state?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Does VChart support setting primitive to selected state?
+## Description
+
+Can I set a point to always be selected when not interacting in the spec?
+
+
+## Solution
+
+Directly set the style through the spec setting. If you don't use the state interface, you can directly set the style through the custom function of the channel. The parameters include data information. You can distinguish whether the primitive needs to be set to the selected state according to different data.
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: 'Stacked line chart'
+ },
+ stack: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ line: {
+ style: {
+ curveType: 'monotone'
+ }
+ },
+ point: {
+ style: {
+ size:(datum)=>{
+ return datum.type === 'Rouge' ? 10 : 0
+ },
+ fill: 'white',
+ stroke: null,
+ lineWidth: 2
+ }
+ },
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/custom-style-gprk5k?file=%2Fsrc%2Findex.ts%3A8%2C21
+
+
+
+
+## Related Documentation
+
+Default Selected Dimension Demo: https://www.visactor.io/vchart/demo/line-chart/line-default-select
+Related Api：https://www.visactor.io/vchart/option/lineChart#point.style
+Github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/203- How to limit the width of tooltip content.md b/docs/assets/faq/en/203- How to limit the width of tooltip content.md
new file mode 100644
index 000000000..d6613ea17
--- /dev/null
+++ b/docs/assets/faq/en/203- How to limit the width of tooltip content.md
@@ -0,0 +1,111 @@
+---
+title: 51. How to limit Tootlip content width using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to limit Tootlip content width
+## Description
+
+The data in the chart has very long strings. In this case, the default `tooltip` display effect is not good, and its display effect needs to be optimized.
+## Solution
+
+Solutions of different chart libraries vary. VChart's `tooltip` component allows users to customize the prompt information of the chart elements and dimensions by providing custom configurations for the `key` and `value`. In scenarios involving long texts, typically, just the formatting capabilities are required to format the indicators and abbreviate the dimensions.
+Here are the steps:
+1. Configure `tooltip.mark.content` to format the `value` and `key` in the chart element `tooltip` respectively.
+2. Configure `tooltip.dimension.content` to format the `value` and `key` in the dimension `tooltip` respectively.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "bar",
+ data: [
+ {
+ id: "barData",
+ values: [
+ {
+ month: "Monday",
+ sales: 22,
+ type: "LongLong",
+ },
+ { month: "Tuesday", sales: 13, type: "LongLongLongLong" },
+ { month: "Wednesday", sales: 25, type: "LongLongLongLongLongLong" },
+ {
+ month: "Thursday",
+ sales: 29,
+ type: "LongLongLongLongLongLongLongLong",
+ },
+ {
+ month: "Friday",
+ sales: 38,
+ type: "LongLongLongLongLongLongLongLongLongLong",
+ },
+ ],
+ },
+ ],
+ seriesField: "type",
+ xField: "month",
+ yField: "sales",
+ tooltip: {
+ mark: {
+ position: "bottom",
+ content: [
+ {
+ key: (datum) =>
+ datum.type.length < 20
+ ? datum.type
+ : datum.type.slice(0, 20) + "...",
+ value: (datum) => datum.sales,
+ },
+ ],
+ },
+ dimension: {
+ visible: false,
+ content: [
+ {
+ key: (datum) =>
+ datum.type.length < 20
+ ? datum.type
+ : datum.type.slice(0, 20) + "...",
+ value: (datum) => datum.sales,
+ },
+ ],
+ },
+ },
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+Online demo：https://codesandbox.io/p/sandbox/line-chart-legend-shape-and-color-forked-gq3gcv
+
+
+# Relevant Documents
+
+* VChart defaultSelected configuration item: https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#defaultSelected
+* VChart github: https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/207- How to trigger chart tooltips on mobile devices.md b/docs/assets/faq/en/207- How to trigger chart tooltips on mobile devices.md
new file mode 100644
index 000000000..6b0f3eeca
--- /dev/null
+++ b/docs/assets/faq/en/207- How to trigger chart tooltips on mobile devices.md
@@ -0,0 +1,77 @@
+---
+title: How to trigger chart tooltips on the mobile end?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to trigger chart tooltips on the mobile end?
+## Description
+
+Users who want to view the tip of a chart need to long press on the graphic to trigger it on their mobile phone.
+This interaction is not conducive to users using charts, and a better interaction would be to show tips through clicking.
+## Solution
+
+Different chart libraries have different solutions. VChart's `tooltip` provides `trigger` configuration and supports the triggering forms of `hover` and `click`.
+In the mobile end, you can set `trigger: true` for a better interaction experience.
+In addition, there is a `triggerOff` configuration that controls how tooltips are hidden.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "bar",
+ data: [
+ {
+ id: "barData",
+ values: [
+ { month: "Monday", sales: 22 },
+ { month: "Tuesday", sales: 13 },
+ { month: "Wednesday", sales: 25 },
+ { month: "Thursday", sales: 29 },
+ { month: "Friday", sales: 38 },
+ ],
+ },
+ ],
+ tooltip: {
+ // hover | click
+ trigger: "click",
+ // hover | click | none
+ triggerOff: "none",
+ },
+ xField: "month",
+ yField: "sales",
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Solution
+
+Just configure the poptip property in the theme.
+
+
+```
+theme:{
+ component: {
+ poptip: {
+ contentStyle: {
+ fill: '#fff',
+ },
+ panel: {
+ fill: '#ccc'
+ }
+ }
+ }
+ }
+```
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ name: 'AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple',
+ value: 214480
+ },
+ {
+ name: 'Google',
+ value: 155506
+ },
+ {
+ name: 'Amazon',
+ value: 100764
+ },
+ {
+ name: 'Microsoft',
+ value: 92715
+ },
+ {
+ name: 'Coca-Cola',
+ value: 66341
+ },
+ {
+ name: 'Samsung',
+ value: 59890
+ },
+ {
+ name: 'Toyota',
+ value: 53404
+ },
+ {
+ name: 'Mercedes-Benz',
+ value: 48601
+ },
+ {
+ name: 'Facebook',
+ value: 45168
+ },
+ {
+ name: "McDonald's",
+ value: 43417
+ },
+ {
+ name: 'Intel',
+ value: 43293
+ },
+ {
+ name: 'IBM',
+ value: 42972
+ },
+ {
+ name: 'BMW',
+ value: 41006
+ },
+ {
+ name: 'Disney',
+ value: 39874
+ },
+ {
+ name: 'Cisco',
+ value: 34575
+ },
+ {
+ name: 'GE',
+ value: 32757
+ },
+ {
+ name: 'Nike',
+ value: 30120
+ },
+ {
+ name: 'Louis Vuitton',
+ value: 28152
+ },
+ {
+ name: 'Oracle',
+ value: 26133
+ },
+ {
+ name: 'Honda',
+ value: 23682
+ }
+ ]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'value',
+ yField: 'name',
+ axes: [
+ {
+ orient: 'bottom',
+ visible: false
+ }
+ ],
+ label: {
+ visible: true
+ },
+ theme:{
+ component: {
+ poptip: {
+ contentStyle: {
+ fill: '#fff',
+ },
+ panel: {
+ fill: '#ccc'
+ }
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Result
+
+
+
+## Related Documents
+
+
+
+* API：https://visactor.io/vchart/option/barChart#theme.component
+* Github：https://github.com/VisActor/VChart/
+
diff --git a/docs/assets/faq/en/21- How to adjust the display order of contents in the Tooltip of a VChart stacked bar chart.md b/docs/assets/faq/en/21- How to adjust the display order of contents in the Tooltip of a VChart stacked bar chart.md
new file mode 100644
index 000000000..194c3d14f
--- /dev/null
+++ b/docs/assets/faq/en/21- How to adjust the display order of contents in the Tooltip of a VChart stacked bar chart.md
@@ -0,0 +1,276 @@
+---
+title: How to adjust the display order of content in Tooltip of VChartStacked Bar Chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to adjust the display order of content in Tooltip of VChartStacked Bar Chart?
+
+
+## Problem Description
+
+In a stacked bar chart, the stacking order seems to be reversed from the order of the data, and then the tooltip is reversed again. How can I make the color order of the bars consistent with the order of the tooltip?
+
+
+## Solution
+
+For stacked bar charts, there are two solutions to make the order of the content in the tooltip consistent with the stacking order of the bars:
+* Solution 1: `stackInverse:true` to adjust the stacking order
+```
+{
+ stack: true,
+ stackInverse: true
+}
+```
+
+
+* Solution 2: Adjust the order of elements in the tooltip
+```
+tooltip: {
+ dimension: {
+ updateContent: (items) => {
+ return items.reverse();
+ }
+ }
+ }
+```
+
+
+### Code Examples
+
+* Solution 1:
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: true,
+ stackInverse: true,
+ legends: {
+ visible: true
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+* Option 2
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: true,
+ legends: {
+ visible: true
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ },
+ tooltip: {
+ dimension: {
+ updateContent: (items) => {
+ return items.reverse();
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Related documents
+
+* github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+* [stackInverseConfiguration Options](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FbarChart%23region.stackInverse)
+* [tooltip configuration](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FbarChart%23tooltip.dimension.updateContent)
+
diff --git a/docs/assets/faq/en/210- How to set the time interval in a timeline.md b/docs/assets/faq/en/210- How to set the time interval in a timeline.md
new file mode 100644
index 000000000..f22a7554c
--- /dev/null
+++ b/docs/assets/faq/en/210- How to set the time interval in a timeline.md
@@ -0,0 +1,238 @@
+---
+title: 27. How to set the time interval in the timeline?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set time intervals on the timeline?
+
+
+## Description
+
+When the x-axis type = time, how is the tick interval configured? I want to customize the time interval, for example: interval in "days".
+
+
+
+
+## Solution
+
+You can control the interval between different ticks in the timeline by configuring axes.tickStep. Note: tickStep needs to be configured with a second timestamp.
+
+
+## Code Example
+
+```
+const spec = {
+ color: [
+ '#3855df',
+ '#ffc52b',
+ '#5ecf78',
+ '#fb7a00',
+ '#0acffd',
+ '#217dfd',
+ '#98dd61',
+ '#3150e0',
+ '#714efd',
+ '#0bcfff',
+ '#3d0dde',
+ '#ffc527',
+ '#f5c13f',
+ '#fb7a08',
+ '#95d8fd'
+ ],
+ type: 'rangeColumn',
+ direction: 'horizontal',
+ yField: 'type',
+ minField: 'start_time',
+ maxField: 'end_time',
+ seriesField: 'color',
+ dataZoom: [
+ {
+ orient: 'bottom',
+ height: 20,
+ start: 0.1,
+ endValue: 1681956000,
+ filterMode: 'axis',
+ brushSelect: false,
+ startText: {
+ formatMethod: text => Math.floor(text)
+ },
+ endText: {
+ formatMethod: text => Math.floor(text)
+ }
+ }
+ ],
+ axes: [
+ { orient: 'left', type: 'band', bandPadding: 0.5, visible: false },
+ {
+ type: 'time',
+ orient: 'bottom',
+ layers: [
+ {
+ tickStep: 28800,
+ timeFormat: '%Y%m%d %H:%M'
+ }
+ ]
+ }
+ ],
+ title: {
+ textStyle: {
+ character: [
+ {
+ text: 'Time-Consuming Distribution',
+ fontWeight: 400,
+ fill: '#222'
+ },
+ {
+ text: 'Show the SQL distribution of TOP 100',
+ fontWeight: 200,
+ fontSize: 10,
+ fill: '#555'
+ }
+ ]
+ }
+ },
+ tooltip: {
+ visible: true,
+ dimension: {
+ visible: false
+ },
+ mark: {
+ title: {
+ key: 'Query ID',
+ value: datum => 'Query ID: ' + datum['id']
+ },
+ content: [
+ {
+ key: 'Time Consuming',
+ value: datum => datum['useTime']
+ },
+ {
+ key: 'start time',
+ value: datum => datum['start_time']
+ },
+ {
+ key: 'end time',
+ value: datum => datum['end_time']
+ }
+ ]
+ }
+ },
+ data: [
+ {
+ id: 'data0',
+ values: [
+ {
+ start_time: 1681926000,
+ end_time: 1681927200,
+ type: 'TOP 1',
+ color: 'A',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681926000,
+ end_time: 1681959600,
+ type: 'TOP 2',
+ color: 'B',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681925400,
+ end_time: 1681974000,
+ type: 'TOP 3',
+ color: 'C',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681924800,
+ end_time: 1681933200,
+ type: 'TOP 4',
+ color: 'D',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681959600,
+ end_time: 1681963200,
+ type: 'TOP 5',
+ color: 'E',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681970400,
+ end_time: 1681971000,
+ type: 'TOP 5',
+ color: 'F',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681992000,
+ end_time: 1681992600,
+ type: 'TOP 5',
+ color: 'G',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681956000,
+ end_time: 1681963200,
+ type: 'TOP 6',
+ color: 'H',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681990200,
+ end_time: 1681993800,
+ type: 'TOP 7',
+ color: 'I',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681948800,
+ end_time: 1681959600,
+ type: 'TOP 8',
+ color: 'J',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681945200,
+ end_time: 1681956000,
+ type: 'TOP 9',
+ color: 'K',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ }
+ ].reverse()
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID, animation: false });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://www.visactor.io/vchart/demo/data-zoom/state-with-data
+
+
+
+
+## Related Documentation
+
+Time Axes Demo：https://www.visactor.io/vchart/demo/data-zoom/state-with-data
+Time Axes Tutorial：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes
+Related Api：https://www.visactor.io/vchart/option/barChart-axes-time#layers.tickStep
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/212- What are the methods for data sampling in VChart charts.md b/docs/assets/faq/en/212- What are the methods for data sampling in VChart charts.md
new file mode 100644
index 000000000..368c6fc8d
--- /dev/null
+++ b/docs/assets/faq/en/212- What are the methods for data sampling in VChart charts.md
@@ -0,0 +1,46 @@
+---
+title: What are the methods of data sampling in VChart charts?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+What are the methods for data sampling in VChart charts?
+
+
+## Problem Description
+
+May I ask if there are any data sampling configurations in vchart to improve performance when the amount of data in the line chart is large?
+
+
+## Solution
+
+VChart line chart, since the `1.6.0 `version supports data sampling method configuration.
+The downsampling strategy for line charts when the data volume is much larger than the pixel points can effectively optimize the drawing efficiency of the chart when turned on. It is turned off by default, that is, all drawings without filtering Data Points. Optional values for `sampling `configuration:
+* `'Lttb' `: Using Largest-Triangle-Three-Bucket algorithm, it can maximize the trend, shape and extreme value of the sampled line.
+* `'Min' `: Take the minimum value of the filter point
+* `'Max' `: take the maximum value of the filter point
+* `'Sum' `: take the sum of the filter points
+* `'Average' `: Take the average of the filter points
+The sampling effect can be adjusted through the `samplingFactor` configuration.
+```
+sampling: 'lttb',
+samplingFactor: 0.1,
+```
+
+
+## Code Example
+
+https://visactor.io/vchart/demo/line-chart/line-sampling
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* github：https://github.com/VisActor/VChart
+* Sampling option: https://visactor.io/vchart/option/lineChart#sampling
+
diff --git a/docs/assets/faq/en/22- How to center the labels in a bar chart.md b/docs/assets/faq/en/22- How to center the labels in a bar chart.md
new file mode 100644
index 000000000..5e258800a
--- /dev/null
+++ b/docs/assets/faq/en/22- How to center the labels in a bar chart.md
@@ -0,0 +1,94 @@
+---
+title: 15. How to center the label of a bar chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question
+
+How to center the label of a bar chart?
+## Description
+
+In a stacked bar chart, it is expected that each label will be centered.
+## Solution
+
+Different chart libraries have different solutions. VChart provides label configuration options and supports various postion configurations.
+Optional values are: `'outside'`、`'top'`、`'bottom'`、`'left'`、`'right'`、`'inside'`、`'inside-top'`、`'inside-bottom'`、`'inside-right'`·`'inside-left'`、`'top-right'`、`'top-left'`、`'bottom-right'`、`'bottom-left'`
+## Code example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "bar",
+ label: {
+ visible: true,
+ position: "inside",
+ },
+ data: [
+ {
+ id: "barData",
+ values: [
+ { type: "Autocracies", year: "1930", value: 129 },
+ { type: "Autocracies", year: "1940", value: 133 },
+ { type: "Autocracies", year: "1950", value: 130 },
+ { type: "Autocracies", year: "1960", value: 126 },
+ { type: "Autocracies", year: "1970", value: 117 },
+ { type: "Autocracies", year: "1980", value: 114 },
+ { type: "Autocracies", year: "1990", value: 111 },
+ { type: "Autocracies", year: "2000", value: 89 },
+ { type: "Autocracies", year: "2010", value: 80 },
+ { type: "Autocracies", year: "2018", value: 80 },
+ { type: "Democracies", year: "1930", value: 22 },
+ { type: "Democracies", year: "1940", value: 13 },
+ { type: "Democracies", year: "1950", value: 25 },
+ { type: "Democracies", year: "1960", value: 29 },
+ { type: "Democracies", year: "1970", value: 38 },
+ { type: "Democracies", year: "1980", value: 41 },
+ { type: "Democracies", year: "1990", value: 57 },
+ { type: "Democracies", year: "2000", value: 87 },
+ { type: "Democracies", year: "2010", value: 98 },
+ { type: "Democracies", year: "2018", value: 99 },
+ ],
+ },
+ ],
+ xField: ["year", "type"],
+ yField: "value",
+ seriesField: "type",
+ legends: {
+ visible: true,
+ orient: "top",
+ position: "start",
+ },
+ };
+
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Quote
+
+* github：https://github.com/VisActor/VChart
+* Legend shape：https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style
+* Legend orient：https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#orient
\ No newline at end of file
diff --git a/docs/assets/faq/en/24- How to configure a custom theme in VChart.md b/docs/assets/faq/en/24- How to configure a custom theme in VChart.md
new file mode 100644
index 000000000..7d3337a55
--- /dev/null
+++ b/docs/assets/faq/en/24- How to configure a custom theme in VChart.md
@@ -0,0 +1,106 @@
+---
+title: How to configure custom themes in VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+
+
+# Title
+
+How to configure custom themes in VChart?
+
+
+## Problem Description
+
+
+I am using VChart for data visualization and I want to set a custom theme for my charts, but I don't know how to do it. Also, I want to know how to dynamically update the theme of the charts. Can someone with experience guide me through this?
+
+
+# Solution
+
+
+VChart provides two ways to configure and update custom themes: by configuring the theme through the chart spec and by registering the theme through the ThemeManager. We will explain how to use these two methods separately.
+## Configuring the theme through the chart spec
+
+
+When defining a chart, we can directly pass a theme object that conforms to the ITheme type to the theme configuration item of the chart spec to apply this custom theme. The specific steps are as follows:
+1. Create a theme object that conforms to the ITheme type, for example:
+```
+const theme = {*
+* colorScheme: {*
+* default: [*
+* '#5383F4',*
+* '#7BCF8E',*
+* '#FF9D2C',*
+* '#FFDB26',*
+* '#7568D9',*
+* '#80D8FB',*
+* '#1857A3',*
+* '#CAB0E8',*
+* '#FF8867',*
+* '#B9E493',*
+* '#2CB4A8',*
+* '#B9E4E3'*
+* ]*
+* },*
+* series: {*
+* bar: {*
+* barMaxWidth: 15,*
+* label: {*
+* visible: true,*
+* position: 'top',*
+* formatMethod: text => text + '%'*
+* }*
+* }*
+* },*
+* component: {*
+* axis: {*
+* label: {*
+* style: { fontFamily: 'Times New Roman' }*
+* }*
+* }*
+* },*
+* markByName: {*
+* bar: {*
+* style: {*
+* cornerRadius: 15*
+* }*
+* }*
+* }*
+*};
+```
+1. When defining the chart, pass the theme object to the theme configuration item of the chart spec, for example:
+```
+const spec = {*
+* type: 'bar',*
+* data: [*
+* {*
+* id: 'id0',*
+* values: data*
+* }*
+* ],
+ ...*
+* theme: theme,
+ ...
+}
+```
+
+
+## Registering the theme through the ThemeManager
+
+
+VChart also provides a theme manager called ThemeManager, which you can use to globally register custom themes. You can also use ThemeManager.setCurrentTheme to apply a registered theme by its name. The specific steps are as follows:
+1. Register the theme object in the application, for example:
+```
+VChart.ThemeManager.registerTheme('userTheme', theme);
+```
+1. In the chart where you want to use the theme, use ThemeManager.setCurrentTheme to apply the theme, for example:
+```
+vchart.ThemeManager.setCurrentTheme('myTheme');
+```
+
+
+# Related Documentation
+
+Theme：[https://www.visactor.io/vchart/guide/tutorial_docs/Theme/Customize_Theme](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FTheme%2FCustomize_Theme)
+Github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/25- How to listen to DataZoom operations.md b/docs/assets/faq/en/25- How to listen to DataZoom operations.md
new file mode 100644
index 000000000..4d433d1ff
--- /dev/null
+++ b/docs/assets/faq/en/25- How to listen to DataZoom operations.md
@@ -0,0 +1,351 @@
+---
+title: 16. How to monitor the change of DataZoom?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to monitor the change of DataZoom?
+## Description
+
+It is necessary to obtain the state information of the user's interaction with the chart dataZoom for the next rendering to preserve the state of `dataZoom`.
+## Solution
+
+Different chart libraries have different solutions. VChart provides the dataZoomChange event to obtain the new `start` and `end` points of the chart after the DataZoom change, as well as other information.
+After obtaining the new `start` and `end`, users can save this information and rewrite it back to the spec when needed, thus making the dataZoom state persistent.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "scatter",
+ xField: "revenues_mm",
+ yField: "profit_mm",
+ seriesField: "category",
+ dataZoom: [
+ {
+ orient: "bottom",
+ start: 0,
+ end: 0.4,
+ minSpan: 0.2,
+ maxSpan: 0.8,
+ filterMode: "axis",
+ },
+ ],
+ axes: [
+ {
+ title: {
+ visible: true,
+ text: "revenues_mm",
+ },
+ orient: "left",
+ type: "linear",
+ },
+ {
+ title: {
+ visible: true,
+ text: "profit_mm",
+ },
+ orient: "bottom",
+ label: { visible: true },
+ type: "linear",
+ },
+ ],
+ legends: [{}],
+ data: [
+ {
+ id: "data",
+ values: [
+ {
+ company: "Johnson & Johnson",
+ revenues_mm: 71890,
+ profit_mm: 18540,
+ profit_as_of_revenues: 0.2578940047294478,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Procter & Gamble",
+ revenues_mm: 71726,
+ profit_mm: 10508,
+ profit_as_of_revenues: 0.14650196581434904,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Abbvie",
+ revenues_mm: 25638,
+ profit_mm: 5953,
+ profit_as_of_revenues: 0.23219439893907481,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Amgen",
+ revenues_mm: 22991,
+ profit_mm: 7722,
+ profit_as_of_revenues: 0.33587055804445215,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Eli Lilly",
+ revenues_mm: 21222,
+ profit_mm: 2738,
+ profit_as_of_revenues: 0.12901705777023842,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Bristol-Myers Squibb",
+ revenues_mm: 19427,
+ profit_mm: 4457,
+ profit_as_of_revenues: 0.22942296803417925,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Altria Group",
+ revenues_mm: 19337,
+ profit_mm: 14239,
+ profit_as_of_revenues: 0.7363603454517247,
+ category: "Tobacco",
+ },
+ {
+ company: "Kimberly-Clark",
+ revenues_mm: 18202,
+ profit_mm: 2166,
+ profit_as_of_revenues: 0.11899791231732777,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "General Mills",
+ revenues_mm: 16563,
+ profit_mm: 1697,
+ profit_as_of_revenues: 0.10245728430839823,
+ category: "Food",
+ },
+ {
+ company: "Colgate-Palmolive",
+ revenues_mm: 15195,
+ profit_mm: 2441,
+ profit_as_of_revenues: 0.16064494899638038,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Conagra Brands",
+ revenues_mm: 14134,
+ profit_mm: -677,
+ profit_as_of_revenues: -0.04789868402433847,
+ category: "Food",
+ },
+ {
+ company: "Land O'Lakes",
+ revenues_mm: 13233,
+ profit_mm: 245,
+ profit_as_of_revenues: 0.01851432025995617,
+ category: "Food",
+ },
+ {
+ company: "Pepsico",
+ revenues_mm: 62789,
+ profit_mm: 6329,
+ profit_as_of_revenues: 0.1007979104620236,
+ category: "Food",
+ },
+ {
+ company: "Kellogg",
+ revenues_mm: 13014,
+ profit_mm: 694,
+ profit_as_of_revenues: 0.053327186107269095,
+ category: "Food",
+ },
+ {
+ company: "Reynolds American",
+ revenues_mm: 12503,
+ profit_mm: 6073,
+ profit_as_of_revenues: 0.48572342637766935,
+ category: "Tobacco",
+ },
+ {
+ company: "Biogen",
+ revenues_mm: 11449,
+ profit_mm: 3703,
+ profit_as_of_revenues: 0.32343436107957024,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Estee Lauder",
+ revenues_mm: 11262,
+ profit_mm: 1115,
+ profit_as_of_revenues: 0.09900550523885633,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Celgene",
+ revenues_mm: 11229,
+ profit_mm: 1999,
+ profit_as_of_revenues: 0.17802119511977915,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Hormel Foods",
+ revenues_mm: 9523,
+ profit_mm: 890,
+ profit_as_of_revenues: 0.09345794392523364,
+ category: "Food",
+ },
+ {
+ company: "Campbell Soup",
+ revenues_mm: 7961,
+ profit_mm: 563,
+ profit_as_of_revenues: 0.07071975882426831,
+ category: "Food",
+ },
+ {
+ company: "J. M. Smucker",
+ revenues_mm: 7811,
+ profit_mm: 689,
+ profit_as_of_revenues: 0.08820893611573422,
+ category: "Food",
+ },
+ {
+ company: "Dean Foods",
+ revenues_mm: 7710,
+ profit_mm: 120,
+ profit_as_of_revenues: 0.01556420233463035,
+ category: "Food",
+ },
+ {
+ company: "Hershey",
+ revenues_mm: 7440,
+ profit_mm: 720,
+ profit_as_of_revenues: 0.0967741935483871,
+ category: "Food",
+ },
+ {
+ company: "Pfizer",
+ revenues_mm: 52824,
+ profit_mm: 7215,
+ profit_as_of_revenues: 0.13658564288959563,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Constellation Brands",
+ revenues_mm: 6548,
+ profit_mm: 1055,
+ profit_as_of_revenues: 0.16111789859499084,
+ category: "Beverages",
+ },
+ {
+ company: "Dr. Pepper Snapple Group",
+ revenues_mm: 6440,
+ profit_mm: 847,
+ profit_as_of_revenues: 0.13152173913043477,
+ category: "Beverages",
+ },
+ {
+ company: "HRG Group",
+ revenues_mm: 6403,
+ profit_mm: -199,
+ profit_as_of_revenues: -0.031079181633609246,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Treehouse Foods",
+ revenues_mm: 6175,
+ profit_mm: -229,
+ profit_as_of_revenues: -0.03708502024291498,
+ category: "Food",
+ },
+ {
+ company: "Avon Products",
+ revenues_mm: 5853,
+ profit_mm: -108,
+ profit_as_of_revenues: -0.018452075858534086,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Clorox",
+ revenues_mm: 5761,
+ profit_mm: 648,
+ profit_as_of_revenues: 0.11248047214025343,
+ category: "Household & Personal Products",
+ },
+ {
+ company: "Coca-Cola",
+ revenues_mm: 41863,
+ profit_mm: 6527,
+ profit_as_of_revenues: 0.15591333635907603,
+ category: "Beverages",
+ },
+ {
+ company: "Merck",
+ revenues_mm: 39807,
+ profit_mm: 3920,
+ profit_as_of_revenues: 0.09847514256286583,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Gilead Sciences",
+ revenues_mm: 30390,
+ profit_mm: 13501,
+ profit_as_of_revenues: 0.4442579795985522,
+ category: "Pharmaceuticals",
+ },
+ {
+ company: "Philip Morris International",
+ revenues_mm: 26685,
+ profit_mm: 6967,
+ profit_as_of_revenues: 0.2610830054337643,
+ category: "Tobacco",
+ },
+ {
+ company: "Kraft Heinz",
+ revenues_mm: 26487,
+ profit_mm: 3632,
+ profit_as_of_revenues: 0.1371238720881942,
+ category: "Food",
+ },
+ {
+ company: "Mondelez International",
+ revenues_mm: 25923,
+ profit_mm: 1659,
+ profit_as_of_revenues: 0.06399722254368707,
+ category: "Food",
+ },
+ ],
+ },
+ ],
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ vchart.on("dataZoomChange", (params) => {
+ const { value } = params;
+ console.log("changed value:", value.start, value.end);
+ });
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+## Solution
+
+VChart axis labels support absolute positioning with HTML. To achieve this:
+* Step 1: VChart needs to enable the relevant plugin through `enableHtmlAttribute: true`.
+```
+const vchart = new VChart(spec, { dom: CONTAINER_ID, enableHtmlAttribute: true });
+vchart.renderSync();
+```
+* Step 2: When configuring the axis labels, return HTML type labels through the `formatMethod`.
+* Step 3: Implement custom URL jumps through the `
+
+## Solution
+
+VChart supports scatter correlation plots after the 1.3.0 version, and its key configuration is as follows:
+* `The categoryField `property is declared as a node name field configuration
+* `The valueField `property is declared as a related data field configuration
+* `The sizeField `property is declared as a node size data field configuration
+* `The sizeRange `property is declared as the node size mapping range
+* `Correlation Chart.innerRadius `: Node distribution inner radius
+* `correlations Chart.outerRadius `: outer radius of node distribution
+
+
+## Code example
+
+```
+const spec = {
+ type: 'correlation',
+ data: [
+ {
+ values: [
+ { word: '输入法哪个好用', pv: 15952, ratio: 94, sim: 3932 },
+ { word: '谷歌拼音输入法', pv: 11032, ratio: 97, sim: 2799 },
+ { word: '讯飞输入法', pv: 107908, ratio: 102, sim: 2645 },
+ { word: 'QQ输入法', pv: 74912, ratio: 99, sim: 2189 },
+ { word: '百度输入法', pv: 193624, ratio: 121, sim: 2100 },
+ { word: '搜狗输入法', pv: 835168, ratio: 88, sim: 2050 },
+ { word: '谷歌输入法', pv: 14140, ratio: 96, sim: 1953 },
+ { word: '手心输入法', pv: 19236, ratio: 97, sim: 1870 },
+ { word: '输入法不见了', pv: 1968, ratio: 109, sim: 1705 },
+ { word: '输入法哪个最好用', pv: 812, ratio: 150, sim: 1567 },
+ { word: '必应输入法', pv: 4602, ratio: 91, sim: 1522 },
+ { word: '章鱼输入法', pv: 18262, ratio: 97, sim: 1486 },
+ { word: '输入法下载', pv: 34186, ratio: 91, sim: 1278 },
+ { word: '拼音输入法', pv: 7186, ratio: 86, sim: 1009 },
+ { word: 'SHURUFA', pv: 13418, ratio: 102, sim: 924 },
+ { word: '微软输入法', pv: 4680, ratio: 88, sim: 804 },
+ { word: 'GOOGLE输入法', pv: 2206, ratio: 97, sim: 800 },
+ { word: '输入法切换不出来', pv: 15112, ratio: 85, sim: 764 },
+ { word: '章鱼输入法下载', pv: 8204, ratio: 135, sim: 754 },
+ { word: '讯飞输入法下载', pv: 5590, ratio: 106, sim: 609 },
+ { word: '输入法搜狗', pv: 352, ratio: 132, sim: 593 },
+ { word: '输入法皮肤', pv: 2476, ratio: 103, sim: 540 },
+ { word: '紫光输入法', pv: 1582, ratio: 86, sim: 538 },
+ { word: '输入法设置', pv: 1298, ratio: 75, sim: 527 },
+ { word: '搜狗输入法下载安装', pv: 126182, ratio: 102, sim: 521 },
+ { word: '微软拼音输入法', pv: 3442, ratio: 88, sim: 510 },
+ { word: 'QQ拼音输入法', pv: 24912, ratio: 98, sim: 478 },
+ { word: '输入发', pv: 150, ratio: 125, sim: 465 },
+ { word: 'SOUGOU输入法', pv: 264, ratio: 89, sim: 452 },
+ { word: '微软拼音', pv: 2772, ratio: 93, sim: 443 }
+ ]
+ }
+ ],
+
+ categoryField: 'word',
+ valueField: 'sim',
+
+ sizeField: 'pv',
+ sizeRange: [12, 30],
+
+ innerRadius: '25%',
+ outerRadius: '95%',
+
+ nodePoint: {
+ state: {
+ hover: {
+ lineWidth: 8,
+ strokeOpacity: 0.2
+ }
+ }
+ },
+
+ centerPoint: {
+ state: {
+ hover: {
+ lineWidth: 8,
+ strokeOpacity: 0.2
+ }
+ }
+ },
+
+ centerLabel: {
+ visible: true,
+ position: 'center',
+ style: {
+ fill: 'white',
+ text: '输入法'
+ }
+ },
+
+ label: {
+ visible: true,
+ position: 'bottom',
+ style: {
+ fill: 'black'
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+Demo: https://www.visactor.io/vchart/demo/correlation-chart/correlation-chart
+## Related Documents
+
+Demo：https://www.visactor.io/vchart/demo/correlation-chart/correlation-chart
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Scatter correlation plot configuration: https://www.visactor.io/vchart/option/correlationChart
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/29- How to control layout spacing of charts and components within the chart.md b/docs/assets/faq/en/29- How to control layout spacing of charts and components within the chart.md
new file mode 100644
index 000000000..e687cb7eb
--- /dev/null
+++ b/docs/assets/faq/en/29- How to control layout spacing of charts and components within the chart.md
@@ -0,0 +1,204 @@
+---
+title: 26. How to control the layout spacing of charts and components within charts
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to control the layout spacing of charts and components within charts
+
+
+## Description
+
+How to control the layout spacing of charts and components within charts, as shown in the figure below, you want to adjust the spacing at the red box mark so that the chart axis and legend can be aligned on the left
+
+
+
+
+
+
+## Solution
+
+You can use the padding property provided on VChart. If you want to configure the padding of the chart, you can directly configure it at the first level of the spec, as follows:
+
+
+```
+const spec = {
+ padding: {
+ left: 0,
+ }
+}
+```
+
+
+If you want to configure the padding of a component, you can directly configure it under the properties of the corresponding component. VChart provides the padding property for all elements on the chart. The specific usage can be found on the configuration page.
+## Code Example
+
+The following code configures padding on axes, legends, and charts, leaving 0 blank space on the left side of the chart.
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ x: '2:00',
+ y: 82,
+ type: 'sales'
+ },
+ {
+ x: '4:00',
+ y: 50,
+ type: 'sales'
+ },
+ {
+ x: '6:00',
+ y: 64,
+ type: 'sales'
+ },
+ {
+ x: '8:00',
+ y: 30,
+ type: 'sales'
+ },
+ {
+ x: '10:00',
+ y: 40,
+ type: 'sales'
+ },
+ {
+ x: '12:00',
+ y: 40,
+ type: 'sales'
+ },
+ {
+ x: '14:00',
+ y: 56,
+ type: 'sales'
+ },
+ {
+ x: '16:00',
+ y: 40,
+ type: 'sales'
+ },
+ {
+ x: '18:00',
+ y: 64,
+ type: 'sales'
+ },
+ {
+ x: '20:00',
+ y: 74,
+ type: 'sales'
+ },
+ {
+ x: '22:00',
+ y: 98,
+ type: 'sales'
+ },
+ {
+ x: '2:00',
+ y: 62,
+ type: 'profit'
+ },
+ {
+ x: '4:00',
+ y: 30,
+ type: 'profit'
+ },
+ {
+ x: '6:00',
+ y: 32,
+ type: 'profit'
+ },
+ {
+ x: '8:00',
+ y: 10,
+ type: 'profit'
+ },
+ {
+ x: '10:00',
+ y: 20,
+ type: 'profit'
+ },
+ {
+ x: '12:00',
+ y: 20,
+ type: 'profit'
+ },
+ {
+ x: '14:00',
+ y: 36,
+ type: 'profit'
+ },
+ {
+ x: '16:00',
+ y: 20,
+ type: 'profit'
+ },
+ {
+ x: '18:00',
+ y: 44,
+ type: 'profit'
+ },
+ {
+ x: '20:00',
+ y: 74,
+ type: 'profit'
+ },
+ {
+ x: '22:00',
+ y: 78,
+ type: 'profit'
+ }
+ ]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'y',
+ yField: ['x', 'type'],
+ seriesField: 'type',
+ legends: {
+ visible: true,
+ orient: 'bottom',
+ position: 'left',
+ padding: {
+ left: 0
+ }
+ },
+ axes: [
+ {
+ orient: 'left',
+ paddingInner: 0,
+ padding: {
+ left: 0
+ }
+ }
+ ],
+ padding: {
+ left: 0
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+
+
+
+
+## Related Documents
+
+* API：
+* https://visactor.io/vchart/option/barChart#padding
+* https://visactor.io/vchart/option/barChart-axes-linear#padding
+* https://visactor.io/vchart/option/barChart-legends-discrete#padding
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/3- How to solve the issue of line chart bifurcation after combining with stacked line and bidirectional bar charts.md b/docs/assets/faq/en/3- How to solve the issue of line chart bifurcation after combining with stacked line and bidirectional bar charts.md
new file mode 100644
index 000000000..c46918f6d
--- /dev/null
+++ b/docs/assets/faq/en/3- How to solve the issue of line chart bifurcation after combining with stacked line and bidirectional bar charts.md
@@ -0,0 +1,194 @@
+---
+title: How to solve the problem of the line chart for a stacked line chart and a bidirectional bar chart combination being partially crossed?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+
+Title
+How to solve the problem of the line chart for a stacked line chart and a bidirectional bar chart combination being partially crossed?
+
+
+Description
+After combining a stacked line chart and a bidirectional bar chart, I found that the line chart is partially forked, as shown in the figure below. How can I solve this problem?
+
+
+Solution
+This problem is caused by the fact that the line chart does not sort the data according to the order of the axis by default, but draws it according to the order of the data in the array. Here, you can turn on the sortDataByAxis switch to sort the data according to the order of the axis, and the drawing will be normal.
+
+
+Code example
+```
+
+const barMockData = [
+ { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 209 },
+ { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-25', value: 0 },
+ { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 104 },
+ { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-26', value: -3 },
+ { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 61 },
+ { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-27', value: -1 },
+ { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 4 },
+ { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
+ { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 3 },
+ { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-26', value: -7 },
+ { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 4 },
+ { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-27', value: -8 },
+ { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 1 },
+ { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-24', value: -1 },
+ { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 1 },
+ { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
+ { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
+ { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
+ { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 0 },
+ { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-27', value: -5 },
+ { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 177 },
+ { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
+ { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 72 },
+ { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-26', value: -30 },
+ { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 127 },
+ { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-27', value: -9 },
+ { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 48 },
+ { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
+ { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 333 },
+ { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
+ { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 26 },
+ { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-27', value: -3 },
+ { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
+ { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 57 },
+ { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-25', value: -3 },
+ { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
+ { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-26', value: -11 },
+ { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 43 },
+ { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-27', value: 0 }
+];
+const mockData = [
+ { value: 2360, name: 'a', date: '2023-09-23' },
+ { value: 3829, name: 'b', date: '2023-09-23' },
+ { value: 1102, name: 'c', date: '2023-09-23' },
+ { value: 4856, name: 'd', date: '2023-09-23' },
+ { value: 5039, name: 'e', date: '2023-09-23' },
+ { value: 2180, name: 'f', date: '2023-09-23' },
+ { value: 2360, name: 'a', date: '2023-09-24' },
+ { value: 3829, name: 'b', date: '2023-09-24' },
+ { value: 1102, name: 'c', date: '2023-09-24' },
+ { value: 4856, name: 'd', date: '2023-09-24' },
+ { value: 5039, name: 'e', date: '2023-09-24' },
+ { value: 2180, name: 'f', date: '2023-09-24' },
+ { value: 2140, name: 'a', date: '2023-09-25' },
+ { value: 3829, name: 'b', date: '2023-09-25' },
+ { value: 1102, name: 'c', date: '2023-09-25' },
+ { value: 4670, name: 'd', date: '2023-09-25' },
+ { value: 4990, name: 'e', date: '2023-09-25' },
+ { value: 2123, name: 'f', date: '2023-09-25' },
+ { value: 2028, name: 'a', date: '2023-09-26' },
+ { value: 3833, name: 'b', date: '2023-09-26' },
+ { value: 1102, name: 'c', date: '2023-09-26' },
+ { value: 4621, name: 'd', date: '2023-09-26' },
+ { value: 4644, name: 'e', date: '2023-09-26' },
+ { value: 2133, name: 'f', date: '2023-09-26' },
+ { value: 1967, name: 'a', date: '2023-09-27' },
+ { value: 3837, name: 'b', date: '2023-09-27' },
+ { value: 1107, name: 'c', date: '2023-09-27' },
+ { value: 4498, name: 'd', date: '2023-09-27' },
+ { value: 4622, name: 'e', date: '2023-09-27' },
+ { value: 2087, name: 'f', date: '2023-09-27' },
+ { value: 1911, name: 'a', date: '2023-09-28' },
+ { value: 3838, name: 'b', date: '2023-09-28' },
+ { value: 1106, name: 'c', date: '2023-09-28' },
+ { value: 4042, name: 'd', date: '2023-09-28' },
+ { value: 4617, name: 'e', date: '2023-09-28' },
+ { value: 2087, name: 'f', date: '2023-09-28' }
+];
+const spec = {
+ type: 'common',
+ bar: { state: { hover: { style: { fillOpacity: 0.5 } } }, style: { cursor: 'pointer' } },
+ title: {
+ visible: true,
+ align: 'left',
+ verticalAlign: 'top',
+ orient: 'top',
+ innerPadding: { bottom: 10 },
+ text: '每日问题详情',
+ subtext: '左Y轴正数为修复数，负数为新增数（可点击柱体查看详情）。右轴为每日总问题数'
+ },
+ data: [
+ { id: 'barData', values: barMockData },
+ { id: 'id1', values: mockData }
+ ],
+ series: [
+ {
+ type: 'bar',
+ id: 'bar',
+ dataIndex: 0,
+ seriesField: 'name',
+ xField: ['time', 'groupName'],
+ yField: 'value'
+ },
+ {
+ type: 'line',
+ id: 'line',
+ dataIndex: 1,
+ xField: 'date',
+ yField: 'value',
+ seriesField: 'name',
+ stack: true,
+ sortDataByAxis: true
+ }
+ ],
+ axes: [
+ { orient: 'left', id: 'bar', seriesId: ['bar'], tick: { tickCount: 6 }, nice: true },
+ {
+ orient: 'right',
+ seriesId: ['line'],
+ sync: { axisId: 'bar', tickAlign: true },
+ gird: { visible: false },
+ nice: true
+ },
+ { orient: 'bottom', domainLine: { onZero: true } }
+ ],
+ legends: { visible: true, padding: { top: '2%', right: '10%' } },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: (datum) => datum?.name,
+ value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
+ }
+ ]
+ },
+ dimension: {
+ content: [
+ {
+ key: (datum) => datum?.name,
+ value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
+ }
+ ]
+ }
+ }
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+
+```
+
+
+Result
+
+
+
+
+Related documentation
+* Related API: [https://www.visactor.io/vchart/option/barChart#sortDataByAxis](https%3A%2F%2Fwww.visactor.io%2Fvchart%2Foption%2FbarChart%23sortDataByAxis)
+* Github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
+
+
diff --git a/docs/assets/faq/en/31- Can VChart be server-side rendered.md b/docs/assets/faq/en/31- Can VChart be server-side rendered.md
new file mode 100644
index 000000000..72557708d
--- /dev/null
+++ b/docs/assets/faq/en/31- Can VChart be server-side rendered.md
@@ -0,0 +1,88 @@
+---
+title: Can VChart be server-side rendering?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+Can server-side rendering be used?
+## Problem description
+
+Can server-side rendering be used? I want to provide a service to obtain chart images at the server level.
+## Solution
+
+VChart supports Node server-side rendering. The drawing library VRender used by VChart supports Node environment rendering. In addition to VChart, you only need to install the [canvas ](https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcanvas)package at the server level.
+
+
+## Code example
+
+```
+const fs = require('fs');
+
+const VChart = require('@visactor/vchart');
+const Canvas = require('canvas');
+
+// 正常的图表 spec 配置
+const spec = {
+ type: 'radar',
+ data: [
+ {
+ id: 'Map',
+ values: [
+ { key: 'North', value: 31, category: 'Destroyer' },
+ { key: 'Northeast', value: 32, category: 'Destroyer' },
+ { key: 'East', value: 21, category: 'Destroyer' },
+ { key: 'Southeast', value: 15, category: 'Destroyer' },
+ { key: 'South', value: 50, category: 'Destroyer' },
+ { key: 'Southwest', value: 44, category: 'Destroyer' },
+ { key: 'West', value: 32, category: 'Destroyer' },
+ { key: 'Northwest', value: 32, category: 'Destroyer' },
+ { key: 'North', value: 31, category: 'Destroyer' },
+ { key: 'Northeast', value: 32, category: 'Destroyer' },
+ { key: 'East', value: 21, category: 'Destroyer' },
+ { key: 'Southeast', value: 40, category: 'aircraft carrier' },
+ { key: 'South', value: 25, category: 'aircraft carrier' },
+ { key: 'Southwest', value: 22, category: 'aircraft carrier' },
+ { key: 'West', value: 18, category: 'aircraft carrier' },
+ { key: 'Northwest', value: 7, category: 'aircraft carrier' },
+ { key: 'North', value: 24, category: 'aircraft carrier' },
+ { key: 'Northeast', value: 43, category: 'aircraft carrier' },
+ { key: 'East', value: 42, category: 'aircraft carrier' }
+ ]
+ }
+ ],
+ categoryField: 'key',
+ valueField: 'value',
+ seriesField: 'category',
+ legends: {
+ visible: true,
+ orient: 'bottom'
+ }
+};
+const cs = new VChart.default(spec, {
+ // 声明使用的渲染环境以及传染对应的渲染环境参数
+ mode: 'node',
+ modeParams: Canvas,
+ animation: false // 关闭动画
+});
+
+cs.renderSync();
+
+// 导出图片
+const buffer = cs.getImageBuffer();
+fs.writeFileSync(`./chart.png`, buffer);
+```
+## Results show
+
+
+
+Demo: https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
+## Related Documents
+
+Demo：https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Node server-side rendering tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/32- How to configure the points in a line chart to be sparser in vchart.md b/docs/assets/faq/en/32- How to configure the points in a line chart to be sparser in vchart.md
new file mode 100644
index 000000000..5c455fc9b
--- /dev/null
+++ b/docs/assets/faq/en/32- How to configure the points in a line chart to be sparser in vchart.md
@@ -0,0 +1,64 @@
+---
+title: 42. How to configure vchart line chart to make the points sparse in the case of big data?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# **Title**
+
+How to configure vchart line chart to make the points sparse in the case of big data?
+# **Description**
+
+I am using vchart to create a line chart, but there are a lot of data, which causes the points on the line chart to be very dense. I want to know if there is a way to make the points sparse through sampling or other methods?
+
+
+# **Solution**
+
+## **Solution 1**
+
+Sampling can achieve this function. You can use the sampling and samplingFactor configurations to achieve this. Through the sampling configuration, you can use different sampling algorithms to sample points. The supported sampling types are:
+* `'lttb'`: Use the Largest-Triangle-Three-Bucket algorithm, which can maximize the trend, shape, and extreme values of the sampled line after sampling.
+* `'min'`: Take the minimum value of the filtered point.
+* `'max'`: Take the maximum value of the filtered point.
+* `'sum'`: Take the sum of the filtered point.
+* `'average'`: Take the average value of the filtered point.
+Through samplingFactor, you can configure the sampling intensity, which is within the range of [0,1]. The smaller the samplingFactor, the greater the sampling intensity.
+Reference: [https://visactor.io/vchart/option/lineChart#sampling](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FlineChart%23sampling)
+## **Solution 2**
+
+You can only hide the points by setting markOverlap: true.
+Reference: [https://visactor.io/vchart/option/lineChart#markOverlap](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FlineChart%23markOverlap)
+# **Code Example**
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: new Array(10000).fill(0).map((_, i) => ({ time: i, value: Math.random() * 10000 }))
+ },
+ sampling: 'lttb',
+ samplingFactor: 0.6,
+ point: {
+ style: {
+ stroke: false
+ }
+ },
+ xField: 'time',
+ yField: 'value'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# **Result**
+
+After running the code, the data points are sampled to be more sparse.
+
+
+Online demo: [https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-4px87p?file=%2Fsrc%2Findex.ts%3A18%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fline-chart-single-selected-forked-4px87p%3Ffile%3D%252Fsrc%252Findex.ts%253A18%252C2)
+# **Related Documents**
+
+* VChart line segment sampling configuration: [https://visactor.io/vchart/option/lineChart#sampling](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FlineChart%23sampling)
+* VChart point anti-overlap configuration: [https://visactor.io/vchart/option/lineChart#markOverlap](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FlineChart%23markOverlap)
+* VChart github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/34- How to left-align bar chart labels and keep the style consistent.md b/docs/assets/faq/en/34- How to left-align bar chart labels and keep the style consistent.md
new file mode 100644
index 000000000..749222b46
--- /dev/null
+++ b/docs/assets/faq/en/34- How to left-align bar chart labels and keep the style consistent.md
@@ -0,0 +1,141 @@
+---
+title: How to align bar chart labels to the left and keep their styles consistent?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## How to align bar chart labels to the left and keep their styles consistent?
+
+### Problem Description
+
+As shown in the figure, can the labels in the bar chart be aligned to the left? Why are the styles of the labels not exactly the same?
+
+
+### Solution
+
+* The position of the label can be configured through `label.position`. By default, the label of the bar chart is outside the graph, so it is not left-aligned. By setting `label.position` to `inside-left`, the left-alignment effect can be achieved.
+* When the label position of the bar chart is `inside-left`, **smart inversion** will be enabled, which may cause style inconsistencies. You can turn off smart inversion manually.
+
+
+### Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ name: 'Apple',
+ value: 214480
+ },
+ {
+ name: 'Google',
+ value: 155506
+ },
+ {
+ name: 'Amazon',
+ value: 100764
+ },
+ {
+ name: 'Microsoft',
+ value: 92715
+ },
+ {
+ name: 'Coca-Cola',
+ value: 66341
+ },
+ {
+ name: 'Samsung',
+ value: 59890
+ },
+ {
+ name: 'Toyota',
+ value: 53404
+ },
+ {
+ name: 'Mercedes-Benz',
+ value: 48601
+ },
+ {
+ name: 'Facebook',
+ value: 45168
+ },
+ {
+ name: "McDonald's",
+ value: 43417
+ },
+ {
+ name: 'Intel',
+ value: 43293
+ },
+ {
+ name: 'IBM',
+ value: 42972
+ },
+ {
+ name: 'BMW',
+ value: 41006
+ },
+ {
+ name: 'Disney',
+ value: 39874
+ },
+ {
+ name: 'Cisco',
+ value: 34575
+ },
+ {
+ name: 'GE',
+ value: 32757
+ },
+ {
+ name: 'Nike',
+ value: 30120
+ },
+ {
+ name: 'Louis Vuitton',
+ value: 28152
+ },
+ {
+ name: 'Oracle',
+ value: 26133
+ },
+ {
+ name: 'Honda',
+ value: 23682
+ }
+ ]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'value',
+ yField: 'name',
+ axes: [
+ {
+ orient: 'bottom',
+ visible: false
+ }
+ ],
+ label: {
+ visible: true,
+ position: 'inside-left',
+ smartInvert: false,
+ }
+};
+```
+### Result Display
+
+
+
+### Related Documentation
+
+Smart Invert Configuration: https://visactor.com/vchart/option/barChart#label.smartInvert
+Label Configuration: https://visactor.com/vchart/option/barChart#label.position
+github: https://github.com/VisActor/VChart
+
+
+
+
+
+
+
diff --git a/docs/assets/faq/en/35- How to disable chart interaction.md b/docs/assets/faq/en/35- How to disable chart interaction.md
new file mode 100644
index 000000000..a64660ea9
--- /dev/null
+++ b/docs/assets/faq/en/35- How to disable chart interaction.md
@@ -0,0 +1,53 @@
+---
+title: 23. How to disable chart interaction
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## **Title**
+
+How to disable chart interaction
+## **Description**
+
+How can I disable the interaction events of the chart and just use it as an image when using the chart?
+
+
+## **Solution**
+
+In VChart, you can directly pass in `disableTriggerEvent: true` to disable interaction.
+## **Code Example**
+
+```
+const spec = {*
+* type: 'bar',*
+* data: [*
+* {*
+* id: 'barData',*
+* values: [*
+* { month: 'Monday', sales: 22 },*
+* { month: 'Tuesday', sales: 13 },*
+* { month: 'Wednesday', sales: 25 },*
+* { month: 'Thursday', sales: 29 },*
+* { month: 'Friday', sales: 38 }*
+* ]*
+* }*
+* ],*
+* xField: 'month',*
+* yField: 'sales'*
+*};*
+
+*const vchart = new VChart(spec, { dom: CONTAINER_ID, disableTriggerEvent: true });*
+*vchart.renderSync();*
+
+*// Just for the convenience of console debugging, DO NOT COPY!*
+*window['vchart'] = vchart;
+```
+## **Result**
+
+
+
+Demo: [https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-psxswy?file=%2Fsrc%2Findex.js%3A20%2C46](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fvchart-disabletriggerevent-psxswy%3Ffile%3D%252Fsrc%252Findex.js%253A20%252C46)
+## **Related Documents**
+
+Demo：[https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-psxswy?file=%2Fsrc%2Findex.js%3A20%2C46](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fvchart-disabletriggerevent-psxswy%3Ffile%3D%252Fsrc%252Findex.js%253A20%252C46)
+Tutorial：
+* Initialize VChart: [https://visactor.io/vchart/api/API/vchart](https%3A%2F%2Fvisactor.io%2Fvchart%2Fapi%2FAPI%2Fvchart)
+Github: [https://github.com/VisActor/VChart/](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart%2F)
\ No newline at end of file
diff --git a/docs/assets/faq/en/41- Does the line chart support setting background colors based on Y-axis segments.md b/docs/assets/faq/en/41- Does the line chart support setting background colors based on Y-axis segments.md
new file mode 100644
index 000000000..1b789ba1a
--- /dev/null
+++ b/docs/assets/faq/en/41- Does the line chart support setting background colors based on Y-axis segments.md
@@ -0,0 +1,183 @@
+---
+title: Can a line chart set different background colors for each section along the y-axis?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+Can a line chart set different background colors for each section along the y-axis?
+## Problem Description
+
+In the following line chart, is it possible to set background colors for each section along the y-axis?
+
+
+## Solution
+
+There are two ways you can achieve this background color request.
+* Solution 1: You can set the grid fill color by configuring `axes.grid.alternateColor`:
+```
+axes: [
+ {
+ orient: 'left',
+ grid: {
+ alternateColor: [
+ 'rgba(0, 255, 0, 0.3)',
+ 'rgba(255, 0, 0, 0.2)',
+ 'rgba(0, 0, 255, 0.2)'
+ ]
+ }
+ }
+ ]
+```
+* Solution 2: VChart supports a variety of annotation components, among which `markArea` can be used to configure annotation blocks. Therefore, we can configure the background color blocks in the following way
+```
+markArea: [
+ {
+ y: 0,
+ y1: 5,
+ area: {
+ style: {
+ fill: 'red',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 5,
+ y1: 10,
+ area: {
+ style: {
+ fill: 'yellow',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 10,
+ y1: 15,
+ area: {
+ style: {
+ fill: 'pink',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 15,
+ y1: 20,
+ area: {
+ style: {
+ fill: 'green',
+ fillOpacity: 0.2
+ }
+ }
+ },
+ ]
+```
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ xField: 'time',
+ yField: 'value',
+ markArea: [
+ {
+ y: 0,
+ y1: 5,
+ area: {
+ style: {
+ fill: 'red',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 5,
+ y1: 10,
+ area: {
+ style: {
+ fill: 'yellow',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 10,
+ y1: 15,
+ area: {
+ style: {
+ fill: 'pink',
+ fillOpacity: 0.2
+ }
+ }
+ },
+
+ {
+ y: 15,
+ y1: 20,
+ area: {
+ style: {
+ fill: 'green',
+ fillOpacity: 0.2
+ }
+ }
+ },
+ ]
+};
+```
+## Results Show
+
+
+
+
+
+## Related Documents
+
+* [github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+* [Marker Data Labeling Tutorial](https%3A%2F%2Fvisactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2Fmarker)
+* [MarkArea Configuration Document](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FlineChart%23markArea)
\ No newline at end of file
diff --git a/docs/assets/faq/en/43- Does the thumbnail axis handle shape support SVG.md b/docs/assets/faq/en/43- Does the thumbnail axis handle shape support SVG.md
new file mode 100644
index 000000000..ffce229ff
--- /dev/null
+++ b/docs/assets/faq/en/43- Does the thumbnail axis handle shape support SVG.md
@@ -0,0 +1,238 @@
+---
+title: 20. Does the primitive shape support SVG?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Does the graphic shape in the chart support custom SVG?
+## Description
+
+How to customize the start and end icons in datazoom? Tried the configurable items in dataZoom.startHandler.style symbolType and didn't find what I needed
+
+
+## Solution
+
+Configure symbolType in the primitive style. The shape type of symbol supports passing in built-in types, and can also be set to a custom path string and svg image. The same configuration can be done for any symbol type primitive in VChart.
+
+
+## Code Example
+
+```
+const spec = {
+ color: [
+ '#3855df',
+ '#ffc52b',
+ '#5ecf78',
+ '#fb7a00',
+ '#0acffd',
+ '#217dfd',
+ '#98dd61',
+ '#3150e0',
+ '#714efd',
+ '#0bcfff',
+ '#3d0dde',
+ '#ffc527',
+ '#f5c13f',
+ '#fb7a08',
+ '#95d8fd'
+ ],
+ type: 'rangeColumn',
+ direction: 'horizontal',
+ yField: 'type',
+ minField: 'start_time',
+ maxField: 'end_time',
+ seriesField: 'color',
+ dataZoom: [
+ {
+ orient: 'bottom',
+ height: 20,
+ start: 0.1,
+ endValue: 1681956000,
+ filterMode: 'axis',
+ brushSelect: false,
+ startText: {
+ formatMethod: text => Math.floor(text)
+ },
+ endText: {
+ formatMethod: text => Math.floor(text)
+ },
+ startHandler: {
+ style: {
+ dy: -12,
+ dx: -8,
+ symbolType: ''
+ }
+ }
+ }
+ ],
+ axes: [
+ { orient: 'left', type: 'band', bandPadding: 0.5, visible: false },
+ {
+ type: 'time',
+ orient: 'bottom',
+ layers: [
+ {
+ tickStep: 28800,
+ timeFormat: '%Y%m%d %H:%M'
+ }
+ ]
+ }
+ ],
+ title: {
+ textStyle: {
+ character: [
+ {
+ text: 'Time-Consuming Distribution',
+ fontWeight: 400,
+ fill: '#222'
+ },
+ {
+ text: 'Show the SQL distribution of TOP 100',
+ fontWeight: 200,
+ fontSize: 10,
+ fill: '#555'
+ }
+ ]
+ }
+ },
+ tooltip: {
+ visible: true,
+ dimension: {
+ visible: false
+ },
+ mark: {
+ title: {
+ key: 'Query ID',
+ value: datum => 'Query ID: ' + datum['id']
+ },
+ content: [
+ {
+ key: 'Time Consuming',
+ value: datum => datum['useTime']
+ },
+ {
+ key: 'start time',
+ value: datum => datum['start_time']
+ },
+ {
+ key: 'end time',
+ value: datum => datum['end_time']
+ }
+ ]
+ }
+ },
+ data: [
+ {
+ id: 'data0',
+ values: [
+ {
+ start_time: 1681926000,
+ end_time: 1681927200,
+ type: 'TOP 1',
+ color: 'A',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681926000,
+ end_time: 1681959600,
+ type: 'TOP 2',
+ color: 'B',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681925400,
+ end_time: 1681974000,
+ type: 'TOP 3',
+ color: 'C',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681924800,
+ end_time: 1681933200,
+ type: 'TOP 4',
+ color: 'D',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681959600,
+ end_time: 1681963200,
+ type: 'TOP 5',
+ color: 'E',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681970400,
+ end_time: 1681971000,
+ type: 'TOP 5',
+ color: 'F',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681992000,
+ end_time: 1681992600,
+ type: 'TOP 5',
+ color: 'G',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681956000,
+ end_time: 1681963200,
+ type: 'TOP 6',
+ color: 'H',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681990200,
+ end_time: 1681993800,
+ type: 'TOP 7',
+ color: 'I',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681948800,
+ end_time: 1681959600,
+ type: 'TOP 8',
+ color: 'J',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ },
+ {
+ start_time: 1681945200,
+ end_time: 1681956000,
+ type: 'TOP 9',
+ color: 'K',
+ id: 'a90292870-9282',
+ useTime: '100ms'
+ }
+ ].reverse()
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID, animation: false });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/svg-symbol-8k9tdz?file=%2Fsrc%2Findex.ts%3A208%2C29
+
+
+## Related Documentation
+
+DataZoom Demo: https://visactor.bytedance.net/vchart/demo/data-zoom/state-with-data
+Related Api：https://visactor.io/vchart/option/lineChart#dataZoom.startHandler.style.symbolType
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/46- How to display all words in a word cloud on a small canvas.md b/docs/assets/faq/en/46- How to display all words in a word cloud on a small canvas.md
new file mode 100644
index 000000000..f59e3bf40
--- /dev/null
+++ b/docs/assets/faq/en/46- How to display all words in a word cloud on a small canvas.md
@@ -0,0 +1,253 @@
+---
+title: 70. How to display all words in a small canvas using vchart word cloud?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Title
+
+How to display all words in a small canvas using vchart word cloud?
+# Description
+
+When the number of words in vchart word cloud is large and the canvas size is not large enough, only a part of the words can be displayed. How can we display all the words?
+
+
+
+
+# Solution
+
+The word cloud has a configuration `fontSizeRange` that controls the size range of words. The default value is `[20, 40]`. If you want the text to automatically adapt to the canvas size and fill the entire canvas, you can set it to `auto`.
+Reference: [VisActor](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FwordCloudChart%23fontWeightRange)
+# Code Example
+
+```
+const spec = {
+ width: 300,
+ height: 300,
+ type: 'wordCloud',
+ nameField: 'name',
+ valueField: 'value',
+ maskShape: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/shape_motuo_mini.png',
+ fontSizeRange: 'auto',
+ data: [
+ {
+ name: 'source',
+ values: [
+ {
+ name: '螺蛳粉',
+ value: 957
+ },
+ {
+ name: '钵钵鸡',
+ value: 942
+ },
+ {
+ name: '板栗',
+ value: 842
+ },
+ {
+ name: '胡辣汤',
+ value: 828
+ },
+ {
+ name: '关东煮',
+ value: 665
+ },
+ {
+ name: '羊肉汤',
+ value: 627
+ },
+ {
+ name: '热干面',
+ value: 574
+ },
+ {
+ name: '肠粉',
+ value: 564
+ },
+ {
+ name: '北京烤鸭',
+ value: 554
+ },
+ {
+ name: '龟苓膏',
+ value: 540
+ },
+ {
+ name: '米粉',
+ value: 513
+ },
+ {
+ name: '灌肠',
+ value: 499
+ },
+ {
+ name: '藕粉',
+ value: 499
+ },
+ {
+ name: '烤冷面',
+ value: 495
+ },
+ {
+ name: '炸酱面',
+ value: 487
+ },
+ {
+ name: '臭豆腐',
+ value: 484
+ },
+ {
+ name: '沙县小吃',
+ value: 482
+ },
+ {
+ name: '重庆小面',
+ value: 482
+ },
+ {
+ name: '冒菜',
+ value: 479
+ },
+ {
+ name: '醪糟',
+ value: 462
+ },
+ {
+ name: '肉夹馍',
+ value: 456
+ },
+ {
+ name: '酸辣粉',
+ value: 456
+ },
+ {
+ name: '驴打滚',
+ value: 456
+ },
+ {
+ name: '煎饼果子',
+ value: 443
+ },
+ {
+ name: '驴肉火烧',
+ value: 443
+ },
+ {
+ name: '小笼包',
+ value: 426
+ },
+ {
+ name: '烧麦',
+ value: 425
+ },
+ {
+ name: '卤煮',
+ value: 422
+ },
+ {
+ name: '油条',
+ value: 414
+ },
+ {
+ name: '桂林米粉',
+ value: 414
+ },
+ {
+ name: '兰州拉面',
+ value: 409
+ },
+ {
+ name: '双皮奶',
+ value: 408
+ },
+ {
+ name: '锅盔',
+ value: 403
+ },
+ {
+ name: '羊肉泡馍',
+ value: 403
+ },
+ {
+ name: '凉皮',
+ value: 402
+ },
+ {
+ name: '糍粑',
+ value: 397
+ },
+ {
+ name: '豆皮',
+ value: 388
+ },
+ {
+ name: '粘豆包',
+ value: 388
+ },
+ {
+ name: '过桥米线',
+ value: 385
+ },
+ {
+ name: '叉烧',
+ value: 375
+ },
+ {
+ name: '豆腐脑',
+ value: 374
+ },
+ {
+ name: '豆汁',
+ value: 363
+ },
+ {
+ name: '麻花',
+ value: 363
+ },
+ {
+ name: '春卷',
+ value: 354
+ },
+ {
+ name: '锅贴',
+ value: 349
+ },
+ {
+ name: '韭菜盒子',
+ value: 349
+ },
+ {
+ name: '面筋',
+ value: 346
+ },
+ {
+ name: '南瓜饼',
+ value: 343
+ },
+ {
+ name: '炒肝',
+ value: 341
+ },
+ {
+ name: '文昌鸡',
+ value: 338
+ }
+ ]
+ }
+ ]
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+After running the code, all the text is displayed (of course, the text has become smaller).
+
+
+Online demo: [https://codesandbox.io/p/sandbox/wordcloud-fontsizerange-x4cflw?file=%2Fsrc%2Findex.ts%3A12%2C3-12%2C16](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fwordcloud-fontsizerange-x4cflw%3Ffile%3D%252Fsrc%252Findex.ts%253A12%252C3-12%252C16)
+# Related Documents
+
+* VChart word cloud `fontSizeRange` configuration: [VisActor](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FwordCloudChart%23fontWeightRange)
+* VChart github: [GitHub - VisActor/VChart: VChart, more than just a cross-platform charting library, but also an expressive data storyteller.](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/47- How to configure tooltip and legend shapes as rounded rectangles.md b/docs/assets/faq/en/47- How to configure tooltip and legend shapes as rounded rectangles.md
new file mode 100644
index 000000000..2f7644436
--- /dev/null
+++ b/docs/assets/faq/en/47- How to configure tooltip and legend shapes as rounded rectangles.md
@@ -0,0 +1,118 @@
+---
+title: 103. How to configure tooltip and legend shape as rectangles with rounded corners
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure Legend Shape as a rectangle with rounded corners?
+
+
+## Description
+
+As shown below:
+
+
+## Solution
+
+Support configuration as'rectRound 'type
+
+
+1. Tooltip: `shapeType:"rectRound"`
+```
+tooltip: {
+ mark: {
+ content: [
+ {
+ shapeType: 'rectRound',
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+```
+1. Legend:
+```
+legends: {
+ visible: true,
+ orient: 'right',
+
+ item: {
+ width: '15%',
+ shape: {
+ style: {
+ symbolType: 'rectRound'
+ }
+ }
+ }
+ },
+```
+## Code Example
+
+```
+
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'pie',
+ values: [
+ { value: 10, category: 'One' },
+ { value: 9, category: 'Two' },
+ { value: 6, category: 'Three' },
+ { value: 5, category: 'Four' },
+ { value: 4, category: 'Five' },
+ { value: 3, category: 'Six' },
+ { value: 1, category: 'Seven' }
+]
+ }
+ ],
+ categoryField: 'category',
+ valueField: 'value',
+ legends: {
+ visible: true,
+ orient: 'right',
+
+ item: {
+ width: '15%',
+ shape: {
+ style: {
+ symbolType: 'rectRound'
+ }
+ }
+ }
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ shapeType: 'rectRound',
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Result
+
+
+
+## Related Documents
+
+
+
+* Tutorials: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend , https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip
+* API：https://visactor.bytedance.net/vchart/option/barChart#tooltip.dimension.content，https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style.symbolType
+* Github：https://github.com/VisActor/VChart/
+
diff --git a/docs/assets/faq/en/49- How to configure the hierarchy in a combination chart.md b/docs/assets/faq/en/49- How to configure the hierarchy in a combination chart.md
new file mode 100644
index 000000000..6ddf616a6
--- /dev/null
+++ b/docs/assets/faq/en/49- How to configure the hierarchy in a combination chart.md
@@ -0,0 +1,257 @@
+---
+title: 43. How to configure the common chart zIndex?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure the combination chart hierarchy?
+
+
+# Description
+
+
+How to configure the combination chart hierarchy? When combining line and area series, the point primitive of line is obscured by the area primitive
+
+
+## Solution
+
+For the cascading style of series in the combination diagram, it can be controlled by the declaration order of series. For example, if the line series needs to be above the area series, then the area series needs to be declared first, and then the line series needs to be declared.
+
+
+
+
+
+
+## Code Example
+
+```
+ const data = [
+ { date: "2023-12-01", value: "1776", series: "demand" },
+ { date: "2023-12-01", value: 1546, series: "left" },
+ { date: "2023-12-01", value: "3322", series: "total" },
+ { date: "2023-12-02", value: "3555", series: "demand" },
+ { date: "2023-12-02", value: 43638, series: "left" },
+ { date: "2023-12-02", value: "47193", series: "total" },
+ { date: "2023-12-03", value: "52840", series: "demand" },
+ { date: "2023-12-03", value: 6864, series: "left" },
+ { date: "2023-12-03", value: "59704", series: "total" },
+ { date: "2023-12-04", value: "48566", series: "demand" },
+ { date: "2023-12-04", value: 41413, series: "left" },
+ { date: "2023-12-04", value: "89979", series: "total" },
+ { date: "2023-12-05", value: "17711", series: "demand" },
+ { date: "2023-12-05", value: 26783, series: "left" },
+ { date: "2023-12-05", value: "44494", series: "total" },
+ { date: "2023-12-06", value: "4295", series: "demand" },
+ { date: "2023-12-06", value: 363, series: "left" },
+ { date: "2023-12-06", value: "4658", series: "total" },
+ { date: "2023-12-07", value: "16", series: "demand" },
+ { date: "2023-12-07", value: 8757, series: "left" },
+ { date: "2023-12-07", value: "8773", series: "total" },
+ { date: "2023-12-08", value: "29228", series: "demand" },
+ { date: "2023-12-08", value: 29999, series: "left" },
+ { date: "2023-12-08", value: "59227", series: "total" },
+ { date: "2023-12-09", value: "29092", series: "demand" },
+ { date: "2023-12-09", value: 15516, series: "left" },
+ { date: "2023-12-09", value: "44608", series: "total" },
+ { date: "2023-12-010", value: "4098", series: "demand" },
+ { date: "2023-12-010", value: 4946, series: "left" },
+ { date: "2023-12-010", value: "9044", series: "total" },
+ { date: "2023-12-011", value: "11611", series: "demand" },
+ { date: "2023-12-011", value: 64795, series: "left" },
+ { date: "2023-12-011", value: "76406", series: "total" },
+ { date: "2023-12-012", value: "72517", series: "demand" },
+ { date: "2023-12-012", value: 11808, series: "left" },
+ { date: "2023-12-012", value: "84325", series: "total" },
+ { date: "2023-12-013", value: "15421", series: "demand" },
+ { date: "2023-12-013", value: 16839, series: "left" },
+ { date: "2023-12-013", value: "32260", series: "total" },
+ { date: "2023-12-014", value: "5185", series: "demand" },
+ { date: "2023-12-014", value: 18225, series: "left" },
+ { date: "2023-12-014", value: "23410", series: "total" },
+ { date: "2023-12-015", value: "9034", series: "demand" },
+ { date: "2023-12-015", value: 35726, series: "left" },
+ { date: "2023-12-015", value: "44760", series: "total" },
+ { date: "2023-12-016", value: "20138", series: "demand" },
+ { date: "2023-12-016", value: 42747, series: "left" },
+ { date: "2023-12-016", value: "62885", series: "total" },
+ { date: "2023-12-017", value: "1649", series: "demand" },
+ { date: "2023-12-017", value: 6281, series: "left" },
+ { date: "2023-12-017", value: "7930", series: "total" },
+ { date: "2023-12-018", value: "3687", series: "demand" },
+ { date: "2023-12-018", value: 5087, series: "left" },
+ { date: "2023-12-018", value: "8774", series: "total" },
+ { date: "2023-12-019", value: "49861", series: "demand" },
+ { date: "2023-12-019", value: 14074, series: "left" },
+ { date: "2023-12-019", value: "63935", series: "total" },
+ { date: "2023-12-020", value: "4386", series: "demand" },
+ { date: "2023-12-020", value: 33871, series: "left" },
+ { date: "2023-12-020", value: "38257", series: "total" },
+ { date: "2023-12-021", value: "5066", series: "demand" },
+ { date: "2023-12-021", value: 34438, series: "left" },
+ { date: "2023-12-021", value: "39504", series: "total" },
+ { date: "2023-12-022", value: "3070", series: "demand" },
+ { date: "2023-12-022", value: 47549, series: "left" },
+ { date: "2023-12-022", value: "50619", series: "total" },
+ { date: "2023-12-023", value: "7493", series: "demand" },
+ { date: "2023-12-023", value: 83660, series: "left" },
+ { date: "2023-12-023", value: "91153", series: "total" },
+ { date: "2023-12-024", value: "40735", series: "demand" },
+ { date: "2023-12-024", value: 8841, series: "left" },
+ { date: "2023-12-024", value: "49576", series: "total" },
+ { date: "2023-12-025", value: "15730", series: "demand" },
+ { date: "2023-12-025", value: 8965, series: "left" },
+ { date: "2023-12-025", value: "24695", series: "total" },
+ { date: "2023-12-026", value: "64354", series: "demand" },
+ { date: "2023-12-026", value: 31912, series: "left" },
+ { date: "2023-12-026", value: "96266", series: "total" },
+ { date: "2023-12-027", value: "15469", series: "demand" },
+ { date: "2023-12-027", value: 28519, series: "left" },
+ { date: "2023-12-027", value: "43988", series: "total" },
+ { date: "2023-12-028", value: "249", series: "demand" },
+ { date: "2023-12-028", value: 7200, series: "left" },
+ { date: "2023-12-028", value: "7449", series: "total" },
+ { date: "2023-12-029", value: "9296", series: "demand" },
+ { date: "2023-12-029", value: 26689, series: "left" },
+ { date: "2023-12-029", value: "35985", series: "total" },
+ { date: "2023-12-030", value: "4776", series: "demand" },
+ { date: "2023-12-030", value: 368, series: "left" },
+ { date: "2023-12-030", value: "5144", series: "total" },
+ { date: "2023-12-031", value: "50932", series: "demand" },
+ { date: "2023-12-031", value: 2237, series: "left" },
+ { date: "2023-12-031", value: "53169", series: "total" },
+ { date: "2023-12-032", value: "12191", series: "demand" },
+ { date: "2023-12-032", value: 45954, series: "left" },
+ { date: "2023-12-032", value: "58145", series: "total" },
+ { date: "2023-12-033", value: "1615", series: "demand" },
+ { date: "2023-12-033", value: 57757, series: "left" },
+ { date: "2023-12-033", value: "59372", series: "total" },
+ { date: "2023-12-034", value: "16892", series: "demand" },
+ { date: "2023-12-034", value: 23399, series: "left" },
+ { date: "2023-12-034", value: "40291", series: "total" },
+ { date: "2023-12-035", value: "12452", series: "demand" },
+ { date: "2023-12-035", value: 2427, series: "left" },
+ { date: "2023-12-035", value: "14879", series: "total" },
+ { date: "2023-12-036", value: "86059", series: "demand" },
+ { date: "2023-12-036", value: 8673, series: "left" },
+ { date: "2023-12-036", value: "94732", series: "total" },
+ { date: "2023-12-037", value: "1355", series: "demand" },
+ { date: "2023-12-037", value: 23182, series: "left" },
+ { date: "2023-12-037", value: "24537", series: "total" },
+ { date: "2023-12-038", value: "6865", series: "demand" },
+ { date: "2023-12-038", value: 26607, series: "left" },
+ { date: "2023-12-038", value: "33472", series: "total" },
+ { date: "2023-12-039", value: "63665", series: "demand" },
+ { date: "2023-12-039", value: 11211, series: "left" },
+ { date: "2023-12-039", value: "74876", series: "total" },
+ { date: "2023-12-040", value: "14291", series: "demand" },
+ { date: "2023-12-040", value: 62592, series: "left" },
+ { date: "2023-12-040", value: "76883", series: "total" },
+ { date: "2023-12-041", value: "13291", series: "demand" },
+ { date: "2023-12-041", value: 27065, series: "left" },
+ { date: "2023-12-041", value: "40356", series: "total" },
+ { date: "2023-12-042", value: "33858", series: "demand" },
+ { date: "2023-12-042", value: 11867, series: "left" },
+ { date: "2023-12-042", value: "45725", series: "total" },
+ ];
+
+ const spec = {
+ type: "common",
+ seriesField: "color",
+ data: [
+ { id: "id0", values: data.filter((o) => o.series !== "total") },
+ { id: "id1", values: data.filter((o) => o.series === "total") },
+ ],
+ series: [
+ {
+ type: "area",
+ id: "bar",
+ dataIndex: 0,
+ label: { visible: true },
+ dataIndex: 0,
+ xField: "date",
+ yField: "value",
+ seriesField: "series",
+ area: { zIndex: -1 },
+ line: {
+ style: {
+ lineDash: [2, 2],
+ lineWidth: (data) => (data.series === "left" ? 0 : 1),
+ },
+ },
+
+ dataZoom: { zIndex: 500 },
+ point: {
+ style: { size: 0 },
+ state: {
+ dimension_hover: {
+ size: (data) => (data.series === "left" ? 0 : 8),
+ },
+ },
+ },
+ label: { visible: false },
+ area: {
+ style: {
+ fillOpacity: (data) => (data.series === "left" ? 0.7 : 0.3),
+ textureColor: "#fff",
+ fill: (data) => (data.series === "left" ? "#bcc0cd" : "#1AC6FF"),
+ textureSize: 4,
+ texture: (data) => {
+ if (data.series === "left") {
+ return "bias-rl";
+ }
+ return null;
+ },
+ },
+ },
+ },
+ {
+ type: "line",
+ id: "line",
+ dataIndex: 1,
+ label: { visible: true },
+ seriesField: "series",
+ xField: "date",
+ yField: "value",
+ stack: false,
+ label: { visible: false },
+ dataZoom: { zIndex: 1000 },
+ line: {
+ style: {
+ lineDash: [2, 2],
+ lineWidth: 1,
+ },
+ },
+ point: {
+ style: { size: 0 },
+ state: {
+ dimension_hover: { size: 8 },
+ },
+ },
+ },
+ ],
+ axes: [
+ { orient: "left", visible: false },
+ { orient: "right", visible: false },
+ { orient: "bottom", label: { visible: true }, type: "band" },
+ ],
+ legends: { visible: true, orient: "bottom" },
+ };
+const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync();
+window['vchart'] = vchart;
+
+```
+## Results
+
+Online demo：hhttps://codesandbox.io/p/sandbox/zindex-4dtk4g?file=%2Fsrc%2Findex.ts%3A4%2C1-217%2C5
+
+
+
+
+## Related Documentation
+
+Common Chart Demo：https://www.visactor.io/vchart/demo/combination/single-region
+Common Chart Tutorial：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/5- How to position the chart on the far left of the canvas.md b/docs/assets/faq/en/5- How to position the chart on the far left of the canvas.md
new file mode 100644
index 000000000..b8258b09b
--- /dev/null
+++ b/docs/assets/faq/en/5- How to position the chart on the far left of the canvas.md
@@ -0,0 +1,114 @@
+---
+title: How to position the chart at the far left of the canvas?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question Title
+
+How to position the chart at the far left of the canvas in the vchart chart library?
+
+
+# Question Description
+
+I am using the vchart chart library for visualization operations, and I hope that the chart can be located at the far left of the canvas. However, I had a problem when trying to adjust the configuration. I don't know how to set it.
+```
+{
+type: 'line',
+data: {
+values: [
+{
+time: '2:00',
+value: 8
+},
+{
+time: '4:00',
+value: 9
+},
+{
+time: '6:00',
+value: 11
+},
+{
+time: '8:00',
+value: 14
+},
+{
+time: '10:00',
+value: 16
+},
+{
+time: '12:00',
+value: 17
+},
+{
+time: '14:00',
+value: 17
+},
+{
+time: '16:00',
+value: 16
+},
+{
+time: '18:00',
+value: 15
+}
+]
+},
+xField: 'time',
+yField: 'value',
+axes:[
+{
+type:'band',
+orient:'bottom',
+visible:false,
+},
+{
+orient:'left',
+visible:false,
+}
+]
+};
+```
+
+
+
+
+
+
+
+
+# Solution
+
+In the configuration items of vchart, there is a `trimPadding` attribute. This attribute is used to configure whether to remove the margins at both ends of the band axis. If it is `true`, there will be no margins at both ends, and the settings of `bandPadding`, `paddingInner` and `paddingOuter` will be ignored.
+
+
+And here, what we need is to place the chart on the far left of the canvas, that is, without the left margin, so we need to add the `trimPadding` configuration on the `'bottom'` axis.
+
+
+Below is an example of the configuration:
+```
+{
+//...other spec configurations omitted
+axes:[
+{
+type:'band',
+orient:'bottom',
+visible:false,
+trimPadding:true,
+},
+{
+orient:'left',
+visible:false,
+}
+]
+};
+```
+# Result Display
+
+After adding the `trimPadding` configuration, the chart can now be properly displayed at the far left of the canvas.
+Online effect reference: https://codesandbox.io/p/sandbox/common-chart-interactive-forked-cn95kp
+
+
+# Related Documents
+
+Related API: https://visactor.bytedance.net/vchart/option/barChart-axes-band#trimPadding
+github: https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/50- How to adjust the layer order of lines in a line chart.md b/docs/assets/faq/en/50- How to adjust the layer order of lines in a line chart.md
new file mode 100644
index 000000000..181a018dc
--- /dev/null
+++ b/docs/assets/faq/en/50- How to adjust the layer order of lines in a line chart.md
@@ -0,0 +1,108 @@
+---
+title: How to adjust the layer order of the lines in a line chart in VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to adjust the layer order of the lines in a line chart in VChart?
+## Problem Description
+
+In the line chart as shown below, how can I make the blue line on the top layer?
+
+
+## Solution
+
+When displaying the line chart, it is grouped according to the grouping fields in the data, and the last grouping with values in the grouping fields will have a higher level than the first grouping; the performance is that in the above figure, the last item in the legend item corresponds to the line with the highest level; so, to adjust the level of the line, there are two solutions:
+* Sort the data according to the grouping fields
+* Adjust the `zIndex` visual channel mapping of the line
+```
+line: {
+ style: {
+ lineWidth: 2,
+ zIndex: (datum) => {
+ switch(datum.type) {
+ case 'Product A':
+ return 3;
+ case 'Product B':
+ return 2;
+ case 'Produce C':
+ return 1;
+ }
+ }
+ }
+ },
+```
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { date: '2023-01-01', type: 'Product A', value: 99.9 },
+ { date: '2023-01-01', type: 'Product B', value: 96.6 },
+ { date: '2023-01-01', type: 'Product C', value: 96.2 },
+ { date: '2023-01-02', type: 'Product A', value: 96.7 },
+ { date: '2023-01-02', type: 'Product B', value: 91.1 },
+ { date: '2023-01-02', type: 'Product C', value: 93.4 },
+ { date: '2023-01-03', type: 'Product A', value: 100.2 },
+ { date: '2023-01-03', type: 'Product B', value: 99.4 },
+ { date: '2023-01-03', type: 'Product C', value: 91.7 },
+ { date: '2023-01-04', type: 'Product A', value: 104.7 },
+ { date: '2023-01-04', type: 'Product B', value: 108.1 },
+ { date: '2023-01-04', type: 'Product C', value: 93.1 },
+ { date: '2023-01-05', type: 'Product A', value: 95.6 },
+ { date: '2023-01-05', type: 'Product B', value: 96 },
+ { date: '2023-01-05', type: 'Product C', value: 92.3 },
+ { date: '2023-01-06', type: 'Product A', value: 95.6 },
+ { date: '2023-01-06', type: 'Product B', value: 89.1 },
+ { date: '2023-01-06', type: 'Product C', value: 92.5 },
+ { date: '2023-01-07', type: 'Product A', value: 95.3 },
+ { date: '2023-01-07', type: 'Product B', value: 89.2 },
+ { date: '2023-01-07', type: 'Product C', value: 95.7 },
+ { date: '2023-01-08', type: 'Product A', value: 96.1 },
+ { date: '2023-01-08', type: 'Product B', value: 97.6 },
+ { date: '2023-01-08', type: 'Product C', value: 99.9 },
+ { date: '2023-01-09', type: 'Product A', value: 96.1 },
+ { date: '2023-01-09', type: 'Product B', value: 100.6 },
+ { date: '2023-01-09', type: 'Product C', value: 103.8 },
+ { date: '2023-01-10', type: 'Product A', value: 101.6 },
+ { date: '2023-01-10', type: 'Product B', value: 108.3 },
+ { date: '2023-01-10', type: 'Product C', value: 108.9 }
+ ]
+ },
+ xField: 'date',
+ yField: 'value',
+ seriesField: 'type',
+ point: {
+ visible: false
+ },
+ line: {
+ style: {
+ lineWidth: 2,
+ zIndex: (datum) => {
+ switch(datum.type) {
+ case 'Product A':
+ return 3;
+ case 'Product B':
+ return 2;
+ case 'Produce C':
+ return 1;
+ }
+ }
+ }
+ },
+ legends: { visible: true }
+};
+```
+## Results display
+
+
+
+## Related documents
+
+* [github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+* [style.zIndex configuration document](https%3A%2F%2Fvisactor.com%2Fvchart%2Foption%2FlineChart%23line.style.zIndex)
+
diff --git a/docs/assets/faq/en/52- Can the legend shape be set to a rectangle.md b/docs/assets/faq/en/52- Can the legend shape be set to a rectangle.md
new file mode 100644
index 000000000..fd037e292
--- /dev/null
+++ b/docs/assets/faq/en/52- Can the legend shape be set to a rectangle.md
@@ -0,0 +1,119 @@
+---
+title: 68. Can the legend shape be set to a rectangle?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Can the legend shape be set to a rectangle?
+## Description
+
+The default shape of the legend is a circle. I want to change it to a rectangle. How should I configure it?
+
+
+
+
+## Solution
+
+Configure symbolType: 'rect' and size: [width: height] in the item.shape.style of the legend.
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: '100% stacked line chart of cosmetic products sales'
+ },
+ percent: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ legends: [
+ {
+ visible: true,
+ position: 'middle',
+ orient: 'bottom',
+ item: {
+ shape: {
+ style: {
+ symbolType: 'rect',
+ size: [20, 10]
+ }
+ }
+ }
+ }],
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ formatMethod(val) {
+ return `${(val * 100).toFixed(2)}%`;
+ }
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/legend-symbol-type-mwsr2d?file=%2Fsrc%2Findex.ts%3A6%2C12
+
+
+
+
+## Related Documentation
+
+Legend Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend
+Related Api：https://www.visactor.io/vchart/option/barChart-legends-discrete#item.shape.style.symbolType
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/53- How to configure axis unit display on the axes of a line chart.md b/docs/assets/faq/en/53- How to configure axis unit display on the axes of a line chart.md
new file mode 100644
index 000000000..28060f2f9
--- /dev/null
+++ b/docs/assets/faq/en/53- How to configure axis unit display on the axes of a line chart.md
@@ -0,0 +1,110 @@
+---
+title: How to configure the display of axis units on the axes of a line chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure the display of axis units on the axes of a line chart?
+
+
+## Problem Description
+
+I want to configure the unit display on the Y-axis. Which parameters need to be configured?
+
+
+
+
+## Solution
+
+You can set the unit configuration in the axis configuration item to enable the display of axis units. The text content displayed in the axis unit and the axis unit style can be adjusted through the unit configuration item.
+```
+ {
+ orient: 'left',
+ unit: {
+ visible: true,
+ text: 'Unit: GB',
+ style: { fontSize: 16, fontWeight: 'bold', fill: '#000' }
+ }
+ }
+```
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: 16
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ xField: 'time',
+ yField: 'value',
+ axes: [
+ { orient: 'bottom' },
+ {
+ orient: 'left',
+ unit: {
+ visible: true,
+ text: 'Unit: GB',
+ style: { fontSize: 16, fontWeight: 'bold', fill: '#000' }
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* Axes unit：https://visactor.io/vchart/option/barChart-axes-linear#unit
+* github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/54- How to configure the outer border of graphical elements when hovering on a bar chart.md b/docs/assets/faq/en/54- How to configure the outer border of graphical elements when hovering on a bar chart.md
new file mode 100644
index 000000000..3cb01e941
--- /dev/null
+++ b/docs/assets/faq/en/54- How to configure the outer border of graphical elements when hovering on a bar chart.md
@@ -0,0 +1,73 @@
+---
+title: 44. How to configure the outer border of the primitive when hovering in a bar chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure the outer border of the primitive when hovering in a bar chart?
+# Description
+
+How to configure the outer border effect displayed when hovering on a bar chart? I hope that when hovering, there will be an outer border with a certain gap from the primitive.
+
+
+## Solution
+
+You can configure the `lineWidth` of border thickness, `stroke` of border color, and `distance` of gap between the border in `bar.state.hover.outerBorder`.
+
+
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ xField: 'month',
+ yField: 'sales',
+ bar:{
+ state:{
+ hover:{
+ zIndex:400,
+ outerBorder:{
+ lineWidth:1, // borderSize
+ stroke:'#4e83fd', // borderColor
+ distance: 3 // borderSpacing
+ }
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/hover-border-wq6lsr?file=%2Fsrc%2Findex.ts%3A23%2C23
+
+
+## Related Documentation
+
+Bar Chart Demo：https://www.visactor.io/vchart/demo/bar-chart/basic-column
+Bar Chart Toturial：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Bar
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/55- How to modify the marker graphic of tooltip content items.md b/docs/assets/faq/en/55- How to modify the marker graphic of tooltip content items.md
new file mode 100644
index 000000000..bb2338a44
--- /dev/null
+++ b/docs/assets/faq/en/55- How to modify the marker graphic of tooltip content items.md
@@ -0,0 +1,62 @@
+---
+title: 100. How to modify the tag graphic of the tooltip content item
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to modify the tag graphic of the tooltip content item?
+
+
+## Description
+
+I want to change the shape in the tooltip to linear for line charts. Is there a good implementation?
+
+
+## Solution
+
+Modify `shapeType `to `'rect ' `.
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ tooltip: {
+ mark: {
+ content:
+ [{ key: datum => datum['month'], value: datum => datum['sales'], shapeType: 'rect' }]
+ }
+ },
+ xField: 'month',
+ yField: 'sales'
+ };
+ const vchart = new VChart(spec, { dom: CONTAINER_ID });
+ vchart.renderSync();
+```
+
+
+## Results show
+
+
+
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip
+* API：https://visactor.io/vchart/option/barChart#tooltip.dimension.content(Object%7CObject%5B%5D).shapeType
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/56- How to set the bar width in a bar chart in VChart.md b/docs/assets/faq/en/56- How to set the bar width in a bar chart in VChart.md
new file mode 100644
index 000000000..b606caa3a
--- /dev/null
+++ b/docs/assets/faq/en/56- How to set the bar width in a bar chart in VChart.md
@@ -0,0 +1,68 @@
+---
+title: How to set the bar width of a bar chart in VChart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set the bar width of a bar chart, expecting the bar width to remain unchanged when the chart container becomes larger
+## Problem description
+
+May I ask how to set the bar width of a bar chart so that when the chart container becomes larger, the bar width remains the same, always 16px?
+
+
+## Solution
+
+VChart's bar chart supports a set of bar width configuration options.
+* barWidth: width
+* barMinWidth: Minimum width
+* barMaxWidth: maximum width
+
+
+The default bar width of VChart is related to the width of the chart container. This logic ensures that when the chart container is small, the bars will not overlap.
+In actual use, if there is a need for a fixed width of the column, you can use `barWidth `. If you just don't expect the column to be too wide and unsightly, you can use `barMaxWidth `to limit its maximum width, so that the container is relatively small and can be displayed correctly.
+
+
+## Code example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { month: 'Monday', sales: 22 },
+ { month: 'Tuesday', sales: 13 },
+ { month: 'Wednesday', sales: 25 },
+ { month: 'Thursday', sales: 29 },
+ { month: 'Friday', sales: 38 }
+ ]
+ }
+ ],
+ barWidth: 16,
+ // barMaxWidth: 16,
+ xField: 'month',
+ yField: 'sales'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results show
+
+
+
+Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5z7cl?file=%2Fsrc%2Findex.js%3A30%2C1
+## Related Documents
+
+Demo：https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5z7cl?file=%2Fsrc%2Findex.js%3A30%2C1
+Tutorial:
+* Initialize VChart: https://visactor.io/vchart/api/API/vchart
+* Column width: https://www.visactor.io/vchart/option/barChart#barWidth
+Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/58- How to clear the selection in the onbrushEnd event when using vchart.md b/docs/assets/faq/en/58- How to clear the selection in the onbrushEnd event when using vchart.md
new file mode 100644
index 000000000..f1273ca58
--- /dev/null
+++ b/docs/assets/faq/en/58- How to clear the selection in the onbrushEnd event when using vchart.md
@@ -0,0 +1,41 @@
+---
+title: 55. How to clear the box at the end of the onbrushEnd event when using vchart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to clear the box selection at the end of the onbrushEnd event when using vchart?
+
+
+# Problem description
+
+I am using the @visactor/vchart chart library for chart development and encountered a problem. I need to clear the brush box at the end of the onbrushEnd event, but currently I have not found a suitable API to implement this requirement.
+
+
+# Solution
+
+Currently, there is no API that directly corresponds to this requirement, but there is a relatively special implementation method that can solve this problem. The specific code is as follows:
+
+
+```
+cs.on('brushEnd', (params) => {
+cs.getChart()?.getAllComponents().forEach(c => {
+if(c.name === 'brush') {
+c?._brushComponents?.forEach(c => c._container.incrementalClearChild())
+}
+})
+})
+```
+The above solution is to retrieve all components and traverse them after triggering the'brushEnd 'event. If a component is named'brush', it will be cleared.
+
+
+# Results show
+
+After the code runs, you can clear the box selection after the onbrushEnd event ends.
+Online demo: https://codesandbox.io/p/sandbox/grouped-bar-chart-shows-all-the-group-labels-forked-2t4jf7
+
+
+# Related Documents
+
+* VisActor official website: https://www.visactor.io/
+* VChart Events: https://www.visactor.io/vchart/api/API/event
\ No newline at end of file
diff --git a/docs/assets/faq/en/59- What are the methods for formatting chart labels in VChart.md b/docs/assets/faq/en/59- What are the methods for formatting chart labels in VChart.md
new file mode 100644
index 000000000..960740675
--- /dev/null
+++ b/docs/assets/faq/en/59- What are the methods for formatting chart labels in VChart.md
@@ -0,0 +1,53 @@
+---
+title: 19. What are the methods for formatting VChart chart labels?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+What are the methods for formatting VChart chart labels?
+
+
+## Description
+
+In the VChart bar chart, the default display is the label of the corresponding value of the bar. I want to display something like `'x-axis name: y value' `. What are the ways to customize the label display?
+
+
+## Solution
+
+There are two recommended configuration methods:
+1. Configure the formatting function through `label.formatMethod`.
+1. The function parameter is `(text: string | string [], data?: any) `, `text`is the default displayed text, and `data`is the related data.
+1. The return value of the function can be a string or a string array. Among them, the string array will be displayed as a newline by default.
+1. If you want to configure it as rich text, the return value is the rich text configuration object.
+```
+label: {
+ formatMethod:(value, data) => `${data.name}: ${value}`
+}
+```
+
+
+
+
+1. Configure the template string through `label.formatter`.
+```
+label: {
+ formatter: `{name} : {value}`
+}
+```
+
+
+
+
+
+
+
+
+## Related Documents
+
+formatMethod demo: [https://visactor.io/vchart/demo/label/richtext-label](https%3A%2F%2Fvisactor.io%2Fvchart%2Fdemo%2Flabel%2Frichtext-label)
+Formatter demo：[https://visactor.io/vchart/demo/label/label-formatter](https%3A%2F%2Fvisactor.io%2Fvchart%2Fdemo%2Flabel%2Flabel-formatter)
+Related configuration items: https://visactor.io/vchart/option/barChart#label.formatMethod
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/6- How to export charts as images.md b/docs/assets/faq/en/6- How to export charts as images.md
new file mode 100644
index 000000000..c50f9ae0b
--- /dev/null
+++ b/docs/assets/faq/en/6- How to export charts as images.md
@@ -0,0 +1,149 @@
+---
+title: 19. How to export images from charts?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Is there an api for exporting pictures from charts?
+## Description
+
+Can charts be directly converted into high definition images and saved? Is there a relevant API?
+
+
+## Solution
+
+You have two ways to save a chart as an image:
+Right-click directly on the chart to save or copy
+
+
+2. If you need to get pictures in a software project, we have different interfaces for different code environments
+### **getDataURL**
+
+
+
+**asynchronous method**Returns a data URI that contains the image display.
+
+
+```
+getDataURL: () => Promise
+
+
+
+## Related Documentation
+
+Related api：https://www.visactor.io/vchart/api/API/vchart
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/60- How to configure the size of a pie chart in VChart.md b/docs/assets/faq/en/60- How to configure the size of a pie chart in VChart.md
new file mode 100644
index 000000000..db877f3b0
--- /dev/null
+++ b/docs/assets/faq/en/60- How to configure the size of a pie chart in VChart.md
@@ -0,0 +1,73 @@
+---
+title: 39. How to configure pie chart size in VChart？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure pie chart size in VChart?
+
+
+## Problem Description
+
+The page is narrow, how to adjust the configuration of VChart to make the pie chart occupy as much screen space as possible
+
+
+## Solution
+
+1. Cancel the default chart padding.
+VChart sets a certain margin for all charts by default. You can configure `padding: 0` to cancel the default margin.
+1. Adjust the outerRadius the pie chart.
+By default, the pie chart does not fill the entire canvas, you can configure `outerRadius: 1` to set the outer radius ratio to the highest.
+
+
+## Code Example
+
+```
+const data = [
+ { value: 10, category: 'One' },
+ { value: 9, category: 'Two' },
+ { value: 6, category: 'Three' },
+ { value: 5, category: 'Four' },
+ { value: 4, category: 'Five' },
+ { value: 3, category: 'Six' },
+ { value: 1, category: 'Seven' }
+];
+
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'pie',
+ values: data
+ }
+ ],
+ outerRadius:1,
+ padding:0,
+ background:'#eeeeee',
+ categoryField: 'category',
+ valueField: 'value',
+
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+
+
+## Quote
+
+* [Pie chart configuration item](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23outerRadius)
+* github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/65- How to prevent displaying abbreviated tooltips when custom tooltips are already set.md b/docs/assets/faq/en/65- How to prevent displaying abbreviated tooltips when custom tooltips are already set.md
new file mode 100644
index 000000000..a01b7a0a6
--- /dev/null
+++ b/docs/assets/faq/en/65- How to prevent displaying abbreviated tooltips when custom tooltips are already set.md
@@ -0,0 +1,148 @@
+---
+title: 37. How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again?
+
+
+## Description
+
+How to disable the display of abbreviated tooltips? Customized tooltips do not need to be displayed repeatedly, as shown below:
+
+
+
+
+## Solution
+
+VChart will automatically omit long text and provide an interactive floating display poptip to display the complete text by default. If you want to turn it off, you can set poptip: false in the parameter of the constructor function when initializing the chart, as follows:
+```
+const vchart = new VChart(spec, {
+ // ...
+ poptip: false, // Close poptip for omitted text
+});
+```
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ width: 300,
+ height: 250,
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ name: 'AppleAppleAppleApple',
+ value: 214480
+ },
+ {
+ name: 'Google',
+ value: 155506
+ },
+ {
+ name: 'Amazon',
+ value: 100764
+ },
+ {
+ name: 'Microsoft',
+ value: 92715
+ },
+ {
+ name: 'Coca-Cola',
+ value: 66341
+ },
+ {
+ name: 'Samsung',
+ value: 59890
+ },
+ {
+ name: 'Toyota',
+ value: 53404
+ },
+ {
+ name: 'Mercedes-Benz',
+ value: 48601
+ },
+ {
+ name: 'Facebook',
+ value: 45168
+ },
+ {
+ name: "McDonald's",
+ value: 43417
+ },
+ {
+ name: 'Intel',
+ value: 43293
+ },
+ {
+ name: 'IBM',
+ value: 42972
+ },
+ {
+ name: 'BMW',
+ value: 41006
+ },
+ {
+ name: 'Disney',
+ value: 39874
+ },
+ {
+ name: 'Cisco',
+ value: 34575
+ },
+ {
+ name: 'GE',
+ value: 32757
+ },
+ {
+ name: 'Nike',
+ value: 30120
+ },
+ {
+ name: 'Louis Vuitton',
+ value: 28152
+ },
+ {
+ name: 'Oracle',
+ value: 26133
+ },
+ {
+ name: 'Honda',
+ value: 23682
+ }
+ ]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'value',
+ yField: 'name',
+ axes: [
+ {
+ orient: 'bottom',
+ visible: false
+ }
+ ],
+ label: {
+ visible: true
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID, poptip: false });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Related Documents
+
+* API：https://visactor.io/vchart/api/API/vchart#options
+* Github：https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/67- How to set the axis width in VChart.md b/docs/assets/faq/en/67- How to set the axis width in VChart.md
new file mode 100644
index 000000000..f1b179484
--- /dev/null
+++ b/docs/assets/faq/en/67- How to set the axis width in VChart.md
@@ -0,0 +1,120 @@
+---
+title: How to configure a bar chart to display more of the axis labels when the labels are too long?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to configure a bar chart to display more of the axis labels when the labels are too long?
+
+
+## Problem description
+
+The axis text labels in the chart are relatively long. I hope to increase the axis width to display more text. How should I configure it?
+
+
+## Solution
+
+You can configure axes.width to set the width of the axis component.
+1. `Width: '50%' `: Configure the percentage string, which represents that the component width accounts for half of the chart during layout
+```
+ axes: [
+ {
+ orient: 'left',
+ width: `50%`
+ }
+ ],
+```
+1. `Width: 100 `: Configure a fixed value, representing the pixel width of the component width during layout
+## Code example
+
+```
+const spec = {
+ type: 'bar',
+ width:450,
+ height: 250,
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ "name": "Product-Name-:Apple",
+ "value": 214480
+ },
+ {
+ "name": "Product-Name-:Google",
+ "value": 155506
+ },
+ {
+ "name": "Product-Name-:Amazon",
+ "value": 100764
+ },
+ {
+ "name": "Product-Name-:Microsoft",
+ "value": 92715
+ },
+ {
+ "name": "Product-Name-:Coca-Cola",
+ "value": 66341
+ },
+ {
+ "name": "Product-Name-:Samsung",
+ "value": 59890
+ },
+ {
+ "name": "Product-Name-:Toyota",
+ "value": 53404
+ },
+ {
+ "name": "Product-Name-:Mercedes-Benz",
+ "value": 48601
+ },
+ {
+ "name": "Product-Name-:Facebook",
+ "value": 45168
+ },
+ {
+ "name": "Product-Name-:McDonald's",
+ "value": 43417
+ },
+ {
+ "name": "Product-Name-:Intel",
+ "value": 43293
+ },
+
+]
+ }
+ ],
+ direction: 'horizontal',
+ xField: 'value',
+ yField: 'name',
+ axes: [
+ {
+ orient: 'bottom',
+ visible: false
+ },
+ {
+ orient: 'left',
+ width: `50%`
+ }
+ ],
+ label: {
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* github：https://github.com/VisActor/VChart
+* https://visactor.io/vchart/option/barChart-axes-linear#width
+
diff --git a/docs/assets/faq/en/68- Is there a way to deselect all line chart contents currently set to display by default (e.g., a button to hide all).md b/docs/assets/faq/en/68- Is there a way to deselect all line chart contents currently set to display by default (e.g., a button to hide all).md
new file mode 100644
index 000000000..be2cc6cef
--- /dev/null
+++ b/docs/assets/faq/en/68- Is there a way to deselect all line chart contents currently set to display by default (e.g., a button to hide all).md
@@ -0,0 +1,118 @@
+---
+title: 101. The content displayed in the line chart is currently all selected by default. Is it possible to have a channel inversion (for example, there is a button that is not displayed with one click)?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+The content displayed in the line chart is currently all selected and displayed by default. Is it possible to have a channel inversion (for example, there is a button that is not displayed with one click)?
+
+
+## Description
+
+Chart legend can be selected all or not all.
+
+
+## Solution
+
+You can configure the `legends.defaultSelected `parameter to an empty array: `[] `, restore to all selected words, delete this parameter or copy the full amount of legend items.
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'area',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: '100% stacked area chart of cosmetic products sales'
+ },
+ percent: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ legends: [
+ {
+ visible: true,
+ position: 'middle',
+ orient: 'bottom',
+ defaultSelected: []
+ }
+ ],
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ formatMethod(val) {
+ return `${(val * 100).toFixed(2)}%`;
+ }
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Result
+
+
+
+
+
+## Related Documents
+
+
+
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend
+* API：https://visactor.io/vchart/option/barChart#legends
+* Github：https://github.com/VisActor/VChart/
+
+
+
+
+
diff --git a/docs/assets/faq/en/69- How to select only the current item when clicking a legend.md b/docs/assets/faq/en/69- How to select only the current item when clicking a legend.md
new file mode 100644
index 000000000..05c585164
--- /dev/null
+++ b/docs/assets/faq/en/69- How to select only the current item when clicking a legend.md
@@ -0,0 +1,296 @@
+---
+title: 86. How to achieve only selecting the current item when clicking on the legend?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to implement VChart to only select the current item when clicking on a legend?
+
+
+## Problem description
+
+When clicking on the legend, can you change to select the current item and not select other items?
+## Solution
+
+VChart supports configuring legend selection mode, including single selection mode
+```
+legends: {
+ orient: 'right',
+ selectMode: 'single', // Configure legend selection mode
+ defaultSelected: ['Type D'],
+ title: {
+ visible: true,
+ text: 'Single Select'
+ }
+ }
+```
+## Code example
+
+```
+const data = [
+ {
+ name: 'Type A',
+ value: 33934,
+ year: 2010
+ },
+ {
+ name: 'Type A',
+ value: 52503,
+ year: 2011
+ },
+ {
+ name: 'Type A',
+ value: 57177,
+ year: 2012
+ },
+ {
+ name: 'Type A',
+ value: 69658,
+ year: 2013
+ },
+ {
+ name: 'Type A',
+ value: 97031,
+ year: 2014
+ },
+ {
+ name: 'Type A',
+ value: 119931,
+ year: 2015
+ },
+ {
+ name: 'Type A',
+ value: 137133,
+ year: 2016
+ },
+ {
+ name: 'Type A',
+ value: 154175,
+ year: 2017
+ },
+ {
+ name: 'Type B',
+ value: 24916,
+ year: 2010
+ },
+ {
+ name: 'Type B',
+ value: 24064,
+ year: 2011
+ },
+ {
+ name: 'Type B',
+ value: 29742,
+ year: 2012
+ },
+ {
+ name: 'Type B',
+ value: 29851,
+ year: 2013
+ },
+ {
+ name: 'Type B',
+ value: 32490,
+ year: 2014
+ },
+ {
+ name: 'Type B',
+ value: 30282,
+ year: 2015
+ },
+ {
+ name: 'Type B',
+ value: 38121,
+ year: 2016
+ },
+ {
+ name: 'Type B',
+ value: 40434,
+ year: 2017
+ },
+ {
+ name: 'Type C',
+ value: 11744,
+ year: 2010
+ },
+ {
+ name: 'Type C',
+ value: 17722,
+ year: 2011
+ },
+ {
+ name: 'Type C',
+ value: 16005,
+ year: 2012
+ },
+ {
+ name: 'Type C',
+ value: 19771,
+ year: 2013
+ },
+ {
+ name: 'Type C',
+ value: 20185,
+ year: 2014
+ },
+ {
+ name: 'Type C',
+ value: 24377,
+ year: 2015
+ },
+ {
+ name: 'Type C',
+ value: 32147,
+ year: 2016
+ },
+ {
+ name: 'Type C',
+ value: 39389,
+ year: 2017
+ },
+ {
+ name: 'Type D',
+ value: null,
+ year: 2010
+ },
+ {
+ name: 'Type D',
+ value: null,
+ year: 2011
+ },
+ {
+ name: 'Type D',
+ value: 7988,
+ year: 2012
+ },
+ {
+ name: 'Type D',
+ value: 12169,
+ year: 2013
+ },
+ {
+ name: 'Type D',
+ value: 15112,
+ year: 2014
+ },
+ {
+ name: 'Type D',
+ value: 22452,
+ year: 2015
+ },
+ {
+ name: 'Type D',
+ value: 34400,
+ year: 2016
+ },
+ {
+ name: 'Type D',
+ value: 34227,
+ year: 2017
+ },
+ {
+ name: 'Other',
+ value: 12908,
+ year: 2010
+ },
+ {
+ name: 'Other',
+ value: 5948,
+ year: 2011
+ },
+ {
+ name: 'Other',
+ value: 8105,
+ year: 2012
+ },
+ {
+ name: 'Other',
+ value: 11248,
+ year: 2013
+ },
+ {
+ name: 'Other',
+ value: 8989,
+ year: 2014
+ },
+ {
+ name: 'Other',
+ value: 11816,
+ year: 2015
+ },
+ {
+ name: 'Other',
+ value: 18274,
+ year: 2016
+ },
+ {
+ name: 'Other',
+ value: 18111,
+ year: 2017
+ }
+];
+const spec = {
+ type: 'line',
+ data: [
+ {
+ id: 'line',
+ values: data
+ }
+ ],
+ xField: 'year',
+ yField: 'value',
+ seriesField: 'name',
+ legends: {
+ orient: 'right',
+ selectMode: 'single', // Configure legend selection mode
+ defaultSelected: ['Type D'],
+ title: {
+ visible: true,
+ text: 'Single Select'
+ }
+ },
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ inside: true,
+ space: 2,
+ style: {
+ textBaseline: 'bottom',
+ textAlign: 'start',
+ fontWeight: 'bold'
+ }
+ },
+ tick: {
+ visible: false
+ },
+ domainLine: {
+ visible: false
+ },
+ title: {
+ visible: true,
+ text: 'Axis Title'
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results show
+
+
+
+## Related Documents
+
+* Legend Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend
+* Related demo: https://www.visactor.io/vchart/demo/legend/single-select
+
+
+
diff --git a/docs/assets/faq/en/7- How to draw combination charts in React.md b/docs/assets/faq/en/7- How to draw combination charts in React.md
new file mode 100644
index 000000000..87bce6540
--- /dev/null
+++ b/docs/assets/faq/en/7- How to draw combination charts in React.md
@@ -0,0 +1,30 @@
+---
+title: 108. How to draw a combination diagram with React
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to draw combo diagrams in React
+
+
+## Description
+
+May I ask how to render the composite image?
+
+
+## Solution
+
+Take a look at this online codesandbox example~ https://codesandbox.io/p/sandbox/visactor-vchart-react-demo-forked-h4dyjl?file=%2Fsrc%2FCommonChart.tsx%3A43%2C29
+
+
+
+
+## Related Documents
+
+
+
+* Demo：https://codesandbox.io/p/sandbox/visactor-vchart-react-demo-forked-h4dyjl?file=%2Fsrc%2FCommonChart.tsx%3A43%2C29
+* Tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Combination
+* API：https://visactor.io/vchart/option/commonChart
+* Github：https://github.com/VisActor/VChart/
+
diff --git a/docs/assets/faq/en/71- Does the tree map support configuring the style when hovering.md b/docs/assets/faq/en/71- Does the tree map support configuring the style when hovering.md
new file mode 100644
index 000000000..16121171e
--- /dev/null
+++ b/docs/assets/faq/en/71- Does the tree map support configuring the style when hovering.md
@@ -0,0 +1,455 @@
+---
+title: 70. Does the tree chart support the style when configuring hover?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Does the tree diagram support the style when configuring hover?
+## Description
+
+Can the tree diagram update the style of the selected state (enlarge, add borders)?
+
+
+
+
+## Solution
+
+In vchart, the state of selection or mouse hover can be configured by the primitive state. For your needs, you can configure different styles on state.selected on the leaf primitive. For example, if you need to modify the color, you can configure fill or fillOpacity; if you need to configure the border, you can configure stroke or lineWidth; if you need to configure the magnification effect, you can configure scaleX, scaleY, and scaleCenter.
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'treemap',
+ data: [
+ {
+ id: 'data',
+ values: [
+ {
+ name: 'query',
+ children: [
+ {
+ name: 'methods',
+ children: [
+ { name: 'add', value: 593 },
+ { name: 'and', value: 330 },
+ { name: 'average', value: 287 },
+ { name: 'count', value: 277 },
+ { name: 'distinct', value: 292 },
+ { name: 'div', value: 595 },
+ { name: 'eq', value: 594 },
+ { name: 'fn', value: 460 },
+ { name: 'gt', value: 603 },
+ { name: 'gte', value: 625 },
+ { name: 'iff', value: 748 },
+ { name: 'isa', value: 461 },
+ { name: 'lt', value: 597 },
+ { name: 'lte', value: 619 },
+ { name: 'max', value: 283 },
+ { name: 'min', value: 283 },
+ { name: 'mod', value: 591 },
+ { name: 'mul', value: 603 },
+ { name: 'neq', value: 599 },
+ { name: 'not', value: 386 },
+ { name: 'or', value: 323 },
+ { name: 'orderby', value: 307 },
+ { name: 'range', value: 772 },
+ { name: 'select', value: 296 },
+ { name: 'stddev', value: 363 },
+ { name: 'sub', value: 600 },
+ { name: 'sum', value: 280 },
+ { name: 'update', value: 307 },
+ { name: 'variance', value: 335 },
+ { name: 'where', value: 299 },
+ { name: 'xor', value: 354 },
+ { name: '_', value: 264 }
+ ]
+ },
+ { name: 'AggregateExpression', value: 1616 },
+ { name: 'And', value: 1027 },
+ { name: 'Arithmetic', value: 3891 },
+ { name: 'Average', value: 891 },
+ { name: 'BinaryExpression', value: 2893 },
+ { name: 'Comparison', value: 5103 },
+ { name: 'CompositeExpression', value: 3677 },
+ { name: 'Count', value: 781 },
+ { name: 'DateUtil', value: 4141 },
+ { name: 'Distinct', value: 933 },
+ { name: 'Expression', value: 5130 },
+ { name: 'ExpressionIterator', value: 3617 },
+ { name: 'Fn', value: 3240 },
+ { name: 'If', value: 2732 },
+ { name: 'IsA', value: 2039 },
+ { name: 'Literal', value: 1214 },
+ { name: 'Match', value: 3748 },
+ { name: 'Maximum', value: 843 },
+ { name: 'Minimum', value: 843 },
+ { name: 'Not', value: 1554 },
+ { name: 'Or', value: 970 },
+ { name: 'Query', value: 13896 },
+ { name: 'Range', value: 1594 },
+ { name: 'StringUtil', value: 4130 },
+ { name: 'Sum', value: 791 },
+ { name: 'Variable', value: 1124 },
+ { name: 'Variance', value: 1876 },
+ { name: 'Xor', value: 1101 }
+ ]
+ },
+ {
+ name: 'util',
+ children: [
+ {
+ name: 'palette',
+ children: [
+ { name: 'ColorPalette', value: 6367 },
+ { name: 'Palette', value: 1229 },
+ { name: 'ShapePalette', value: 2059 },
+ { name: 'valuePalette', value: 2291 }
+ ]
+ },
+ {
+ name: 'math',
+ children: [
+ { name: 'DenseMatrix', value: 3165 },
+ { name: 'IMatrix', value: 2815 },
+ { name: 'SparseMatrix', value: 3366 }
+ ]
+ },
+ {
+ name: 'heap',
+ children: [
+ { name: 'FibonacciHeap', value: 9354 },
+ { name: 'HeapNode', value: 1233 }
+ ]
+ },
+ { name: 'Arrays', value: 8258 },
+ { name: 'Colors', value: 10001 },
+ { name: 'Dates', value: 8217 },
+ { name: 'Displays', value: 12555 },
+ { name: 'Filter', value: 2324 },
+ { name: 'Geometry', value: 10993 },
+ { name: 'IEvaluable', value: 335 },
+ { name: 'IPredicate', value: 383 },
+ { name: 'IValueProxy', value: 874 },
+ { name: 'Maths', value: 17705 },
+ { name: 'Orientation', value: 1486 },
+ { name: 'Property', value: 5559 },
+ { name: 'Shapes', value: 19118 },
+ { name: 'Sort', value: 6887 },
+ { name: 'Stats', value: 6557 },
+ { name: 'Strings', value: 22026 }
+ ]
+ },
+ {
+ name: 'animate',
+ children: [
+ {
+ name: 'interpolate',
+ children: [
+ { name: 'ArrayInterpolator', value: 1983 },
+ { name: 'ColorInterpolator', value: 2047 },
+ { name: 'DateInterpolator', value: 1375 },
+ { name: 'Interpolator', value: 8746 },
+ { name: 'MatrixInterpolator', value: 2202 },
+ { name: 'NumberInterpolator', value: 1382 },
+ { name: 'ObjectInterpolator', value: 1629 },
+ { name: 'PointInterpolator', value: 1675 },
+ { name: 'RectangleInterpolator', value: 2042 }
+ ]
+ },
+ { name: 'Easing', value: 17010 },
+ { name: 'FunctionSequence', value: 5842 },
+ { name: 'ISchedulable', value: 1041 },
+ { name: 'Parallel', value: 5176 },
+ { name: 'Pause', value: 449 },
+ { name: 'Scheduler', value: 5593 },
+ { name: 'Sequence', value: 5534 },
+ { name: 'Transition', value: 9201 },
+ { name: 'Transitioner', value: 19975 },
+ { name: 'TransitionEvent', value: 1116 },
+ { name: 'Tween', value: 6006 }
+ ]
+ },
+ {
+ name: 'scale',
+ children: [
+ { name: 'IScaleMap', value: 2105 },
+ { name: 'LinearScale', value: 1316 },
+ { name: 'LogScale', value: 3151 },
+ { name: 'OrdinalScale', value: 3770 },
+ { name: 'QuantileScale', value: 2435 },
+ { name: 'QuantitativeScale', value: 4839 },
+ { name: 'RootScale', value: 1756 },
+ { name: 'Scale', value: 4268 },
+ { name: 'ScaleType', value: 1821 },
+ { name: 'TimeScale', value: 5833 }
+ ]
+ },
+ {
+ name: 'physics',
+ children: [
+ { name: 'DragForce', value: 1082 },
+ { name: 'GravityForce', value: 1336 },
+ { name: 'IForce', value: 319 },
+ { name: 'NBodyForce', value: 10498 },
+ { name: 'Particle', value: 2822 },
+ { name: 'Simulation', value: 9983 },
+ { name: 'Spring', value: 2213 },
+ { name: 'SpringForce', value: 1681 }
+ ]
+ },
+ {
+ name: 'data',
+ children: [
+ {
+ name: 'converters',
+ children: [
+ { name: 'Converters', value: 721 },
+ { name: 'DelimitedTextConverter', value: 4294 },
+ { name: 'GraphMLConverter', value: 9800 },
+ { name: 'IDataConverter', value: 1314 },
+ { name: 'JSONConverter', value: 2220 }
+ ]
+ },
+ { name: 'DataField', value: 1759 },
+ { name: 'DataSchema', value: 2165 },
+ { name: 'DataSet', value: 586 },
+ { name: 'DataSource', value: 3331 },
+ { name: 'DataTable', value: 772 },
+ { name: 'DataUtil', value: 3322 }
+ ]
+ },
+ {
+ name: 'vis',
+ children: [
+ {
+ name: 'controls',
+ children: [
+ { name: 'AnchorControl', value: 2138 },
+ { name: 'ClickControl', value: 3824 },
+ { name: 'Control', value: 1353 },
+ { name: 'ControlList', value: 4665 },
+ { name: 'DragControl', value: 2649 },
+ { name: 'ExpandControl', value: 2832 },
+ { name: 'HoverControl', value: 4896 },
+ { name: 'IControl', value: 763 },
+ { name: 'PanZoomControl', value: 5222 },
+ { name: 'SelectionControl', value: 7862 },
+ { name: 'TooltipControl', value: 8435 }
+ ]
+ },
+ {
+ name: 'operator',
+ children: [
+ {
+ name: 'layout',
+ children: [
+ { name: 'AxisLayout', value: 6725 },
+ { name: 'BundledEdgeRouter', value: 3727 },
+ { name: 'CircleLayout', value: 9317 },
+ { name: 'CirclePackingLayout', value: 12003 },
+ { name: 'DendrogramLayout', value: 4853 },
+ { name: 'ForceDirectedLayout', value: 8411 },
+ { name: 'IcicleTreeLayout', value: 4864 },
+ { name: 'IndentedTreeLayout', value: 3174 },
+ { name: 'Layout', value: 7881 },
+ { name: 'NodeLinkTreeLayout', value: 12870 },
+ { name: 'PieLayout', value: 2728 },
+ { name: 'RadialTreeLayout', value: 12348 },
+ { name: 'RandomLayout', value: 870 },
+ { name: 'StackedAreaLayout', value: 9121 },
+ { name: 'TreeMapLayout', value: 9191 }
+ ]
+ },
+ {
+ name: 'encoder',
+ children: [
+ { name: 'ColorEncoder', value: 3179 },
+ { name: 'Encoder', value: 4060 },
+ { name: 'PropertyEncoder', value: 4138 },
+ { name: 'ShapeEncoder', value: 1690 },
+ { name: 'valueEncoder', value: 1830 }
+ ]
+ },
+ {
+ name: 'distortion',
+ children: [
+ { name: 'BifocalDistortion', value: 4461 },
+ { name: 'Distortion', value: 6314 },
+ { name: 'FisheyeDistortion', value: 3444 }
+ ]
+ },
+ {
+ name: 'filter',
+ children: [
+ { name: 'FisheyeTreeFilter', value: 5219 },
+ { name: 'GraphDistanceFilter', value: 3165 },
+ { name: 'VisibilityFilter', value: 3509 }
+ ]
+ },
+ {
+ name: 'label',
+ children: [
+ { name: 'Labeler', value: 9956 },
+ { name: 'RadialLabeler', value: 3899 },
+ { name: 'StackedAreaLabeler', value: 3202 }
+ ]
+ },
+ { name: 'IOperator', value: 1286 },
+ { name: 'Operator', value: 2490 },
+ { name: 'OperatorList', value: 5248 },
+ { name: 'OperatorSequence', value: 4190 },
+ { name: 'OperatorSwitch', value: 2581 },
+ { name: 'SortOperator', value: 2023 }
+ ]
+ },
+ {
+ name: 'data',
+ children: [
+ {
+ name: 'render',
+ children: [
+ { name: 'ArrowType', value: 698 },
+ { name: 'EdgeRenderer', value: 5569 },
+ { name: 'IRenderer', value: 353 },
+ { name: 'ShapeRenderer', value: 2247 }
+ ]
+ },
+ { name: 'Data', value: 20544 },
+ { name: 'DataList', value: 19788 },
+ { name: 'DataSprite', value: 10349 },
+ { name: 'EdgeSprite', value: 3301 },
+ { name: 'NodeSprite', value: 19382 },
+ { name: 'ScaleBinding', value: 11275 },
+ { name: 'Tree', value: 7147 },
+ { name: 'TreeBuilder', value: 9930 }
+ ]
+ },
+ {
+ name: 'axis',
+ children: [
+ { name: 'Axes', value: 1302 },
+ { name: 'Axis', value: 24593 },
+ { name: 'AxisGridLine', value: 652 },
+ { name: 'AxisLabel', value: 636 },
+ { name: 'CartesianAxes', value: 6703 }
+ ]
+ },
+ {
+ name: 'events',
+ children: [
+ { name: 'DataEvent', value: 2313 },
+ { name: 'SelectionEvent', value: 1880 },
+ { name: 'TooltipEvent', value: 1701 },
+ { name: 'VisualizationEvent', value: 1117 }
+ ]
+ },
+ {
+ name: 'legend',
+ children: [
+ { name: 'Legend', value: 20859 },
+ { name: 'LegendItem', value: 4614 },
+ { name: 'LegendRange', value: 10530 }
+ ]
+ },
+ { name: 'Visualization', value: 16540 }
+ ]
+ },
+ {
+ name: 'display',
+ children: [
+ { name: 'DirtySprite', value: 8833 },
+ { name: 'LineSprite', value: 1732 },
+ { name: 'RectSprite', value: 3623 },
+ { name: 'TextSprite', value: 10066 }
+ ]
+ },
+ {
+ name: 'analytics',
+ children: [
+ {
+ name: 'graph',
+ children: [
+ { name: 'BetweennessCentrality', value: 3534 },
+ { name: 'LinkDistance', value: 5731 },
+ { name: 'MaxFlowMinCut', value: 7840 },
+ { name: 'ShortestPaths', value: 5914 },
+ { name: 'SpanningTree', value: 3416 }
+ ]
+ },
+ {
+ name: 'cluster',
+ children: [
+ { name: 'AgglomerativeCluster', value: 3938 },
+ { name: 'CommunityStructure', value: 3812 },
+ { name: 'HierarchicalCluster', value: 6714 },
+ { name: 'MergeEdge', value: 743 }
+ ]
+ },
+ {
+ name: 'optimization',
+ children: [{ name: 'AspectRatioBanker', value: 7074 }]
+ }
+ ]
+ },
+ { name: 'flex', children: [{ name: 'FlareVis', value: 4116 }] }
+ ]
+ }
+ ],
+ categoryField: 'name',
+ valueField: 'value',
+ label: {
+ visible: true,
+ style: {
+ fontSize: 12
+ }
+ },
+ title: {
+ visible: true,
+ text: 'The software class hierarchy of the Flare visualization toolkit'
+ },
+ leaf:{
+ state: {
+ selected:{
+ // set fill
+ fill:'red',
+ fillOpacity:0.8,
+
+ // set size
+ scaleX:1.1,
+ scaleY:1.1,
+ scaleCenter:['50%','50%'],
+
+ // set border
+ stroke:'blue',
+ lineWidth:2,
+
+ zIndex:1000,
+ }
+ }
+ },
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/treemap-state-26zg34?file=%2Fsrc%2Findex.ts%3A389%2C13
+
+
+
+
+## Related Documentation
+
+TreeMap Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Treemap
+Mark State Tutorial：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Mark
+Related Api：https://www.visactor.io/vchart/option/treemapChart#leaf.state
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/73- In the vchart library, why does the area chart's Y-axis display lower values higher.md b/docs/assets/faq/en/73- In the vchart library, why does the area chart's Y-axis display lower values higher.md
new file mode 100644
index 000000000..1f2569262
--- /dev/null
+++ b/docs/assets/faq/en/73- In the vchart library, why does the area chart's Y-axis display lower values higher.md
@@ -0,0 +1,99 @@
+---
+title: Abnormal Y-axis display in the area chart of vchart library, where lower values appear higher
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+
+
+Question Title
+Issues with Y-axis display in vchart's area chart
+
+
+Problem Description
+I encountered an issue with display of y-axis values when using the vchart library to draw an area chart. Specifically, the visually taller chart corresponds to a smaller value. For example, I have two data points, one at 2.8w and the other at 3w6. However, on the chart, 3w6 appears visually shorter than 2.8w which I find perplexing. I do not know how to address this issue, and it hinders user experience.
+At present, the code I used is shown below:
+
+
+```
+{
+type: 'area',
+data: {
+fields: {
+country: {
+domain: ['China', 'USA', 'EU', 'Africa'],
+sortIndex: 0
+}
+},
+values: [
+//...data values
+]
+},
+title: {
+visible: true,
+text: 'Stacked area chart of cosmetic products sales'
+},
+xField: 'type',
+yField: 'value',
+seriesField: 'country',
+legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+tooltip: {
+dimension: {
+updateContent: data => {
+let sum = 0;
+data.forEach(datum => {
+sum += +datum.value;
+});
+data.push({
+hasShape: 'false',
+key: 'Total',
+value: sum
+});
+return data;
+}
+}
+}
+};
+```
+Image References:
+
+
+Image 1
+
+
+Image 2
+
+
+Solution
+The key to solving this issue lies in the "stack" attribute in the area chart of the vchart library. After careful observation, I realized that the problem was due to the stacking feature of the area chart.
+
+
+Firstly, we need to understand the role of stacking in area charts. When stacking is enabled, values from different series will pile up. If you want to display difference or comparison between two series, you should disable stacking. However, if you want to show an overall trend that consists of two or more elements, stacking should be enabled. Therefore, whether to enable stacking or not should be based on your visualisation demands.
+
+
+By default, area charts enable stacking. If you think this may impact your chart interpretation, feel free to disable it.
+
+
+```
+{
+type: 'area',
+//...omit remaining specs
+title: {
+visible: true,
+text: 'Stacked area chart of cosmetic products sales'
+},
+stack: false,
+xField: 'type',
+yField: 'value',
+seriesField: 'country',
+legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
+};
+```
+
+
+Result Demonstration
+With stacking disabled, the Y-axis of the chart will reflect the actual data values, avoiding visually taller charts representing smaller values.
+Check out an online demo here: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-kgj8sj
+
+
+Relevant Documents
+Related API: https://visactor.bytedance.net/vchart/option/areaChart#stack
+GitHub: https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/74- How to adjust bar spacing in a bar chart.md b/docs/assets/faq/en/74- How to adjust bar spacing in a bar chart.md
new file mode 100644
index 000000000..1577cfb44
--- /dev/null
+++ b/docs/assets/faq/en/74- How to adjust bar spacing in a bar chart.md
@@ -0,0 +1,138 @@
+---
+title: 7. How to adjust the column spacing of a bar chart
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to adjust the column spacing of a bar chart?
+
+
+## Description
+
+How to adjust the column spacing of a bar chart?
+## Solution
+
+The following configuration is provided on VChart for adjusting column spacing:
+1. In terms of `axes` configuration, the [`paddingInner`](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FbarChart-axes-band%23paddingInner(number%257Cnumber%255B%255D)) and [`paddingOuter`](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FbarChart-axes-band%23paddingOuter(number%257Cnumber%255B%255D)) properties are provided for axes of type `type: 'band'`, which are used to configure the spacing within and outside the group
+1. For grouped bar charts, you can also use the [`barGapInGroup`](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FbarChart%23barGapInGroup) property to adjust the bar spacing within each group in the grouped bar chart. You can set absolute pixel values or use percentages (such as' 10% ').
+## Code Example
+
+### `barGapInGroup`
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { type: 'Autocracies', year: '1930', value: 129 },
+ { type: 'Autocracies', year: '1940', value: 133 },
+ { type: 'Autocracies', year: '1950', value: 130 },
+ { type: 'Autocracies', year: '1960', value: 126 },
+ { type: 'Autocracies', year: '1970', value: 117 },
+ { type: 'Autocracies', year: '1980', value: 114 },
+ { type: 'Autocracies', year: '1990', value: 111 },
+ { type: 'Autocracies', year: '2000', value: 89 },
+ { type: 'Autocracies', year: '2010', value: 80 },
+ { type: 'Autocracies', year: '2018', value: 80 },
+ { type: 'Democracies', year: '1930', value: 22 },
+ { type: 'Democracies', year: '1940', value: 13 },
+ { type: 'Democracies', year: '1950', value: 25 },
+ { type: 'Democracies', year: '1960', value: 29 },
+ { type: 'Democracies', year: '1970', value: 38 },
+ { type: 'Democracies', year: '1980', value: 41 },
+ { type: 'Democracies', year: '1990', value: 57 },
+ { type: 'Democracies', year: '2000', value: 87 },
+ { type: 'Democracies', year: '2010', value: 98 },
+ { type: 'Democracies', year: '2018', value: 99 }
+ ]
+ }
+ ],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ legends: {
+ visible: true,
+ orient: 'top',
+ position: 'start'
+ },
+ barWidth: 10,
+ barGapInGroup: 0
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+### `paddingInner`
+
+```
+const spec = {
+ type: 'bar',
+ color: ['#becef3', '#6a8edc', '#77caeb', '#52c93b', '#d3f5e8'],
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { type: 'A', year: '2000', value: 25 },
+ { type: 'A', year: '2010', value: 28 },
+ { type: 'A', year: '2018', value: 18 },
+ { type: 'B', year: '2000', value: 23 },
+ { type: 'B', year: '2010', value: 32 },
+ { type: 'B', year: '2018', value: 22 },
+ { type: 'C', year: '2000', value: 18 },
+ { type: 'C', year: '2010', value: 18 },
+ { type: 'C', year: '2018', value: 18 },
+ { type: 'D', year: '2000', value: 15 },
+ { type: 'D', year: '2010', value: 22 },
+ { type: 'D', year: '2018', value: 19 },
+ { type: 'E', year: '2000', value: 5 },
+ { type: 'E', year: '2010', value: 12 },
+ { type: 'E', year: '2018', value: 5 }
+ ]
+ }
+ ],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ axes: [
+ {
+ orient: 'bottom',
+ paddingInner: 0.3
+ }
+ ],
+ bar: {
+ style: {
+ fillOpacity: 0.9
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+* `barGapInGroup`: https://visactor.io/vchart/demo/bar-chart/group-bar-with-barGapInGroup
+* `paddingInner`: https://visactor.io/vchart/demo/bar-chart/group-bar-with-padding
+
+
+## Related Documents
+
+Demo：
+https://visactor.io/vchart/demo/bar-chart/group-bar-with-barGapInGroup ,
+https://visactor.io/vchart/demo/bar-chart/group-bar-with-padding
+API：
+https://visactor.io/vchart/option/barChart-axes-band#paddingInner(number%7Cnumber%5B%5D)
+https://visactor.io/vchart/option/barChart-axes-band#paddingOuter(number%7Cnumber%5B%5D)
+https://visactor.io/vchart/option/barChart#barGapInGroup
+github：github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/79- How to achieve coordinated display of positions in other charts when moving the mouse in the vchart library.md b/docs/assets/faq/en/79- How to achieve coordinated display of positions in other charts when moving the mouse in the vchart library.md
new file mode 100644
index 000000000..d18368b8f
--- /dev/null
+++ b/docs/assets/faq/en/79- How to achieve coordinated display of positions in other charts when moving the mouse in the vchart library.md
@@ -0,0 +1,33 @@
+---
+title: 109. In the vchart library, how to achieve the linkage effect of displaying the position of other charts when the mouse is moved?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to achieve the linkage effect of displaying the position of other charts when the mouse is moved in the vchart library?
+# Problem description
+
+I encountered a problem when using the vchart library. I hope that when I move the mouse, other charts can also display their corresponding positions at the same time, that is, to achieve the linkage effect. I am not sure how to implement this function. Is there any relevant documentation for my reference?
+# Solution
+
+This linkage effect can indeed be achieved. You need to listen to the dimensionHover event of a chart and then simulate dimensionHover for other charts.
+First, you need to use the `on `method to listen to the `dimensionHover `event of the chart. The detailed API usage can be referred to the [vchart API ](https%3A%2F%2Fvisactor.io%2Fvchart%2Fapi%2FAPI%2Fvchart%23on).
+```
+vChart.on('dimensionHover', function(params) {
+// 处理逻辑
+});
+```
+Then, you can use the `setDimensionIndex `method to simulate the `dimensionHover `effect on other charts. Please refer to the [vchart API ](https%3A%2F%2Fvisactor.io%2Fvchart%2Fapi%2FAPI%2Fvchart%23setdimensionindex)for API details.
+```
+vChart.setDimensionIndex(value, {
+// options
+});
+```
+Among them,
+* `Value `is the dimension value,
+* `Options `is a DimensionIndexOption type of parameter that can be used to filter the axis to trigger the dimension effect, configure tooltips and crosshairs, etc.
+# Related Documents
+
+* [vchart on API](https%3A%2F%2Fvisactor.io%2Fvchart%2Fapi%2FAPI%2Fvchart%23on)
+* [vchart setDimensionIndex API](https%3A%2F%2Fvisactor.io%2Fvchart%2Fapi%2FAPI%2Fvchart%23setdimensionindex)
+
diff --git a/docs/assets/faq/en/8- Does the tooltip support custom two-line display content.md b/docs/assets/faq/en/8- Does the tooltip support custom two-line display content.md
new file mode 100644
index 000000000..dc60a4418
--- /dev/null
+++ b/docs/assets/faq/en/8- Does the tooltip support custom two-line display content.md
@@ -0,0 +1,153 @@
+---
+title: Does the tooltip support custom double-line display content?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+Does the tooltip support custom double-line display content?
+
+
+## Problem Description
+
+I would like to ask if vchart’s pie chart tooltip supports custom two-line display content? Currently, according to the documentation of vchart, I can set the title and content of the tooltip, but it seems that it only supports displaying the content of one piece of the pie chart, and this piece does not seem to be supported in the mini program? Do I need to listen for callbacks?
+
+
+## Solution
+
+VChart Tooltip can configure multiple content contents to display more prompt information:
+```
+ tooltip: {
+ dimension: {
+ content: [
+ {
+ key: 'value',
+ value: (datum) => datum.value,
+ },
+ {
+ key: 'country',
+ value: (datum) => datum.country,
+ }
+ ],
+ }
+ }
+```
+
+
+## Code Example
+
+```
+const markLineValue = 10000;
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ stack: false,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ lineLabel: { visible: true },
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+ point: {
+ style: {
+ opacity: 0
+ },
+ state: {
+ dimension_hover: {
+ opacity: 1,
+ size: 10,
+ lineWidth: 2,
+ stroke: {
+ scale: 'color',
+ field: 'country'
+ },
+ fill: 'white'
+ }
+ }
+ },
+ markLine: [
+ {
+ y: markLineValue,
+ endSymbol: {
+ visible: false
+ },
+ line: {
+ style: {
+ stroke: 'orange',
+ lineWidth: 2
+ }
+ }
+ }
+ ],
+ tooltip: {
+ dimension: {
+ content: [
+ {
+ key: 'value',
+ value: (datum) => datum.value,
+ },
+ {
+ key: 'country',
+ value: (datum) => datum.country,
+ }
+ ],
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+
+## Results
+
+
+
+
+
+## Quote
+
+* github：https://github.com/VisActor/VChart
+* https://visactor.io/vchart/option/barChart#tooltip.dimension.content(Object%7CObject%5B%5D)
+
diff --git a/docs/assets/faq/en/81- How to solve the issue of the upper area chart obscuring the lower point chart in a combo chart.md b/docs/assets/faq/en/81- How to solve the issue of the upper area chart obscuring the lower point chart in a combo chart.md
new file mode 100644
index 000000000..da49122a4
--- /dev/null
+++ b/docs/assets/faq/en/81- How to solve the issue of the upper area chart obscuring the lower point chart in a combo chart.md
@@ -0,0 +1,96 @@
+---
+title: How to deal with the issue of an uppermost area chart obscuring the lowermost scatter chart in a composite chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question Title
+
+How to deal with the issue of an uppermost area chart obscuring the lowermost scatter chart in a composite chart?
+
+
+# Question Description
+
+I have created a composite chart using VChart, which includes two sub-graphs, both of type area chart. Because the second sub-graph is plotted on top of the first one, its area covers the data points of the first sub-graph, making it impossible for the data points of the first sub-graph to trigger hover and click events. I would like to ask if there is any way to solve this problem?
+The chart configuration goes as follows:
+```
+const spec = {
+"data": [...],
+"series": [
+{
+"id": "area",
+"type": "area",
+"xField": "time",
+"yField": "value",
+"seriesField": "groupName",
+...
+},
+{
+"id": "compare",
+"type": "area",
+"name": "compare",
+"xField": "time",
+"yField": "compareValue",
+"seriesField": "groupName",
+...
+"interactive": {
+"line": false,
+"area": false
+}
+}
+]
+}
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+```
+
+
+
+
+# Solution
+
+This issue can be addressed by setting the line.interactive and area.interactive attributes of the second area chart series to false. The configuration is as follows:
+```
+{
+"data": [...],
+"series": [
+{
+"id": "area",
+"type": "area",
+"xField": "time",
+"yField": "value",
+"seriesField": "groupName",
+...
+},
+{
+"id": "compare",
+"type": "area",
+"name": "compare",
+"xField": "time",
+"yField": "compareValue",
+"seriesField": "groupName",
+...
+"line":{
+"interactive":false
+},
+"area":{
+"interactive":false
+},
+}
+]
+}
+```
+
+
+This way, the second area sub-chart will not respond to interactive events, and user hover and click events can trigger the data points of the first area sub-chart through the second area sub-chart.
+
+
+# Results
+
+By using the above configuration and rendering the chart, you will find that the lines and areas of the second sub-chart will no longer respond to mouse operations, so the hover and click of the first sub-chart can be successfully triggered.
+For online effects reference: https://codesandbox.io/s/common-chart-interactive-jtmc92?file=/src/index.ts
+
+
+# Related Documentation
+
+Related api: https://www.visactor.io/vchart/api/API/vchart
+Github: https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/84- How to configure the style of legend pager arrows in VChart.md b/docs/assets/faq/en/84- How to configure the style of legend pager arrows in VChart.md
new file mode 100644
index 000000000..968ddd56b
--- /dev/null
+++ b/docs/assets/faq/en/84- How to configure the style of legend pager arrows in VChart.md
@@ -0,0 +1,110 @@
+---
+title: 40. How to configure the style of the page flipper arrow in the VChart legend?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to configure the style of pager arrow in VChart legend?
+
+
+## Problem Description
+
+I used a dark theme and hope to make the page flipper style more prominent. How should I configure it?
+
+
+## Solution
+
+Legend pager corresponds to the configuration of `pager`.
+* The pager text color can be configured through ` pager.textStyle.fill`.
+* The page flipper button color can be configured through `pager.handler.style`.
+* The style of the page turning button in the unavailable state needs to be configured through `pager.handler.state.disable.fill `.
+```
+ legends: {
+ visible: true,
+ pager:{
+ textStyle:{
+ fill:"rgb(170,170,170)"
+ },
+ handler:{
+ style:{
+ fill:'rgb(170,170,170)'
+ },
+ state:{
+ disable:{
+ fill:'rgb(47,69,84)'
+ }
+ }
+ }
+ }
+ },
+```
+## Code Example
+
+```
+
+const spec = {
+ type: 'pie',
+ theme:"dark",
+ width: 300,
+ height: 300,
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ innerRadius: 0.5,
+ padAngle: 0.6,
+ valueField: 'value',
+ categoryField: 'type',
+ legends: {
+ visible: true,
+ pager:{
+ textStyle:{
+ fill:"rgb(170,170,170)"
+ },
+ handler:{
+ style:{
+ fill:'rgb(170,170,170)'
+ },
+ state:{
+ disable:{
+ fill:'rgb(47,69,84)'
+ }
+ }
+ }
+ }
+ },
+}
+
+const vchart = new VChart((spec), { dom: CONTAINER_ID });
+vchart.renderSync();
+
+vchart.getCanvas().style.outline = '1px solid orange';
+
+```
+
+
+## Results
+
+
+
+
+
+
+
+## Quote
+
+* Related configuration: https://visactor.io/vchart/option/barChart-legends-discrete#pager
+* github：https://github.com/VisActor/VChart
+
diff --git a/docs/assets/faq/en/86- How to emphasize a specific point in a vchart line chart.md b/docs/assets/faq/en/86- How to emphasize a specific point in a vchart line chart.md
new file mode 100644
index 000000000..e1ec7daac
--- /dev/null
+++ b/docs/assets/faq/en/86- How to emphasize a specific point in a vchart line chart.md
@@ -0,0 +1,105 @@
+---
+title: 41. How VChart line charts support emphasizing a certain point
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# **Title**
+
+Does vchart support emphasizing a certain point in a line chart?
+# **Description**
+
+I'm using vchart to create a line chart and I'm wondering if it's possible to emphasize a certain point in the chart.
+# **Solution**
+
+Yes, it's possible to achieve this. You can use the `opacity` and `size` options to highlight a certain point based on its data. By setting the opacity and size of the point, it will stand out more.
+You can refer to the following link for more information on how to configure the mark function of a chart element: [https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Mark](https%3A%2F%2Fvisactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FSeries%2FMark)
+# **Code Example**
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ percent: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ animationAppear: {
+ duration: 1500,
+ easing: 'linear'
+ },
+ point: {
+ style: {
+ opacity: (datum) => {
+ return datum.type === 'Eyeliner' && datum.country === 'EU' ? 1 : 0.6
+ },
+ size: (datum) => {
+ return datum.type === 'Eyeliner' && datum.country === 'EU' ? 10 : 6
+ },
+ stroke: false
+ }
+ },
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+ axes: [
+ {
+ orient: 'left',
+ label: {
+ formatMethod(val) {
+ return `${(val * 100).toFixed(2)}%`;
+ }
+ }
+ }
+ ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+
+vchart.renderSync();
+```
+# **Result**
+
+After running the code, the points in the Eyeliner dimension of the EU line segment are emphasized.
+
+
+Online demo: [https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-4px87p?file=%2Fsrc%2Findex.ts%3A3%2C1](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fline-chart-single-selected-forked-4px87p%3Ffile%3D%252Fsrc%252Findex.ts%253A3%252C1)
+# **Related Documents**
+
+* VChart mark function configuration: [https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Mark](https%3A%2F%2Fvisactor.io%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FSeries%2FMark)
+* VChart Github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file
diff --git a/docs/assets/faq/en/87- How to handle incomplete label display in VChart pie charts.md b/docs/assets/faq/en/87- How to handle incomplete label display in VChart pie charts.md
new file mode 100644
index 000000000..f834915ee
--- /dev/null
+++ b/docs/assets/faq/en/87- How to handle incomplete label display in VChart pie charts.md
@@ -0,0 +1,108 @@
+---
+title: 93. How to solve the problem of pie chart labels not being fully displayed using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to solve the pie chart labels not being fully displayed using VChart?
+## Description
+
+When using a VChart pie chart label is hidden when the chart is narrow, I want it to be displayed without being hidden.
+## Solution
+
+The solutions for different chart libraries are different. In the case of VChart, the width of the chart is not enough to layout the labels. You can try the following solutions:
+1. Adjust the sector radius `outerRadius` to reserve more space.
+2. Adjust the spacing between the text and the connection line `spaceWidth`.
+3. Adjust the label connection line configuration `line.line1MinLength`, `line.line2MinLength`, hide the connection line or set a shorter connection line length.
+4. Other solutions: set a smaller `fontSize`, or use internal labels, etc.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "pie",
+ data: [
+ {
+ id: "id0",
+ values: [
+ { type: "oxygen", value: "46.60" },
+ { type: "silicon", value: "27.72" },
+ { type: "aluminum", value: "8.13" },
+ { type: "iron", value: "5" },
+ { type: "calcium", value: "3.63" },
+ { type: "sodium", value: "2.83" },
+ { type: "potassium", value: "2.59" },
+ { type: "others", value: "3.5" },
+ ],
+ },
+ ],
+ outerRadius: 0.8,
+ // Option 1: Set a smaller radius
+ // outerRadius: 0.4,
+ valueField: "value",
+ categoryField: "type",
+ title: {
+ visible: true,
+ text: "Statistics of Surface Element Content",
+ },
+ legends: {
+ visible: true,
+ orient: "bottom",
+ },
+ label: {
+ visible: true,
+ // Option2: Set a smaller space between text and line
+ // spaceWidth: 0,
+
+ // Option3: Set a smaller line1MinLength and line2MinLength for label line.
+ // line: {
+ // visible: false, // `true` may be better
+ // line1MinLength: 0,
+ // line2MinLength: 0,
+ // },
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: (datum) => datum["type"],
+ value: (datum) => datum["value"] + "%",
+ },
+ ],
+ },
+ },
+ };
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+# Solution
+
+The label configuration of a pie chart is in the `label` field: [https://visactor.io/vchart/option/pieChart#label](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label). There is a property called `formatMethod` in this field, which is used to format the label content: [https://visactor.io/vchart/option/pieChart#label.formatMethod](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label.formatMethod). By configuring a function, the label can be formatted. The function receives parameters including the original text and data, and returns a string representing the formatted label text.
+# Code Example
+
+```
+const spec = {
+ type: 'pie',
+ data: [
+ {
+ id: 'id0',
+ values: [
+ { type: 'oxygen', value: '46.60' },
+ { type: 'silicon', value: '27.72' },
+ { type: 'aluminum', value: '8.13' },
+ { type: 'iron', value: '5' },
+ { type: 'calcium', value: '3.63' },
+ { type: 'sodium', value: '2.83' },
+ { type: 'potassium', value: '2.59' },
+ { type: 'others', value: '3.5' }
+ ]
+ }
+ ],
+ outerRadius: 0.8,
+ valueField: 'value',
+ categoryField: 'type',
+ title: {
+ visible: true,
+ text: 'Statistics of Surface Element Content'
+ },
+ legends: {
+ visible: true,
+ orient: 'left'
+ },
+ label: {
+ visible: true,
+ formatMethod: (text, datum) => {
+ return `${text}: ${datum.value}`
+ }
+ },
+ tooltip: {
+ mark: {
+ content: [
+ {
+ key: datum => datum['type'],
+ value: datum => datum['value'] + '%'
+ }
+ ]
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+After running the code, the labels can be formatted.
+Online demo: [https://codesandbox.io/p/sandbox/pie-label-format-9k8wlr?file=%2Fsrc%2Findex.ts%3A48%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fpie-label-format-9k8wlr%3Ffile%3D%252Fsrc%252Findex.ts%253A48%252C2)
+
+
+# Related Documents
+
+* VChart official website: [https://visactor.io/vchart/](https%3A%2F%2Fvisactor.io%2Fvchart%2F)
+* formatMethod documentation: [https://visactor.io/vchart/option/pieChart#label.formatMethod](https%3A%2F%2Fvisactor.io%2Fvchart%2Foption%2FpieChart%23label.formatMethod)
+* VChart GitHub: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/89- How to retrieve all data of the same dimension as the clicked bar in a stacked bar chart.md b/docs/assets/faq/en/89- How to retrieve all data of the same dimension as the clicked bar in a stacked bar chart.md
new file mode 100644
index 000000000..60f08e0d8
--- /dev/null
+++ b/docs/assets/faq/en/89- How to retrieve all data of the same dimension as the clicked bar in a stacked bar chart.md
@@ -0,0 +1,168 @@
+---
+title: 36. When using stacked bar charts, how to get all data in the same dimension as the clicked bar in the click event
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+When using stacked bar charts, how to get all data in the same dimension as the clicked bar in the click event?
+
+
+## Description
+
+When using a stacked bar chart, how to get all the data in the same dimension as the clicked bar in the click event? For example, clicking on the first bar returns four pieces of data represented by the blue, cyan, red, and green legends.
+
+
+
+
+## Solution
+
+In VChart, you can first obtain the x-axis dimension information of the clicked column by listening to the click event of the column, then obtain the data of the current chart through the API or directly using the original data source (if you can get it), and then filter out the column data with the same x-axis dimension information. As follows:
+```
+// Listen to the click event of the bar primitive
+vchart.on('click', { markName: 'bar', level: 'mark' }, (e: any) => {
+ const datum = e.datum as any; // Get information about the clicked column
+ const chartSpec = e.chart?.getSpec(); // If you can't get the current spec, you can get the original spec in this way.
+ const xDimensionValue = datum[chartSpec.xField];
+ const chartData = e.chart.chartData.getSeriesData().latestData; // If you can get the original data source, you can also get the original data source directly.
+ const filterData = chartData.filter(chartDatum => chartDatum[chartSpec.xField] === xDimensionValue);
+
+ console.log(filterData);
+});
+
+```
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ {
+ State: 'WY',
+ Age: 'Under 5 Years',
+ Population: 25635
+ },
+ {
+ State: 'WY',
+ Age: '5 to 13 Years',
+ Population: 1890
+ },
+ {
+ State: 'WY',
+ Age: '14 to 17 Years',
+ Population: 9314
+ },
+ {
+ State: 'DC',
+ Age: 'Under 5 Years',
+ Population: 30352
+ },
+ {
+ State: 'DC',
+ Age: '5 to 13 Years',
+ Population: 20439
+ },
+ {
+ State: 'DC',
+ Age: '14 to 17 Years',
+ Population: 10225
+ },
+ {
+ State: 'VT',
+ Age: 'Under 5 Years',
+ Population: 38253
+ },
+ {
+ State: 'VT',
+ Age: '5 to 13 Years',
+ Population: 42538
+ },
+ {
+ State: 'VT',
+ Age: '14 to 17 Years',
+ Population: 15757
+ },
+ {
+ State: 'ND',
+ Age: 'Under 5 Years',
+ Population: 51896
+ },
+ {
+ State: 'ND',
+ Age: '5 to 13 Years',
+ Population: 67358
+ },
+ {
+ State: 'ND',
+ Age: '14 to 17 Years',
+ Population: 18794
+ },
+ {
+ State: 'AK',
+ Age: 'Under 5 Years',
+ Population: 72083
+ },
+ {
+ State: 'AK',
+ Age: '5 to 13 Years',
+ Population: 85640
+ },
+ {
+ State: 'AK',
+ Age: '14 to 17 Years',
+ Population: 22153
+ }
+ ]
+ }
+ ],
+ xField: 'State',
+ yField: 'Population',
+ seriesField: 'Age',
+ stack: true,
+ legends: {
+ visible: true
+ },
+ bar: {
+ // The state style of bar
+ state: {
+ hover: {
+ stroke: '#000',
+ lineWidth: 1
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: 'chart' });
+vchart.renderSync();
+
+
+// 监听 bar 图元的 click 事件
+vchart.on('click', { markName: 'bar', level: 'mark' }, (e: any) => {
+ const datum = e.datum as any; // 获取被点击的柱子的信息
+ const chartSpec = e.chart?.getSpec(); // 如果你无法获取当前的 spec，可以通过该方式获取原始 spec
+ const xDimensionValue = datum[chartSpec.xField];
+ const chartData = e.chart.chartData.getSeriesData().latestData; // 如果可以拿到原始数据，也可以直接拿原始数据
+ const filterData = chartData.filter(chartDatum => chartDatum[chartSpec.xField] === xDimensionValue);
+
+ console.log(filterData);
+});
+```
+## Results
+
+
+
+
+
+## Related Documents
+
+* Tutorial: https://visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E8%BF%87%E6%BB%A4
+* API: https://visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E8%BF%87%E6%BB%A4
+* GitHub: https://github.com/VisActor/VChart/
+
+
+
diff --git a/docs/assets/faq/en/9- How to display 'sum' in the tooltip of a line chart.md b/docs/assets/faq/en/9- How to display 'sum' in the tooltip of a line chart.md
new file mode 100644
index 000000000..a97f07215
--- /dev/null
+++ b/docs/assets/faq/en/9- How to display 'sum' in the tooltip of a line chart.md
@@ -0,0 +1,98 @@
+---
+title: How to display "total" in the tooltip of a line chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+Title
+How to display "total" in the tooltip of a line chart?
+
+
+Description
+When using a line chart, I want to display the "total" item in the tooltip, but I don't know how to do it. How can I achieve this?
+
+
+Solution
+You can use updateContent to do post-processing of the tooltip content.
+In the content of dimension, you can add an item with the key "total" and the value of a function. This function receives a datumList parameter, which represents the list of all data in the current tooltip. Then calculate the sum of the values of all data and return it.
+In updateContent, you can also add an item with the key "total" and the same function, so that the "total" item can be displayed in the tooltip.
+
+
+Code example
+```
+const data = [
+ { year: '2012', type: 'Forest', value: 320 },
+ { year: '2012', type: 'Steppe', value: 220 },
+ { year: '2012', type: 'Desert', value: 150 },
+ { year: '2012', type: 'Wetland', value: 98 },
+ { year: '2013', type: 'Forest', value: 332 },
+ { year: '2013', type: 'Steppe', value: 182 },
+ { year: '2013', type: 'Desert', value: 232 },
+ { year: '2013', type: 'Wetland', value: 77 },
+ { year: '2014', type: 'Forest', value: 301 },
+ { year: '2014', type: 'Steppe', value: 191 },
+ { year: '2014', type: 'Desert', value: 201 },
+ { year: '2014', type: 'Wetland', value: 101 },
+ { year: '2015', type: 'Forest', value: 334 },
+ { year: '2015', type: 'Steppe', value: 234 },
+ { year: '2015', type: 'Desert', value: 154 },
+ { year: '2015', type: 'Wetland', value: 99 },
+ { year: '2016', type: 'Forest', value: 390 },
+ { year: '2016', type: 'Steppe', value: 290 },
+ { year: '2016', type: 'Desert', value: 190 },
+ { year: '2016', type: 'Wetland', value: 40 }
+];
+const aggregation = {};
+data.forEach(({ year, value }) => {
+ if (!aggregation[year]) {
+ aggregation[year] = 0;
+ }
+ aggregation[year] += value;
+});
+const spec = {
+ type: 'bar',
+ data: [{ id: 'bar', values: data }],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ bar: { state: { legend_hover_reverse: { fill: '#ccc' } } },
+ legends: { visible: true },
+ tooltip: {
+ mark: {
+ title: { value: (datum) => datum['year'] + '年' },
+ content: [
+ { key: (datum) => datum['type'], value: (datum) => datum['value'] },
+ {
+ hasShape: false,
+ key: 'Proportion',
+ value: (datum) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
+ }
+ ]
+ },
+ dimension: {
+ title: { value: (datum) => datum['year'] + '年' },
+ content: [{ key: (datum) => datum['type'], value: (datum) => datum['value'] }],
+ updateContent: (prev) => {
+ console.log(prev);
+ const total = prev.reduce((acc, cur) => {
+ return acc + cur.value;
+ }, 0);
+ return (prev ?? []).concat({ key: 'total', value: total });
+ }
+ }
+ }
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
+
+```
+
+
+Result
+
+
+
+
+
+Related documentation
+* updateContent: [https://visactor.bytedance.net/vchart/option/barChart#tooltip.dimension.updateContent](https%3A%2F%2Fvisactor.bytedance.net%2Fvchart%2Foption%2FbarChart%23tooltip.dimension.updateContent)
+* Github: [https://github.com/VisActor/VChart](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/91- How to add custom items to a tooltip.md b/docs/assets/faq/en/91- How to add custom items to a tooltip.md
new file mode 100644
index 000000000..6c6df6787
--- /dev/null
+++ b/docs/assets/faq/en/91- How to add custom items to a tooltip.md
@@ -0,0 +1,96 @@
+---
+title: 21. How to add custom items in tooltip？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# **Question Title**
+
+How to add custom items in tooltip
+# **Question Description**
+
+When using the line chart, I want to display the item "Sum" in the tooltip, but I don't know how to achieve this. What should I do?
+# **Solution**
+
+You can use updateContent to do a post-processing of the tooltip content.
+In the content of the dimension, you can add an item with the key "Sum" and the value as a function that receives a datumList parameter representing the list of all data in the current tooltip, and then calculates the sum of the values of all data and returns it.
+In updateContent, you can also add an item with the key "Sum" and the same value as the function, so that the "Sum" item can be displayed in the tooltip.
+# **Code Example**
+
+```
+const data = [
+ { year: '2012', type: 'Forest', value: 320 },
+ { year: '2012', type: 'Steppe', value: 220 },
+ { year: '2012', type: 'Desert', value: 150 },
+ { year: '2012', type: 'Wetland', value: 98 },
+ { year: '2013', type: 'Forest', value: 332 },
+ { year: '2013', type: 'Steppe', value: 182 },
+ { year: '2013', type: 'Desert', value: 232 },
+ { year: '2013', type: 'Wetland', value: 77 },
+ { year: '2014', type: 'Forest', value: 301 },
+ { year: '2014', type: 'Steppe', value: 191 },
+ { year: '2014', type: 'Desert', value: 201 },
+ { year: '2014', type: 'Wetland', value: 101 },
+ { year: '2015', type: 'Forest', value: 334 },
+ { year: '2015', type: 'Steppe', value: 234 },
+ { year: '2015', type: 'Desert', value: 154 },
+ { year: '2015', type: 'Wetland', value: 99 },
+ { year: '2016', type: 'Forest', value: 390 },
+ { year: '2016', type: 'Steppe', value: 290 },
+ { year: '2016', type: 'Desert', value: 190 },
+ { year: '2016', type: 'Wetland', value: 40 }
+];
+const aggregation = {};
+data.forEach(({ year, value }) => {
+ if (!aggregation[year]) {
+ aggregation[year] = 0;
+ }
+ aggregation[year] += value;
+});
+const spec = {
+ type: 'bar',
+ data: [{ id: 'bar', values: data }],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ bar: { state: { legend_hover_reverse: { fill: '#ccc' } } },
+ legends: { visible: true },
+ tooltip: {
+ mark: {
+ title: { value: (datum) => datum['year'] + '年' },
+ content: [
+ { key: (datum) => datum['type'], value: (datum) => datum['value'] },
+ {
+ hasShape: false,
+ key: 'Proportion',
+ value: (datum) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
+ }
+ ]
+ },
+ dimension: {
+ title: { value: (datum) => datum['year'] + '年' },
+ content: [{ key: (datum) => datum['type'], value: (datum) => datum['value'] }],
+ updateContent: (prev) => {
+ console.log(prev);
+ const total = prev.reduce((acc, cur) => {
+ return acc + cur.value;
+ }, 0);
+ return (prev ?? []).concat({ key: 'total', value: total });
+ }
+ }
+ }
+};
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
+
+```
+
+
+# **结果展示**
+
+
+
+
+
+# **相关文档**
+
+* updateContent：https://visactor.bytedance.net/vchart/option/barChart#tooltip.dimension.updateContent
+* github：https://github.com/VisActor/VChart
\ No newline at end of file
diff --git a/docs/assets/faq/en/92- How to set a segment of a dashed line in a line chart.md b/docs/assets/faq/en/92- How to set a segment of a dashed line in a line chart.md
new file mode 100644
index 000000000..265b94977
--- /dev/null
+++ b/docs/assets/faq/en/92- How to set a segment of a dashed line in a line chart.md
@@ -0,0 +1,105 @@
+---
+title: 98. How to set a dashed line in a line chart, using VChart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to set a dashed line in a line chart?
+## Description
+
+In certain scenarios, line charts may need to convey information like "total" and "forecast", in which case a single line may need to be styled differently to visualize these special messages. Changing the line chart to a dashed style is a great solution.
+## Solution
+
+Different chart libraries have different solutions. The line chart provided by VChart offers `lineDash` configuration, allowing users to control the style of a section of the line as a dashed line by setting a callback function, as well as other styles.
+The dashed line of a line chart can be controlled based on the configuration of `line.style.lineDash`.
+## Code Example
+
+```
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ useEffect(() => {
+ const spec = {
+ type: "line",
+ data: {
+ values: [
+ {
+ x: "1st",
+ y: 0.012,
+ },
+ {
+ x: "2nd",
+ y: -0.01,
+ },
+ {
+ x: "3rd",
+ y: 0.005,
+ },
+ {
+ x: "4th",
+ y: 0.007,
+ },
+ {
+ x: "5th",
+ y: 0.01,
+ },
+ {
+ x: "6th",
+ y: 0.017,
+ },
+ {
+ x: "7th",
+ y: 0.022,
+ },
+ {
+ x: "8th (prediction)",
+ y: 0.033,
+ isDash: true,
+ },
+ ],
+ },
+ xField: "x",
+ yField: "y",
+ line: {
+ style: {
+ lineDash: (data) => {
+ if (data.isDash) {
+ return [5, 5];
+ }
+ return [0];
+ },
+ },
+ },
+ };
+
+ const vchart = new VChart(spec, { dom: "chart" });
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ return ;
+};
+
+root.render(
+ 
+
+
+
+## Solution
+
+The corsshair component is responsible for displaying the background column during interaction. If you want to leave a gap between the background and the column, you can achieve it by setting the width percentage, for example: set corsshair.xField.line.width: '200%'.
+
+
+
+
+## Code Example
+
+```
+const spec = {
+ type: 'bar',
+ data: [
+ {
+ id: 'barData',
+ values: [
+ { type: 'Autocracies', year: '1960', value: 126 },
+ { type: 'Autocracies', year: '1970', value: 117 },
+ { type: 'Autocracies', year: '1980', value: 114 },
+ { type: 'Autocracies', year: '1990', value: 111 },
+ { type: 'Autocracies', year: '2000', value: 89 },
+ { type: 'Autocracies', year: '2010', value: 80 },
+ { type: 'Autocracies', year: '2018', value: 80 },
+ { type: 'Democracies', year: '1960', value: 29 },
+ { type: 'Democracies', year: '1970', value: 38 },
+ { type: 'Democracies', year: '1980', value: 41 },
+ { type: 'Democracies', year: '1990', value: 57 },
+ { type: 'Democracies', year: '2000', value: 87 },
+ { type: 'Democracies', year: '2010', value: 98 },
+ { type: 'Democracies', year: '2018', value: 99 }
+ ]
+ }
+ ],
+ xField: ['year', 'type'],
+ yField: 'value',
+ seriesField: 'type',
+ legends: {
+ visible: true,
+ orient: 'top',
+ position: 'start'
+ },
+ crosshair: {
+ xField: {
+ line: {
+ width: '130%'
+ }
+ }
+ }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+## Results
+
+Online demo：https://codesandbox.io/p/sandbox/svg-symbol-8k9tdz?file=%2Fsrc%2Findex.ts%3A208%2C29
+
+
+
+
+## Related Documentation
+
+Crosshair Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Crosshair
+Related Api：https://www.visactor.io/vchart/option/barChart#crosshair.xField.line.width
+github：https://github.com/VisActor/VChart
+
+
+
diff --git a/docs/assets/faq/en/95- How to achieve edge-aligned x-axis labels in a trend chart.md b/docs/assets/faq/en/95- How to achieve edge-aligned x-axis labels in a trend chart.md
new file mode 100644
index 000000000..87dbf6441
--- /dev/null
+++ b/docs/assets/faq/en/95- How to achieve edge-aligned x-axis labels in a trend chart.md
@@ -0,0 +1,91 @@
+---
+title: How do I make the x-axis labels stick to the edge of the trend chart?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+How do I make the x-axis labels stick to the edge of the trend chart?
+
+
+## Problem Description
+
+As shown in the figure, can the label on the leftmost side of the x-axis of the trend chart be aligned with the left border of the chart area, and the label on the rightmost side be aligned with the right border of the chart area?
+
+
+## Solution
+
+* When the axis type is `band`, you can eliminate the `padding` on the left and right sides by configuring `trimPadding: true`
+* The value of `label.flush` is `true`, which means the axis label is indented inward and does not exceed the axis range
+
+
+## Code Examples
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ { type: 'Nail polish', country: 'Africa', value: 4229 },
+ { type: 'Nail polish', country: 'EU', value: 4376 },
+ { type: 'Nail polish', country: 'China', value: 3054 },
+ { type: 'Nail polish', country: 'USA', value: 12814 },
+ { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+ { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+ { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+ { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+ { type: 'Rouge', country: 'Africa', value: 5221 },
+ { type: 'Rouge', country: 'EU', value: 3574 },
+ { type: 'Rouge', country: 'China', value: 7004 },
+ { type: 'Rouge', country: 'USA', value: 11624 },
+ { type: 'Lipstick', country: 'Africa', value: 9256 },
+ { type: 'Lipstick', country: 'EU', value: 4376 },
+ { type: 'Lipstick', country: 'China', value: 9054 },
+ { type: 'Lipstick', country: 'USA', value: 8814 },
+ { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+ { type: 'Eyeshadows', country: 'EU', value: 4572 },
+ { type: 'Eyeshadows', country: 'China', value: 12043 },
+ { type: 'Eyeshadows', country: 'USA', value: 12998 },
+ { type: 'Eyeliner', country: 'Africa', value: 5432 },
+ { type: 'Eyeliner', country: 'EU', value: 3417 },
+ { type: 'Eyeliner', country: 'China', value: 15067 },
+ { type: 'Eyeliner', country: 'USA', value: 12321 },
+ { type: 'Foundation', country: 'Africa', value: 13701 },
+ { type: 'Foundation', country: 'EU', value: 5231 },
+ { type: 'Foundation', country: 'China', value: 10119 },
+ { type: 'Foundation', country: 'USA', value: 10342 },
+ { type: 'Lip gloss', country: 'Africa', value: 4008 },
+ { type: 'Lip gloss', country: 'EU', value: 4572 },
+ { type: 'Lip gloss', country: 'China', value: 12043 },
+ { type: 'Lip gloss', country: 'USA', value: 22998 },
+ { type: 'Mascara', country: 'Africa', value: 18712 },
+ { type: 'Mascara', country: 'EU', value: 6134 },
+ { type: 'Mascara', country: 'China', value: 10419 },
+ { type: 'Mascara', country: 'USA', value: 11261 }
+ ]
+ },
+ title: {
+ visible: true,
+ text: 'Stacked line chart'
+ },
+ stack: true,
+ xField: 'type',
+ yField: 'value',
+ seriesField: 'country',
+ lineLabel: { visible: true },
+ legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+ axes: [{
+ orient: 'bottom',
+ trimPadding: true,
+ label: {
+ flush: true
+ }
+ }],
+};
+```
+## Results Display
+
+
+
+## Related Documents
+
+* [Axis Tutorial](https%3A%2F%2Fvisactor.com%2Fvchart%2Fguide%2Ftutorial_docs%2FChart_Concepts%2FAxes)
+* [VChart github](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
+
diff --git a/docs/assets/faq/en/98- How to customize legends in React.md b/docs/assets/faq/en/98- How to customize legends in React.md
new file mode 100644
index 000000000..f1a4126a7
--- /dev/null
+++ b/docs/assets/faq/en/98- How to customize legends in React.md
@@ -0,0 +1,120 @@
+---
+title: 48. How to custom VChart legend using React?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to custom VChart legend using React?
+## Description
+
+In many scenarios, it is necessary to make legends more functional, such as adding abbreviations for long text and providing tooltips. Generally speaking, the legend feature provided by chart libraries by default cannot perfectly meet the needs of all users.
+## Solution
+
+The solutions of different chart libraries are different.
+VChart provides the `getLegendSelectedDataByIndex` and `setLegendSelectedDataByIndex` interfaces by abstracting the legend function, which allows users to customize the legend through `html` and achieve the desired effect.
+You can quickly use `React` to apply legends to custom VChart charts. Here are the steps:
+1. Set the legend configuration to invisible, that is, `visible: false`;
+2. Use `getLegendSelectedDataByIndex` to determine if you need to select or deselect the legend;
+3. Use `setLegendSelectedDataByIndex` to operate the legend selection or deselection through the API.
+## Code Example
+
+```
+import { StrictMode, useEffect, useRef, useState, useCallback } from "react";
+import { createRoot } from "react-dom/client";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+import VChart from "@visactor/vchart";
+
+const App = () => {
+ const ref = useRef(null);
+ const data = [
+ { year: "2000", type: "A", sales: 22 },
+ { year: "2000", type: "B", sales: 11 },
+
+ { year: "2001", type: "A", sales: 22 },
+ { year: "2001", type: "B", sales: 11 },
+ ];
+ const spec = {
+ type: "bar",
+ data: [
+ {
+ id: "barData",
+ values: data,
+ },
+ ],
+ legends: {
+ visible: false,
+ },
+ xField: ["year", "type"],
+ yField: "sales",
+ seriesField: "type",
+ };
+
+ useEffect(() => {
+ const vchart = new VChart(spec, { dom: "chart" });
+ ref.current = vchart;
+ vchart.renderSync();
+
+ return () => {
+ vchart.release();
+ };
+ }, []);
+
+ const handleSelect = (value) => () => {
+ const selected = ref.current.getLegendSelectedDataByIndex();
+
+ if (selected.includes(value)) {
+ // cancel
+ const newSelected = [...selected];
+ const index = newSelected.indexOf(value);
+ newSelected.splice(index, 1);
+ ref.current.setLegendSelectedDataByIndex(0, newSelected);
+ } else {
+ // select
+ ref.current.setLegendSelectedDataByIndex(0, [...selected, value]);
+ }
+ };
+
+ const customLegend = Array.from(new Set(data.map((d) => d.type))).map(
+ (name) => {
+ return (
+
+ {/* do any custom thing using html */}
+ {name + "...................................."}
+
+ );
+ }
+ );
+
+ return (
+
+
+ {customLegend}
+
+ );
+};
+
+root.render(
+ 
+
+# Solution
+
+If a point's value is invalid, VChart will automatically hide that point. You can set the value of that point to null in the data to achieve the same effect.
+For example, the point corresponding to 10:00 will not be displayed if its value is set to null.
+```
+data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: null
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ }
+```
+# Code Example
+
+```
+const spec = {
+ type: 'line',
+ data: {
+ values: [
+ {
+ time: '2:00',
+ value: 8
+ },
+ {
+ time: '4:00',
+ value: 9
+ },
+ {
+ time: '6:00',
+ value: 11
+ },
+ {
+ time: '8:00',
+ value: 14
+ },
+ {
+ time: '10:00',
+ value: null
+ },
+ {
+ time: '12:00',
+ value: 17
+ },
+ {
+ time: '14:00',
+ value: 17
+ },
+ {
+ time: '16:00',
+ value: 16
+ },
+ {
+ time: '18:00',
+ value: 15
+ }
+ ]
+ },
+ xField: 'time',
+ yField: 'value'
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+# Result
+
+After running the code, the point corresponding to 10:00 will not be displayed, and the line chart will be segmented.
+
+
+Online demo: [https://codesandbox.io/p/sandbox/line-point-split-fq7wkh?file=%2Fsrc%2Findex.ts%3A49%2C2](https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fline-point-split-fq7wkh%3Ffile%3D%252Fsrc%252Findex.ts%253A49%252C2)
+# Related Documents
+
+* VChart official website: [https://visactor.io/vchart/](https%3A%2F%2Fvisactor.io%2Fvchart%2F)
+* VChart GitHub: [GitHub - VisActor/VChart: VChart, more than just a cross-platform charting library, but also an expressive data storyteller.](https%3A%2F%2Fgithub.com%2FVisActor%2FVChart)
\ No newline at end of file