From 45c0b14148db838c5922e09e4fb5ce20c115c175 Mon Sep 17 00:00:00 2001
From: andylili21 <101868030+andylili21@users.noreply.github.com>
Date: Fri, 10 Nov 2023 14:42:32 +0800
Subject: [PATCH] docs(Axis-Theme): Translate Axis-Theme to En (#5773)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* #翻译坐标轴
* #doc(Axis-Theme): Translate Axis-Theme to En
* #选择翻译
* #Revised case
---
site/docs/manual/core/axis.en.md | 81 +++++++
site/docs/manual/core/composition.en.md | 231 +++++++++++++++++-
site/docs/manual/core/interaction.en.md | 179 +++++++++++++-
site/docs/manual/core/legend.en.md | 66 +++++
site/docs/manual/core/scrollbar.en.md | 46 ++++
site/docs/manual/core/slider.en.md | 47 ++++
site/docs/manual/core/theme.en.md | 128 +++++++++-
site/docs/manual/core/tooltip.en.md | 309 +++++++++++++++++++++++-
8 files changed, 1083 insertions(+), 4 deletions(-)
diff --git a/site/docs/manual/core/axis.en.md b/site/docs/manual/core/axis.en.md
index 92846fab2f..451ee06b1d 100644
--- a/site/docs/manual/core/axis.en.md
+++ b/site/docs/manual/core/axis.en.md
@@ -2,3 +2,84 @@
title: Axis
order: 7.1
---
+
+In G2, the **Axis** can be understood as the visualization of the scale corresponding to the spatial channels (x, y, and position).
+
+The axis can be configured at the mark level:
+
+```js
+({
+ type: 'interval',
+ axis: {
+ x: { labelFormatter: '%0' },
+ y: { tickCount: 5 },
+ },
+});
+```
+
+```js
+// API
+// First method
+chart
+ .interval()
+ .axis('x', { labelFormatter: '%0' })
+ .axis('y', { tickCount: 5 });
+
+// Second method
+chart.interval().axis({
+ x: { labelFormatter: '%0' },
+ y: { tickCount: 5 },
+});
+```
+
+The axis can also be configured at the view level:
+
+```js
+({
+ type: 'view',
+ axis: {
+ x: { labelFormatter: '%0' },
+ y: { tickCount: 5 },
+ },
+});
+```
+
+```js
+// API
+// First method
+chart.axis('x', { labelFormatter: '%0' }).axis('y', { tickCount: 5 });
+
+// Second method
+chart.axis({
+ x: { labelFormatter: '%0' },
+ y: { tickCount: 5 },
+});
+```
+
+## Labeling Axis
+
+In G2, each mark has its own axis. If the scale corresponding to the mark is synchronized, the axes will be merged.
+
+## View Axis
+
+The axis has transitivity. The axis declared on the view will be passed to the marks declared by `children`. If the mark has an axis for the corresponding channel, it will be merged; otherwise, it will not be affected.
+
+## Hiding Axis
+
+Hide the axis of each channel:
+
+```js
+({
+ type: 'interval',
+ axis: { y: false }, // Hide the y-axis
+});
+```
+
+Hide multiple axes:
+
+```js
+({
+ type: 'interval',
+ axis: false,
+});
+```
\ No newline at end of file
diff --git a/site/docs/manual/core/composition.en.md b/site/docs/manual/core/composition.en.md
index 2a806befb0..9454562499 100644
--- a/site/docs/manual/core/composition.en.md
+++ b/site/docs/manual/core/composition.en.md
@@ -3,4 +3,233 @@ title: Composition
order: 7
---
-
+In G2, **View Composition** provides the ability to draw multiple charts in a single visualization. G2 defines a **view graph** to describe a **multi-view plot**.
+
+```js
+({
+ type: 'spaceLayer',
+ children: [{ type: 'view' }, { type: 'view' }],
+});
+```
+
+```js
+// API
+const layer = chart.spaceLayer();
+
+layer.view();
+
+layer.view();
+```
+
+## Space
+
+The most basic way of view composition is **Space Composition**, which is simply a division of space.
+
+A more common way of composition is `composition.spaceLayer`: overlaying multiple charts together, using scenarios where these views have different coordinate systems, such as the bar and pie charts below.
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ const layer = chart.spaceLayer();
+
+ // Bar chart
+ layer
+ .interval()
+ .data([
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Other', sold: 150 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Strategy', sold: 115 },
+ ])
+ .encode('x', 'genre')
+ .encode('y', 'sold');
+
+ // Pie chart
+ layer
+ .interval() // Create an interval
+ .attr('paddingLeft', 300) // Setting position
+ .attr('paddingBottom', 250)
+ .coordinate({ type: 'theta' }) // Specify coordinate system
+ .transform({ type: 'stackY' })
+ .data([
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Other', sold: 150 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Strategy', sold: 115 },
+ ])
+ .encode('y', 'sold')
+ .encode('color', 'genre')
+ .legend('color', false);
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+You can also use `composition.spaceFlex` to arrange views horizontally or vertically.
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+ const flex = chart.spaceFlex();
+
+ // Bar chart
+ flex
+ .interval()
+ .data([
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Other', sold: 150 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Strategy', sold: 115 },
+ ])
+ .encode('x', 'genre')
+ .encode('y', 'sold');
+
+ // Pie chart
+ flex
+ .interval() // Create an interval
+ .coordinate({ type: 'theta' }) // Specify coordinate system
+ .transform({ type: 'stackY' })
+ .data([
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Other', sold: 150 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Strategy', sold: 115 },
+ ])
+ .encode('y', 'sold')
+ .encode('color', 'genre')
+ .legend('color', false);
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+Also, these composition methods can be nested, so it's easy to implement a report through a separate statement.
+
+## Facet
+
+**Facet Composition** differs from Space Composition in that it also partitions the data, with each view presenting a subset of the original data.
+
+```js | ob
+(() => {
+ const chart = new G2.Chart({
+ height: 260,
+ width: 800,
+ paddingLeft: 40,
+ paddingBottom: 50,
+ });
+
+ const facetRect = chart
+ .facetRect()
+ .data({
+ type: 'fetch',
+ value: 'https://assets.antv.antgroup.com/g2/anscombe.json',
+ })
+ // Partition the data based on the 'series' field,
+ // and arrange them in the x direction
+ .encode('x', 'series');
+
+ facetRect
+ .point()
+ .attr('padding', 'auto')
+ .attr('inset', 10)
+ .encode('x', 'x')
+ .encode('y', 'y')
+ .style('stroke', '#000');
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+## Repeat
+
+**Repeat Composition** differs from facet in that each view shows the full amount of data, but with repeated encoding to create multiple views.
+
+```js | ob
+(() => {
+ const chart = new G2.Chart({
+ width: 900,
+ height: 900,
+ padding: 'auto',
+ paddingLeft: 55,
+ paddingBottom: 45,
+ });
+
+ const repeatMatrix = chart
+ .repeatMatrix()
+ .data({
+ type: 'fetch',
+ value: 'https://assets.antv.antgroup.com/g2/penguins.json',
+ // Data processing
+ })
+ // Specify the encodings to be repeated
+ // A total of 4 * 4 = 16 views will be generated
+ // The x and y encodings of each view are the cross product of the following fields
+ .encode('position', [
+ 'culmen_length_mm',
+ 'culmen_depth_mm',
+ 'flipper_length_mm',
+ 'body_mass_g',
+ ]);
+
+ repeatMatrix.point().attr('padding', 'auto').encode('color', 'species');
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+## Time
+
+**Time Composition** manages views in space and is used for animation.
+
+```js | ob
+(async () => {
+ const data = await fetch(
+ 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+ ).then((res) => res.json());
+
+ const chart = new G2.Chart();
+
+ // Refer to css animation description
+ const keyframe = chart
+ .timingKeyframe() // Create container
+ .attr('iterationCount', 2)
+ .attr('direction', 'alternate')
+ .attr('duration', 1000);
+
+ keyframe
+ .interval()
+ .transform({ type: 'groupX', y: 'mean' })
+ .data(data)
+ .encode('x', 'gender')
+ .encode('y', 'weight')
+ .encode('color', 'gender')
+ .encode('key', 'gender'); // Specify key
+
+ keyframe
+ .point()
+ .data(data)
+ .encode('x', 'height')
+ .encode('y', 'weight')
+ .encode('color', 'gender')
+ .encode('shape', 'point')
+ .encode('groupKey', 'gender'); // Specify groupKey
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
diff --git a/site/docs/manual/core/interaction.en.md b/site/docs/manual/core/interaction.en.md
index 09685661be..f1e27bd23c 100644
--- a/site/docs/manual/core/interaction.en.md
+++ b/site/docs/manual/core/interaction.en.md
@@ -3,4 +3,181 @@ title: Interaction
order: 8
---
-
+In G2, **Interaction** provides the ability to explore data as needed.
+
+Interaction can be set at the view level:
+
+```js
+({
+ type: 'view',
+ interaction: {
+ tooltip: {},
+ brushHighlight: {},
+ },
+});
+```
+
+```js
+// API
+// First method
+chart.interaction('tooltip', {}).interaction('brushHighlight', {});
+
+// Second method
+chart.interaction({
+ tooltip: {},
+ brushHighlight: {},
+});
+```
+
+Interaction can also be set at the mark level:
+
+```js
+({
+ type: 'interval',
+ interaction: {
+ tooltip: {},
+ brushHighlight: {},
+ },
+});
+```
+
+```js
+// API
+//First method
+chart.interval().interaction('tooltip', {}).interaction('brushHighlight', {});
+
+//Second method
+chart.interval().interaction({
+ tooltip: {},
+ brushHighlight: {},
+});
+```
+
+## View Level Interaction
+
+G2's interactions are effective for each view. If you want to turn off the interaction, you can do as follows:
+
+
+```js
+({
+ type: 'view',
+ interaction: {
+ tooltip: false,
+ brushHighlight: false,
+ },
+});
+```
+
+## Mark Level Interaction
+
+Interaction has a bubbling nature. The view interaction will be overridden by the interaction set by its mark, and the coordinate system corresponding to the last mark has the highest priority.
+
+
+```js
+chart.interaction('elementHighlight', { link: true, background: true });
+chart.line().interaction('elementHighlight', { link: false });
+chart.area().interaction('elementHighlight', { background: false });
+```
+
+This is equivalent to the following situation:
+
+```js
+chart.interaction('elementHighlight', { link: false, background: false });
+chart.line();
+chart.area():
+```
+
+## Interaction State
+
+In G2, you can set the interaction state of the mark through `mark.state`, such as setting the select and unselect states as follows. When using elementSelect, these two states will be consumed.
+
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ chart
+ .interval()
+ .data({
+ type: 'fetch',
+ value:
+ 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ })
+ .transform({ type: 'sortX', by: 'y', reverse: true })
+ .encode('x', 'letter')
+ .encode('y', 'frequency')
+ .axis('y', { labelFormatter: '.0%' })
+ .state({
+ selected: { fill: '#f4bb51' }, // set selected state
+ unselected: { opacity: 0.6 }, // set unselected state
+ })
+ .interaction('elementSelect', true);
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+In addition to selected and unselected, there are the following built-in state types:
+
+- active
+- inactive
+
+## Custom Interaction
+
+If the built-in interaction cannot meet your needs, you can also implement some interactions through custom interaction. Here is a custom highlight interaction.
+
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ chart
+ .interval()
+ .data({
+ type: 'fetch',
+ value:
+ 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ })
+ .transform({ type: 'sortX', by: 'y', reverse: true })
+ .encode('x', 'letter')
+ .encode('y', 'frequency')
+ .axis('y', { labelFormatter: '.0%' })
+ .state({
+ selected: { fill: '#f4bb51' }, // set selected state
+ unselected: { opacity: 0.6 }, // set unselected state
+ })
+ .interaction('elementSelect', true);
+
+ // Bind interaction after rendering
+ chart.render().then((chart) => {
+ // Get G Canvas instance
+ const { canvas } = chart.getContext();
+
+ // Find graphic elements
+ const elements = canvas.document.getElementsByClassName(
+ G2.ELEMENT_CLASS_NAME,
+ );
+
+ // Highlight
+ for (const element of elements) {
+ element.addEventListener('mouseenter', () => {
+ element.style._fill = element.style.fill;
+ element.style.fill = 'red';
+ });
+
+ element.addEventListener('mouseleave', () => {
+ element.style.fill = element.style._fill;
+ });
+ }
+ });
+
+ return chart.getContainer();
+})();
+```
+
+## Interaction Syntax
+
+> Interaction syntax is still under design...
+
diff --git a/site/docs/manual/core/legend.en.md b/site/docs/manual/core/legend.en.md
index eed5af96fd..0a25090ae5 100644
--- a/site/docs/manual/core/legend.en.md
+++ b/site/docs/manual/core/legend.en.md
@@ -2,3 +2,69 @@
title: Legend
order: 7.2
---
+
+In G2, the **Legend** can be understood as the visualization of the non-spatial channel (color, opacity, size, shape) corresponding to the scale.
+
+The legend can be configured at the mark level:
+
+```js
+({
+ type: 'interval',
+ legend: {
+ color: {},
+ size: {},
+ },
+});
+```
+
+```js
+// API
+// First method
+chart.interval().legend('color', {}).legend('size', {});
+
+// Second method
+chart.interval().legend({
+ color: {},
+ size: {},
+});
+```
+
+Legends can also be configured at the view level:
+
+```js
+({
+ type: 'view',
+ legend: {
+ color: {},
+ size: {},
+ },
+});
+```
+
+## Mark Legend
+
+In G2, each mark has its own legend. If the scale corresponding to the mark is synchronized, the legends will be merged.
+
+## View Legend
+
+The legend has transitivity. The legend declared on the view will be passed to the `children` declared mark. If the mark has a corresponding channel legend, it will be merged; otherwise, it will not be affected.
+
+## Hide Legend
+
+Hide the legend of each channel:
+
+```js
+({
+ type: 'interval',
+ legend: { color: false }, // Hide the legend of the color channel
+});
+```
+
+Hide multiple legends:
+
+```js
+({
+ type: 'interval',
+ legend: false,
+});
+```
diff --git a/site/docs/manual/core/scrollbar.en.md b/site/docs/manual/core/scrollbar.en.md
index ea26dcf180..4f6e1e6aad 100644
--- a/site/docs/manual/core/scrollbar.en.md
+++ b/site/docs/manual/core/scrollbar.en.md
@@ -2,3 +2,49 @@
title: Scrollbar
order: 7.3
---
+
+In G2, the **Scrollbar** can be used to filter data, and it can be bound with the x or y channel. By default, the scrollbar is turned off.
+
+The scrollbar can be configured at the mark level:
+
+```js
+({
+ type: 'interval',
+ scrollbar: {
+ x: {},
+ y: {},
+ },
+});
+```
+
+```js
+// API
+// First method
+chart.interval().scrollbar('x', {}).scrollbar('y', {});
+
+// Second method
+chart.interval().scrollbar({
+ x: {},
+ y: {},
+});
+```
+
+The scrollbar can also be configured at the view level:
+
+```js
+({
+ type: 'view',
+ scrollbar: {
+ x: {},
+ y: {},
+ },
+});
+```
+
+## Mark Scrollbar
+
+In G2, each mark has its own scrollbar. If the scale corresponding to the mark is synchronized, the scrollbars will also merge.
+
+## View Scrollbar
+
+The scrollbar has transitivity. The scrollbar declared on the view will be passed to the `children` declared mark. If this mark has a corresponding channel scrollbar, it will merge; otherwise, it will not effect.
\ No newline at end of file
diff --git a/site/docs/manual/core/slider.en.md b/site/docs/manual/core/slider.en.md
index 23e4d966d6..724bba73d4 100644
--- a/site/docs/manual/core/slider.en.md
+++ b/site/docs/manual/core/slider.en.md
@@ -2,3 +2,50 @@
title: Slider
order: 7.4
---
+
+In G2, the **Slider** can be used to filter data, and it can be bound with the x or y channel. By default, the slider is turned off.
+
+The slider can be configured at the mark level:
+
+
+```js
+({
+ type: 'interval',
+ slider: {
+ x: {},
+ y: {},
+ },
+});
+```
+
+```js
+// API
+// First method
+chart.interval().slider('x', {}).slider('y', {});
+
+// Second method
+chart.interval().slider({
+ x: {},
+ y: {},
+});
+```
+
+The slider can also be configured at the view level:
+
+```js
+({
+ type: 'view',
+ slider: {
+ x: {},
+ y: {},
+ },
+});
+```
+
+## Mark Slider
+
+In G2, each mark has its own slider. If the scale corresponding to the mark is synchronized, the sliders will also merge.
+
+## View Slider
+
+The slider has transitivity. The slider declared on the view will be passed to the mark declared by `children`. If this mark has a slider for the corresponding channel, they will merge; otherwise, it will not be affected.
\ No newline at end of file
diff --git a/site/docs/manual/core/theme.en.md b/site/docs/manual/core/theme.en.md
index ac7cc33469..3b067e8ba8 100644
--- a/site/docs/manual/core/theme.en.md
+++ b/site/docs/manual/core/theme.en.md
@@ -3,4 +3,130 @@ title: Theme
order: 9
---
-
+In G2, **Theme** refers to the default styles of the graphics in a chart.
+
+Themes can be configured at the view level:
+
+```js
+({
+ type: 'view',
+ theme: {},
+});
+```
+
+```js
+// API
+chart.theme({});
+```
+
+Themes can also be configured at the mark level:
+
+```js
+({
+ type: 'interval',
+ theme: {},
+});
+```
+
+```js
+// API
+chart.interval().theme({});
+```
+
+## Switching Themes
+
+G2 provides built-in themes that can be switched using the `type` property.
+
+
+```js
+chart.theme({ type: 'classicDark' }); // use the dark theme
+```
+
+## Custom Themes
+
+There are two ways to customize the theme, the first is to specify in theme that you want to override certain theme styles:
+
+```js
+const theme = {};
+
+// Spec format
+const options = {
+ theme: {
+ type: 'light',
+ ...theme,
+ },
+};
+
+// API format
+chart.theme({ type: 'light', ...theme });
+```
+
+The following example overrides the default color of the light theme:
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ chart.options({
+ type: 'interval',
+ data: {
+ type: 'fetch',
+ value:
+ 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ },
+ encode: { x: 'letter', y: 'frequency' },
+ axis: { y: { labelFormatter: '.0%' } },
+ theme: {
+ color: 'red', // Set the default color to red
+ },
+ });
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+If you want to customize all theme styles, you can add a new theme, override the default theme, register it, and then use it.
+
+```js | ob
+(() => {
+ // define the theme
+ function CustomTheme() {
+ const light = G2.Light();
+ return { ...light, color: 'red' };
+ }
+
+ // register the theme
+ G2.register('theme.custom', CustomTheme);
+
+ const chart = new G2.Chart();
+
+ chart.options({
+ type: 'interval',
+ data: {
+ type: 'fetch',
+ value:
+ 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ },
+ encode: { x: 'letter', y: 'frequency' },
+ axis: { y: { labelFormatter: '.0%' } },
+ theme: { type: 'custom' }, // use the theme
+ });
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+The default themes included are:
+
+- `G2.Light`
+- `G2.Dark`
+- `G2.Classic`
+- `G2.ClassicDark`
+- `G2.Academy`
+
+For a complete theme configuration, you can refer to the [light](https://github.com/antvis/G2/blob/v5/src/theme/light.ts) theme.
+
diff --git a/site/docs/manual/core/tooltip.en.md b/site/docs/manual/core/tooltip.en.md
index ee97081de6..85e81015d8 100644
--- a/site/docs/manual/core/tooltip.en.md
+++ b/site/docs/manual/core/tooltip.en.md
@@ -3,4 +3,311 @@ title: Tooltip
order: 7.5
---
-
+In G2, the **Tooltip** can provide additional information about data points, helping users better understand and interpret visualization. In visualization, Tooltip usually has the following roles:
+
+- **Display detailed information**: Tooltip can display detailed information about data points, such as specific values, percentages, or other related attributes. This helps users understand the data more deeply.
+- **Improve readability**: In complex visualizations, Tooltip can help users more easily identify and understand data points. For example, in a scatter plot, when data points are dense, Tooltip can display detailed information of a specific point without having to hover the mouse over each point.
+- **Enhance interactivity**: Tooltip can enhance the interactivity of visualization. Users can view more information by hovering over or clicking on data points, making the visualization more dynamic and interesting.
+- **Highlight key information**: Tooltip can be used to highlight key information. For example, in a time series chart, you can use Tooltip to display important events or mutations at specific time points.
+
+In G2, you can specify the tooltip information that this mark needs to display through `mark.tooltip`.
+
+```js
+({
+ type: 'interval',
+ tooltip: {
+ title: 'name', // title
+ items: ['genre'], // data items
+ },
+});
+```
+
+```js
+// API
+chart.interval().tooltip({
+ title: 'name', // title
+ items: ['genre'], // data items
+});
+```
+
+And combine `view.interaction.tooltip` to configure the rendering and additional configuration of tooltip information.
+
+```js
+({
+ type: 'view',
+ interaction: {
+ tooltip: { series: true },
+ },
+});
+```
+
+```js
+// API
+chart.interaction('tooltip', { series: true });
+```
+
+When there is only one mark in this view, you can also configure the rendering and additional configuration of tooltip information through `mark.interaction.tooltip`.
+
+```js
+({
+ type: 'line',
+ interaction: {
+ tooltip: { series: true },
+ },
+});
+```
+
+```js
+// API
+chart.line().interaction('tooltip', { series: true });
+```
+
+## Setting Tooltip Content
+
+Different marks have different default tooltip information, you can override the default content through `mark.tooltip(tooltipData)`. The complete structure of tooltipData is as follows:
+
+```js
+({
+ type: 'interval',
+ data: [
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Strategy', sold: 115 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Other', sold: 150 },
+ ],
+ tooltip: {
+ title: (d) => (d.sold > 150 ? 'high' : 'low'), // set title
+ items: [
+ 'genre', // First item
+ 'sold', // Second item
+ ],
+ },
+});
+```
+
+When you don't need to set the title, you can directly declare it as an array:
+
+```js
+({
+ type: 'interval',
+ tooltip: ['genre', 'sold'],
+});
+```
+
+```js
+// API
+// First method
+chart.interval().tooltip('genre').tooltip('sold');
+
+// Second method
+chart.interval().tooltip(['genre', 'sold']);
+```
+
+The complete structure of title and item is as follows:
+
+```ts
+type Item = {
+ color?: string; // color of the marker
+ name?: string; // name of the item
+ value?: string; // value of the item
+};
+```
+
+They can be set in the following ways.
+
+### Field
+
+Their values can come from the original data, specified by a string or `item.field`.
+
+```js
+({
+ tooltip: {
+ title: 'sold',
+ items: ['genre'],
+ },
+});
+```
+
+```js
+// Equivalent to
+({
+ tooltip: {
+ title: 'sold',
+ items: [{ field: 'genre' }],
+ },
+});
+```
+
+### Channel
+
+Their values can come from channel values, specified by `item.channel`, often used for charts that generate new channels using `mark.transform`.
+
+```js
+({
+ tooltip: {
+ title: { channel: 'x' },
+ items: [{ channel: 'y' }],
+ },
+});
+```
+
+### Formatting
+
+You can specify the display of the title or item value through `item.valueFormatter`, which can be a function or a string supported by d3-format.
+
+```js
+({
+ tooltip: {
+ items: [{ channel: 'y', valueFormatter: '.0%' }],
+ },
+});
+```
+
+### Customization
+
+Of course, for title and item, callbacks are also provided to achieve the greatest customization ability.
+
+```js
+({
+ tooltip: {
+ items: [
+ (d, index, data, column) => ({
+ color: d.sold > 150 ? 'red' : 'blue', // specify the color of the item
+ name: index === 0 ? d.genre : `${d.genre} ${data[i].genre}`, // specify the name of the item
+ value: column.y.value[i], // use the value of the y channel
+ }),
+ ],
+ },
+});
+```
+
+## Built-in Tooltip
+
+G2 opens Tooltip interaction by default. If you need to configure Tooltip properties, you can do so through `chart.interaction.tooltip`.
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ chart
+ .line()
+ .data([
+ { year: '1991', value: 3 },
+ { year: '1992', value: 4 },
+ { year: '1993', value: 3.5 },
+ { year: '1994', value: 5 },
+ { year: '1995', value: 4.9 },
+ { year: '1996', value: 6 },
+ { year: '1997', value: 7 },
+ { year: '1998', value: 9 },
+ { year: '1999', value: 13 },
+ ])
+ .encode('x', 'year')
+ .encode('y', 'value')
+ .interaction('tooltip', {
+ crosshairsStroke: 'red',
+ crosshairsStrokeWidth: 4,
+ });
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```
+
+## Disabling Tooltip
+
+If you don't want to display the tooltip information for this Mark, you can do so through `mark.tooltip`.
+
+```js
+({
+ type: 'interval',
+ tooltip: false,
+});
+```
+
+```js
+chart.interval().tooltip(false);
+```
+
+If you don't want the chart to have tooltip interaction, you can do so through `chart.interaction`.
+
+```js
+({
+ type: 'view',
+ interaction: { tooltip: false },
+});
+```
+
+```js
+chart.interaction('tooltip', false);
+```
+
+## Setting Tooltip Style
+
+```js | ob
+(() => {
+ const chart = new G2.Chart();
+
+ chart.options({
+ type: 'interval',
+ data: {
+ type: 'fetch',
+ value:
+ 'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
+ format: 'csv',
+ },
+ encode: {
+ x: 'state',
+ y: 'population',
+ color: 'age',
+ },
+ transform: [
+ { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+ { type: 'dodgeX' },
+ ],
+ legend: false,
+ interaction: {
+ tooltip: {
+ shared: true,
+ mount: 'body',
+ css: {
+ '.g2-tooltip': {
+ background: '#eee',
+ 'border-radius': ' 0.25em !important',
+ },
+ '.g2-tooltip-title': {
+ 'font-size': '20px',
+ 'font-weight': 'bold',
+ 'padding-bottom': '0.25em',
+ },
+ '.g2-tooltip-list-item': {
+ background: '#ccc',
+ padding: '0.25em',
+ margin: '0.25em',
+ 'border-radius': '0.25em',
+ },
+ '.g2-tooltip-list-item-name-label': {
+ 'font-weight': 'bold',
+ 'font-size': '16px',
+ },
+ 'g2-tooltip-list-item-marker': {
+ 'border-radius': '0.25em',
+ width: '15px',
+ height: '15px',
+ },
+ '.g2-tooltip-list-item-value': {
+ 'font-weight': 'bold',
+ 'font-size': '16px',
+ },
+ },
+ },
+ },
+ });
+
+ chart.render();
+
+ return chart.getContainer();
+})();
+```