Data Visualization Grammar

https://g2.antv.antgroup.com/en/manual/core
Admin
This documentation describes the concepts and APIs of a data visualization grammar, covering aspects...
Tokens:236,577
Snippets:1,789
Trust Score:9.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Initial Interval Chart Setup

Source: https://g2.antv.antgroup.com/en/manual/core/data/overview

This snippet shows the basic setup for an interval chart with initial data.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


const interval = chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold');


chart.render();

```

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

### Point Scale Example

Source: https://g2.antv.antgroup.com/en/manual/core/scale/point

Demonstrates how to use the point scale to distribute discrete data. This example uses an interval chart with data transformation for binning.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'interval',
  autoFit: true,
  height: 500,
  data: [
    1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7, 8.3, 8.6, 8.8,
    9.1, 9.2, 9.4, 9.5, 9.7, 10.5, 10.7, 10.8, 11, 11, 11.1, 11.2, 11.3, 11.4,
    11.4, 11.7, 12, 12.9, 12.9, 13.3, 13.7, 13.8, 13.9, 14, 14.2, 14.5, 15,
    15.2, 15.6, 16, 16.3, 17.3, 17.5, 17.9, 18, 18, 20.6, 21, 23.4,
  ],
  encode: { x: (d) => d, y: 'count' },
  transform: [{ type: 'binX', y: 'count', thresholds: 10 }],
  scale: { x: { type: 'point' } },
  style: { columnWidthRatio: 1, inset: 0.5 },
});


chart.render();

```

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

### Basic Fisheye Example

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/fisheye

A basic example demonstrating how to initialize a G2 chart with fisheye interaction enabled. This snippet requires the Chart import from '@antv/g2'.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: {
    x: 'weight',
    y: 'height',
    color: 'gender',
  },
  interaction: { fisheye: true },
});


chart.render();

```

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

### Complete G2 View Configuration Example

Source: https://g2.antv.antgroup.com/en/manual/core/view

This example demonstrates a comprehensive configuration for a G2 View, including data, encoding, scales, coordinates, styles, axes, legends, tooltips, interactions, themes, and child marks. It shows how to set up a view with an interval and a line mark.

```javascript
({ 
  type: 'view',
  data: [
    { type: 'A', value: 30 },
    { type: 'B', value: 50 },
    { type: 'C', value: 20 },
  ],
  encode: { x: 'type', y: 'value' },
  scale: { y: { nice: true } },
  coordinate: { type: 'rect' },
  style: { viewFill: '#f5f5f5' },
  axis: { y: { grid: true } },
  legend: { color: { position: 'top' } },
  tooltip: {
    title: { field: 'type' },
    items: [{ field: 'value' }],
  },
  interaction: { elementHighlight: true },
  theme: { color: ['#5B8FF9', '#5AD8A6', '#5D7092'] },
  children: [
    { type: 'interval' },
    { type: 'line', style: { stroke: '#faad14' } },
  ],
});
```

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

### Complete Dark Theme Configuration Example for Line Chart

Source: https://g2.antv.antgroup.com/en/manual/core/theme/classic-dark

A comprehensive example demonstrating the classic dark theme with specific configurations for view background, plot background, and axis styles for a line chart. This ensures optimal visual presentation.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({ container: 'container' });


chart.options({
  type: 'line',
  theme: {
    type: 'classicDark',
    view: { viewFill: '#0f0f0f', plotFill: '#1a1a1a' },
  },
  data: [
    { year: '2018', value: 30 },
    { year: '2019', value: 40 },
    { year: '2020', value: 35 },
    { year: '2021', value: 50 },
    { year: '2022', value: 49 },
    { year: '2023', value: 70 },
  ],
  encode: { x: 'year', y: 'value' },
  style: { stroke: '#60a5fa', lineWidth: 3 },
  axis: {
    x: {
      grid: true,
      gridStroke: '#fff',
      gridLineWidth: 2,
      labelFill: '#d1d5db',
    },
    y: {
      grid: true,
      gridStroke: '#fff',
      gridLineWidth: 2,
      labelFill: '#d1d5db',
    },
  },
});


chart.render();

```

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

### 3D Cartesian Coordinate System Example

Source: https://g2.antv.antgroup.com/en/manual/core/coordinate/overview

Demonstrates how to create a 3D chart using the 'cartesian3D' coordinate system. Includes setup for WebGL rendering, 3D plugins, and configuring chart options for 3D data encoding and axes. Useful for visualizing data with three dimensions.

```javascript
import { CameraType } from '@antv/g';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';
import { Plugin as ThreeDPlugin, DirectionalLight } from '@antv/g-plugin-3d';
import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
import { Runtime, corelib, extend } from '@antv/g2';
import { threedlib } from '@antv/g2-extension-3d';


// Create a WebGL renderer.
const renderer = new WebGLRenderer();
renderer.registerPlugin(new ThreeDPlugin());
renderer.registerPlugin(new ControlPlugin());


// Customize our own Chart with threedlib.
const Chart = extend(Runtime, { ...corelib(), ...threedlib() });
const chart = new Chart({
  container: 'container',
  renderer,
  depth: 400, // Define the depth of chart.
});


chart.options({
  type: 'point3D',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/2c813e2d-2276-40b9-a9af-cf0a0fb7e942.csv',
  },
  encode: {
    x: 'Horsepower',
    y: 'Miles_per_Gallon',
    z: 'Weight_in_lbs',
    color: 'Origin',
    shape: 'cube',
  },
  coordinate: { type: 'cartesian3D' },
  scale: {
    x: {
      nice: true,
    },
    y: {
      nice: true,
    },
    z: {
      nice: true,
    },
  },
  legend: false,
  axis: {
    x: {
      gridLineWidth: 2,
    },
    y: {
      gridLineWidth: 2,
      titleBillboardRotation: -Math.PI / 2,
    },
    z: {
      gridLineWidth: 2,
    },
  },
});


chart.render().then(() => {
  const { canvas } = chart.getContext();
  const camera = canvas.getCamera();
  camera.setType(CameraType.ORBITING);


  // Add a directional light into scene.
  const light = new DirectionalLight({
    style: {
      intensity: 3,
      fill: 'white',
      direction: [-1, 0, 1],
    },
  });
  canvas.appendChild(light);
});

```

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

### Basic Legend Highlight Setup

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/legend-highlight

Demonstrates how to initialize a G2 chart and enable the legendHighlight interaction with default settings.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart
  .interval()
  .data(profit)
  .axis('y', { labelFormatter: '~s' })
  .encode('x', 'month')
  .encode('y', ['end', 'start'])
  .encode(
    'color',
    d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
  )
  .state('inactive', { opacity: 0.5 })
  .legend('color', { 
    state: { inactive: { labelOpacity: 0.5, markerOpacity: 0.5 } }, 
  });


chart.interaction('legendHighlight', true);


chart.render();
```

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

### Example: Basic Legend Highlight Functionality

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/legend-highlight

A complete G2 chart example demonstrating the basic functionality of the legendHighlight interaction.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'interval',
  autoFit: true,
  height: 300,
  data: [
    { name: 'London', month: 'Jan.', value: 18.9 },
    { name: 'London', month: 'Feb.', value: 28.8 },
    { name: 'London', month: 'Mar.', value: 39.3 },
    { name: 'London', month: 'Apr.', value: 81.4 },
    { name: 'London', month: 'May', value: 47 },
    { name: 'London', month: 'Jun.', value: 20.3 },
    { name: 'London', month: 'Jul.', value: 24 },
    { name: 'London', month: 'Aug.', value: 35.6 },
    { name: 'Berlin', month: 'Jan.', value: 12.4 },
    { name: 'Berlin', month: 'Feb.', value: 23.2 },
    { name: 'Berlin', month: 'Mar.', value: 34.5 },
    { name: 'Berlin', month: 'Apr.', value: 99.7 },
    { name: 'Berlin', month: 'May', value: 52.6 },
    { name: 'Berlin', month: 'Jun.', value: 35.5 },
    { name: 'Berlin', month: 'Jul.', value: 37.4 },
    { name: 'Berlin', month: 'Aug.', value: 42.4 },
  ],
  encode: {
    x: 'month',
    y: 'value',
    color: 'name',
  },
  transform: [
    {
      type: 'dodgeX',
      groupBy: 'x',
      orderBy: 'value',
      padding: 0.1,
    },
  ],
  interaction: {
    legendHighlight: {
      series: true,
    },
  },
  state: { inactive: { opacity: 0.5 } },
});


chart.render();
```

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

### Basic Vector Layer Configuration

Source: https://g2.antv.antgroup.com/en/manual/core/mark/vector

Demonstrates the basic setup for a vector layer, including data, encoding, and rendering. Ensure the container element exists in your HTML.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'vector',
  data: [
    { longitude: 3.375, latitude: 45.625, u: -1.3287959, v: -2.6778967 },
    { longitude: 3.625, latitude: 45.625, u: -1.012322, v: -2.8640392 },
    { longitude: 3.875, latitude: 45.625, u: -0.7947747, v: -3.0722558 },
    { longitude: 4.125, latitude: 45.625, u: -0.70024896, v: -3.311115 },
    { longitude: 4.375, latitude: 45.625, u: -0.62092346, v: -3.5720115 },
    { longitude: 4.625, latitude: 45.625, u: -0.54210645, v: -3.798527 },
    { longitude: 4.875, latitude: 45.625, u: -0.531152, v: -3.6907976 },
    { longitude: 5.125, latitude: 45.625, u: -0.58284736, v: -3.2739944 },
    { longitude: 5.375, latitude: 45.625, u: -0.6388908, v: -2.8400586 },
    { longitude: 5.625, latitude: 45.625, u: -0.68683237, v: -2.4499083 },
    { longitude: 5.875, latitude: 45.625, u: -0.6949226, v: -2.2482452 },
    { longitude: 6.125, latitude: 45.625, u: -0.67617714, v: -2.189318 },
    { longitude: 6.375, latitude: 45.625, u: -0.6690367, v: -2.1100578 },
    { longitude: 6.625, latitude: 45.625, u: -0.6749189, v: -2.0985062 },
    { longitude: 6.875, latitude: 45.625, u: -0.61023676, v: -2.067676 },
    { longitude: 7.125, latitude: 45.625, u: -0.46769565, v: -1.9350243 },
    { longitude: 7.375, latitude: 45.625, u: -0.31841764, v: -1.7978805 },
    { longitude: 7.625, latitude: 45.625, u: -0.296789, v: -1.6545589 },
    { longitude: 7.875, latitude: 45.625, u: -0.49164182, v: -1.6660733 },
    { longitude: 8.125, latitude: 45.625, u: -0.7730643, v: -1.8458021 },
    { longitude: 8.375, latitude: 45.625, u: -1.0214152, v: -2.0177982 },
    { longitude: 8.625, latitude: 45.625, u: -1.131555, v: -2.0604942 },
    { longitude: 8.875, latitude: 45.625, u: -1.143751, v: -1.9134171 },
    { longitude: 9.125, latitude: 45.625, u: -1.1628431, v: -1.6859006 },
    { longitude: 9.375, latitude: 45.625, u: -1.1996219, v: -1.4945693 },
    { longitude: 9.625, latitude: 45.625, u: -1.2651129, v: -1.385864 },
    { longitude: 9.875, latitude: 45.625, u: -1.340052, v: -1.3189282 },
  ],
  encode: {
    x: 'longitude',
    y: 'latitude',
    rotate: ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI,
    size: 30,
    color: ({ u, v }) => Math.hypot(v, u),
  },
  scales: {
    size: { range: [6, 20] },
    color: { type: 'sequential', palette: 'viridis' },
  },
  axis: {
    x: { grid: false },
    y: { grid: false },
  },
  style: {
    arrowSize: 10,
  },
  legend: false,
});


chart.render();

```

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

### Declarative Quantize Scale Example

Source: https://g2.antv.antgroup.com/en/manual/core/scale/quantize

Demonstrates using G2's declarative syntax (G2Spec) to configure a quantize scale for mapping continuous data to discrete color intervals. This example creates a heatmap with custom legend formatting and grid layout.

```javascript
const spec = {
  type: 'cell',
  width: 900,
  height: 300,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
  },
  scale: {
    color: {
      type: 'quantize',
      range: ['#eeeeee', '#ffc3ce', '#ff0d0d'], // Define three color intervals
    },
  },
  legend: {
    color: {
      labelFormatter: '.0s', // Format legend labels
    },
  },
  encode: {
    y: (_, i) => (i % 5) + 1,
    x: (_, i) => ((i / 5) | 0) + 1,
    color: 'salary', // Map salary data to color channel
  },
  style: {
    stroke: '#000',
    inset: 2,
  },
};


// Create a container element
const container = document.createElement('div');


// Render using Chart
const chart = new G2.Chart(container);
chart.options(spec);
chart.render();

```

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

### Repeat Composition Example

Source: https://g2.antv.antgroup.com/en/manual/core/composition/overview

Illustrates using repeatMatrix to generate multiple views where each view displays the full dataset but with repeated encodings. This example creates a 4x4 matrix of views.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
  width: 900,
  height: 900,
  padding: 'auto',
  paddingLeft: 55,
  paddingBottom: 45,
});


chart.options({
  type: 'repeatMatrix',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/penguins.json',
    // Data processing
  },
  // Specify the encoding to repeat
  // A total of 4 * 4 = 16 views will be generated
  // The x and y encoding of each view is the cross product of the following fields
  encode: {
    position: [
      'culmen_length_mm',
      'culmen_depth_mm',
      'flipper_length_mm',
      'body_mass_g',
    ],
  },
  children: [
    {
      type: 'point',
      padding: 'auto',
      encode: { color: 'species' },
    },
  ],
});


chart.render();

```

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

### Configure brushYHighlight with Options

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/brush-y-highlight

Shows how to configure the brushYHighlight interaction by passing configuration options, specifically enabling `series: true`. This example is for a line chart.

```javascript
({ 
  type: 'line',
  interaction: {
    brushYHighlight: {
      series: true,
    },
  },
});
```

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

### Complete Example: Custom Triangle Shape for Interval Chart

Source: https://g2.antv.antgroup.com/en/manual/core/mark/overview

This example demonstrates defining a custom triangle shape, registering it, and using it in an interval chart to visualize data.

```javascript
import { register, Chart } from '@antv/g2';


// Define graphic component
function ShapeTriangle(style, context) {
  const { document } = context;
  return (P, value, defaults) => {
    const { color: defaultColor } = defaults;
    const [p0, p1, p2, p3] = P;
    const pm = [(p0[0] + p1[0]) / 2, p0[1]];
    const { color = defaultColor } = value;
    return document.createElement('polygon', {
      style: {
        ...style,
        fill: color,
        points: [pm, p2, p3],
      },
    });
  };
}


// Register the triangle
register('shape.interval.triangle', ShapeTriangle);


// Initialize chart


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: {
    x: 'genre',
    y: 'sold',
    color: 'genre',
    shape: 'triangle', // Use this shape
  },
});


chart.render();
```

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

### Configuring repeatMatrix with Options

Source: https://g2.antv.antgroup.com/en/manual/core/composition/repeat-matrix

This example shows how to configure a repeatMatrix chart by directly passing options to `chart.options()`. It sets the data and specifies fields for x-axis splitting.

```javascript
chart.options({ type: 'repeatMatrix', data: [1, 2, 3], encode: { x: ['f1', 'f2', 'f3'] } });

```

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

### Scale Synchronization Example

Source: https://g2.antv.antgroup.com/en/manual/core/scale/overview

Demonstrates default scale synchronization where scales for the same channel across marks in a view are synchronized. This ensures consistent data mapping.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
  theme: 'classic',
});


chart.options({
  type: 'view',
  children: [
    {
      type: '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', y: 'value' },
    },
    { type: 'lineX', data: ['1996'], style: { stroke: 'red', strokeWidth: 2 } },
  ],
});


chart.render();
```

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

### Slice Data with Start Index

Source: https://g2.antv.antgroup.com/en/manual/core/data/slice

This snippet demonstrates how to use the 'slice' transform to get data starting from a specific index. Ensure your data is in the correct format before applying the transform.

```javascript
const data = [
  { a: 1, b: 2, c: 3 },
  { a: 4, b: 5, c: 6 },
];


chart.data({
  type: 'inline',
  value: data,
  transform: [
    {
      type: 'slice',
      start: 1,
    },
  ],
});
```

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

### Beeswarm Plot with Color Encoding

Source: https://g2.antv.antgroup.com/en/manual/core/mark/beeswarm

This example shows how to add color encoding to a beeswarm plot for distinguishing data groups. It requires the same setup as the basic plot but includes the 'color' property in the encode object.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


const data = Array.from({ length: 300 }, (_, i) => {
  return {
    x: `G${(i % 6) + 1}`,
    y: 40 + Math.random() * 220,
  };
});


chart.options({
  type: 'beeswarm',
  data,
  encode: {
    x: 'x',
    y: 'y',
    size: 4,
    color: 'x',
  },
  scale: {
    y: {
      nice: true,
      domainMin: 0,
    },
  },
  legend: {
    size: false,
  },
  axis: {
    x: { title: false },
    y: { title: false },
  },
});


chart.render();

```

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

### Create Gantt Chart with Start and End Times

Source: https://g2.antv.antgroup.com/en/manual/core/encode

This example generates a Gantt chart by encoding the 'startTime' to the y-axis and 'endTime' to the y1-axis. Task names are mapped to both the x-axis and color for better distinction. It requires the G2 Chart library.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'interval',
  autoFit: true,
  data: [
    { name: 'Event Planning', startTime: 1, endTime: 4 },
    { name: 'Venue Logistics Planning', startTime: 3, endTime: 13 },
    { name: 'Select Suppliers', startTime: 5, endTime: 8 },
    { name: 'Rent Venue', startTime: 9, endTime: 13 },
    { name: 'Book Catering Services', startTime: 10, endTime: 14 },
    { name: 'Rent Event Decoration Team', startTime: 12, endTime: 17 },
    { name: 'Rehearsal', startTime: 14, endTime: 16 },
    { name: 'Event Celebration', startTime: 17, endTime: 18 },
  ],
  encode: {
    x: 'name', // Map task name field to X-axis position
    y: 'startTime', // Map task start time field to y position
    y1: 'endTime', // Map task end time field to y1 axis position
    color: 'name', // Map task name field to color
  },
  coordinate: { transform: [{ type: 'transpose' }] },
  axis: {
    x: {
      title: 'Task',
    },
    y: {
      title: 'Time',
    },
  },
});


chart.render();
```

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

### Configure Multi-view Chart Linkage

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/brush-x-highlight

This example sets up two charts, a focus chart and a context chart, both using the brushXHighlight interaction. It includes a custom path renderer for the brush handles and links the charts by emitting and listening to 'brush:highlight' events.

```javascript
const { Chart } = G2;
const chart = new Chart({
  container: 'container',
});
const container = chart.getContainer();
const focusContainer = document.createElement('div');
const contextContainer = document.createElement('div');
container.append(focusContainer);
container.append(contextContainer);

function createPathRender(compute) {
  return (group, options, document) => {
    if (!group.handle) {
      const path = document.createElement('path');
      group.handle = path;
      group.appendChild(group.handle);
    }
    const { handle } = group;
    const { x, y, width, height, ...rest } = options;
    if (width === undefined || height === undefined) return handle;
    handle.attr({
      ...compute(x, y, width, height),
      ...rest
    });
    return handle;
  };
}

// Render focus view
const focus = new G2.Chart({
  container: focusContainer,
  height: 360,
  paddingLeft: 50,
});
focus
  .area()
  .data({
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .animate(false)
  .interaction('brushXHighlight', {
    series: true,
    maskHandleWRender: createPathRender((x, y, w, h) => ({
      d: `M${x + w / 2},${y}L${x - w / 2},${y + h / 2}L${x + w / 2},${y + h}Z`,
      fill: '#1890FF',
    })),
    maskHandleERender: createPathRender((x, y, w, h) => ({
      d: `M${x + w / 2},${y}L${x + (w * 3) / 2},${y + h / 2}L${x + w / 2},
${y + h}Z`,
      fill: '#1890FF',
    })),
  });

// Render context view
const context = new G2.Chart({
  container: contextContainer,
  height: 80,
  paddingLeft: 50,
});
context
  .area()
  .data({
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .animate(false)
  .axis('x', { title: false })
  .axis('y', false)
  .interaction('brushXHighlight', {
    series: true,
    maskHandleWRender: createPathRender((x, y, w, h) => ({
      d: `M${x + w / 2},${y}L${x - w / 2},${y + h / 2}L${x + w / 2},${y + h}Z`,
      fill: '#1890FF',
    })),
    maskHandleERender: createPathRender((x, y, w, h) => ({
      d: `M${x + w / 2},${y}L${x + (w * 3) / 2},${y + h / 2}L${x + w / 2},
${y + h}Z`,
      fill: '#1890FF',
    })),
  });

Promise.all([focus.render(), context.render()]).then(() => {
  // Add cross-chart linkage
  context.on('brush:highlight', (e) => {
    const { selection } = e.data;
    focus.emit('brush:highlight', { data: { selection } });
  });

  focus.on('brush:highlight', (e) => {
    const { selection } = e.data;
    context.emit('brush:highlight', {
      data: { selection },
    });
  });
});

```

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

### Customizing Start and End Angles in Theta Coordinate

Source: https://g2.antv.antgroup.com/en/manual/core/coordinate/theta

Shows how to customize the starting and ending angles of a Theta coordinate system using `startAngle` and `endAngle` properties. This allows for partial pie charts or charts starting at a specific orientation.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'interval',
  data: [
    { category: 'A', value: 40 },
    { category: 'B', value: 25 },
    { category: 'C', value: 20 },
    { category: 'D', value: 15 },
  ],
  encode: { y: 'value', color: 'category' },
  transform: [{ type: 'stackY' }],
  coordinate: {
    type: 'theta',
    startAngle: -Math.PI / 2, // Start from π radians
    endAngle: Math.PI * 3, // End at 3π radians
  },
  style: { stroke: 'white' },
  labels: [{ text: 'category', radius: 0.8 }],
});


chart.render();

```

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

### Basic Interval Chart Setup

Source: https://g2.antv.antgroup.com/en/manual/core/transform/dodge-x

This code sets up a basic interval chart with data from different departments across quarters. It serves as a baseline before applying the dodgeX transform.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


const data = [
  { Quarter: 'Q1', Department: 'Sales', Performance: 90, Year: '2024' },
  { Quarter: 'Q1', Department: 'Marketing', Performance: 80, Year: '2024' },
  { Quarter: 'Q1', Department: 'R&D', Performance: 70, Year: '2024' },
  { Quarter: 'Q2', Department: 'Sales', Performance: 90, Year: '2024' },
  { Quarter: 'Q2', Department: 'Marketing', Performance: 70, Year: '2024' },
  { Quarter: 'Q2', Department: 'R&D', Performance: 80, Year: '2024' },
  { Quarter: 'Q3', Department: 'Sales', Performance: 70, Year: '2024' },
  { Quarter: 'Q3', Department: 'Marketing', Performance: 80, Year: '2024' },
  { Quarter: 'Q3', Department: 'R&D', Performance: 90, Year: '2024' },
  { Quarter: 'Q4', Department: 'Sales', Performance: 80, Year: '2024' },
  { Quarter: 'Q4', Department: 'Marketing', Performance: 70, Year: '2024' },
  { Quarter: 'Q4', Department: 'R&D', Performance: 90, Year: '2024' },
];


chart.options({
  type: 'interval',
  autoFit: true,
  data,
  encode: {
    x: 'Quarter',
    y: 'Performance',
    color: 'Department',
  },
  // Note: No transform is used here
});


chart.render();

```

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

### Dynamic Binning with thresholdsX and thresholdsY

Source: https://g2.antv.antgroup.com/en/manual/core/transform/bin

This example shows how to create a G2 chart with binning and dynamically update `thresholdsX` and `thresholdsY` using input fields. This is useful for interactive exploration of data distributions.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});
let thresholdsX;
let thresholdsY;
chart.options({
  type: 'rect', // Chart type is rectangle (histogram)
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/movies.json',
  },
  encode: {
    x: 'IMDB Rating', // X-axis encodes IMDB Rating
    y: 'Rotten Tomatoes Rating', // Y-axis encodes Rotten Tomatoes Rating
  },
  transform: [
    {
      type: 'bin', // Data transform type is binning
      color: 'count', // Color encoding represents the number of data points in each bin
    },
  ],
});


// Insert input boxes for thresholdsX and thresholdsY
const container = document.createElement('div');
const thresholdsX_Text = document.createElement('span');
thresholdsX_Text.textContent = 'thresholdsX: ';
const thresholdsX_Input = document.createElement('input');
thresholdsX_Input.setAttribute('type', 'number');
thresholdsX_Input.addEventListener('input', (e) => {
  thresholdsX = e.target.value;
  chart.options({
    transform: [
      {
        type: 'bin',
        color: 'count',
        thresholdsX,
        thresholdsY,
      },
    ],
  });
  chart.render();
});


const thresholdsY_Text = document.createElement('span');
thresholdsY_Text.textContent = '　　thresholdsY: ';
const thresholdsY_Input = document.createElement('input');
thresholdsY_Input.setAttribute('type', 'number');
thresholdsY_Input.addEventListener('input', (e) => {
  thresholdsY = e.target.value;
  chart.options({
    transform: [
      {
        type: 'bin',
        color: 'count',
        thresholdsX,
        thresholdsY,
      },
    ],
  });
  chart.render();
});


container.appendChild(thresholdsX_Text);
container.appendChild(thresholdsX_Input);
container.appendChild(thresholdsY_Text);
container.appendChild(thresholdsY_Input);


const node = chart.getContainer();
node.insertBefore(container, node.childNodes[0]);


chart.render();

```

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

### G2 selectX Transform Example

Source: https://g2.antv.antgroup.com/en/manual/core/transform/select-x

This example demonstrates how to use the selectX transform with the 'last' selector to annotate the last data point of each series in a line chart.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});
chart.options({
  width: 800,
  paddingLeft: 50,
  paddingRight: 100,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/indices.json',
  },
  children: [
    // Line mark configuration
    {
      type: 'line',
      encode: {
        x: (d) => new Date(d.Date),
        y: 'Close',
        color: 'Symbol',
      },
      axis: {
        y: {
          title: '↑ Change in price (%)',
        },
      },
    },
    // Text annotation configuration
    {
      type: 'text',
      encode: {
        x: (d) => new Date(d.Date),
        y: 'Close',
        series: 'Symbol',
        color: 'Symbol',
        text: 'Symbol',
      },
      transform: [
        {
          // Use selectX transform
          type: 'selectX',
          // Select the last data point
          selector: 'last',
        },
      ],
      style: {
        // Offset annotation text 12 pixels to the right
        dx: 12,
      },
      // Disable tooltip for text
      tooltip: false,
    },
  ],
});


chart.render();

```

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

### Symmetric Bar Chart Example

Source: https://g2.antv.antgroup.com/en/manual/core/transform/symmetry-y

Illustrates the creation of a symmetric bar chart using the symmetryY transformation. This example uses local data and transposes the coordinate system.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({ container: 'container' });


chart.options({
  type: 'interval',
  width: 800,
  height: 300,
  data: [
    { x: 'A', y: 100 },
    { x: 'B', y: 200 },
    { x: 'C', y: 300 },
    { x: 'D', y: 250 },
  ],
  encode: { x: 'x', y: 'y', color: 'x' },
  transform: [{ type: 'stackY' }, { type: 'symmetryY' }],
  scale: { x: { padding: 0.5 } },
  coordinate: { transform: [{ type: 'transpose' }] },
  legend: false,
});


chart.render();
```

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

### Using bin + opacity for binning

Source: https://g2.antv.antgroup.com/en/manual/core/transform/bin

This example demonstrates how to use the 'bin' transform to group data by count and encode the result using opacity. It's useful for visualizing data density on a scatter plot.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/movies.json',
  },
  encode: {
    x: 'IMDB Rating',
    y: 'Rotten Tomatoes Rating',
  },
  transform: [
    {
      type: 'bin', // Data transform type is binning
      opacity: 'count', // Opacity encoding represents the number of data points in each bin
      thresholdsX: 10,
      thresholdsY: 10,
    },
  ],
});


chart.render();

```

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

### Basic Connector Example

Source: https://g2.antv.antgroup.com/en/manual/core/mark/connector

Demonstrates how to create a basic connector line between data points using the 'connector' type in G2. It specifies data points with source, target, and coordinate values, along with styling for the stroke and end marker.

```javascript
const { Chart } = G2;
const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'connector',
  data: [
    { source: 'A', target: 'B', x1: 100, y1: 100, x2: 300, y2: 200 },
    { source: 'B', target: 'C', x1: 300, y1: 200, x2: 500, y2: 150 },
    { source: 'C', target: 'D', x1: 500, y1: 150, x2: 400, y2: 300 },
  ],
  encode: {
    x: ['x1', 'x2'],
    y: ['y1', 'y2'],
    color: 'source',
  },
  style: {
    stroke: '#1890ff',
    strokeWidth: 2,
    endMarker: true,
  },
  legend: false,
});


chart.render();
```

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

### Symmetric Funnel Chart Example

Source: https://g2.antv.antgroup.com/en/manual/core/transform/symmetry-y

Shows how to use the symmetryY transformation for funnel charts to visualize data conversion. This example uses specific encoding for funnel shapes and disables axes.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({ container: 'container' });


chart.options({
  type: 'interval',
  autoFit: true,
  data: [
    { action: 'Browse Website', pv: 50000 },
    { action: 'Add to Cart', pv: 35000 },
    { action: 'Generate Order', pv: 25000 },
    { action: 'Pay Order', pv: 15000 },
    { action: 'Complete Transaction', pv: 8000 },
  ],
  encode: { x: 'action', y: 'pv', color: 'action', shape: 'funnel' },
  transform: [{ type: 'symmetryY' }],
  scale: { x: { padding: 0 } },
  coordinate: { transform: [{ type: 'transpose' }] },
  animate: { enter: { type: 'fadeIn' } },
  axis: false,
  labels: [
    {
      text: (d) => `${d.action}
${d.pv}`,
      position: 'inside',
      transform: [{ type: 'contrastReverse' }],
    },
  ],
});


chart.render();
```

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

### Equivalent Configuration after Bubbling

Source: https://g2.antv.antgroup.com/en/manual/core/coordinate/overview

Shows the simplified configuration that results from the coordinate bubbling behavior described in the previous example. The view's coordinate system is applied to all children unless overridden.

```javascript
chart.options({
  type: 'view',
  coordinate: { type: 'polar' },
  children: [
    { type: 'line' },
    { type: 'area' },
  ],
});
```

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

### Using bin + size for binning

Source: https://g2.antv.antgroup.com/en/manual/core/transform/bin

This example shows how to use the 'bin' transform to group data by count and encode the result using size. This is effective for creating density maps where larger points indicate more data points in a bin.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'point', // Chart type is point
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/movies.json',
  },
  encode: {
    x: 'IMDB Rating',
    y: 'Rotten Tomatoes Rating',
  },
  transform: [
    {
      type: 'bin', // Data transform type is binning
      size: 'count', // Size encoding represents the number of data points in each bin
      thresholdsX: 10,
      thresholdsY: 10,
    },
  ],
});


chart.render();

```

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

### Line Chart with Legend Filter Example

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/legend-filter

This example showcases a line chart with legend filtering enabled for discrete data. It fetches data from a URL and encodes x, y, and color channels.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
});


chart.options({
  type: 'line',
  autoFit: true,
  height: 300,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/temperatures1.json',
  },
  encode: {
    x: (d) => new Date(d.date),
    y: 'value',
    color: 'condition',
  },
});


chart.render();
```

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

### Polar Coordinate System Example

Source: https://g2.antv.antgroup.com/en/manual/core/coordinate/overview

Visualize periodic data or relative relationships using a polar coordinate system. This example uses an interval chart to display sales data by genre.

```javascript
import { Chart } from '@antv/g2';


const chart = new Chart({
  container: 'container',
  theme: 'classic',
});


chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: { x: 'genre', y: 'sold', color: 'genre' },
  coordinate: { type: 'polar' },
  axis: { y: false },
});
chart.render();
```

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

### Example: Creating a Custom Path Handle

Source: https://g2.antv.antgroup.com/en/manual/core/interaction/brush-highlight

Demonstrates how to create a custom path handle for G2 interactions. This function handles both initial creation and subsequent updates of the graphic element.

```javascript
function renderPath(group, options, document) {
  // Creation logic
  // If it's the first render, create and mount the graphic
  if (!group.handle) {
    // Create graphics through document.createElement
    const path = document.createElement('path');
    group.handle = path;
    group.appendChild(group.handle);
  }


  // Update logic
  const { handle } = group;
  const { width, height, ...rest } = options;
  if (width === undefined || height === undefined) return handle;
  handle.attr(rest);


  // Return corresponding value
  return handle;
}
```
Tokens:
Raw