Components of G2 Charts

To effectively use G2 for data visualization, it’s important to understand the components of G2 charts and related concepts.

Chart Components

Below is a basic G2 chart, composed of Components and Marks.

It’s important to note that in G2 5.0, annotations no longer need to be configured separately. Annotations are also a type of mark, or certain marks can be used as annotations, such as Text, Image, Line marks, etc.

Title

The title provides a brief summary of the data displayed in the chart. It is a commonly used component and supports both main titles and subtitles, along with their style and positioning options.

Refer to the Title tutorial for more information.

Axis

Draws the coordinate axis, currently supporting both Cartesian and polar coordinate axis.

Each axis is composed of the axis line, ticks, tick labels, title, and grid lines.

Refer to the Axis tutorial for more information.

Legend

Draws the legend, with G2 offering two types: Category Legend and Continuous Legend, used for displaying categorical and continuous data, respectively.

Refer to the Legend tutorial for more information.

Scrollbar

The scrollbar is an interactive component that hides any overflow when the display area is not large enough to show all information. Users can reveal hidden parts by scrolling vertically or horizontally.

Whether content exceeds the display area depends on the amount of content and the size of the display area. When vertical content exceeds the display area, a vertical scrollbar should be used to control what is shown; the same logic applies to horizontal scrollbars.

Refer to the Scrollbar tutorial for more information.

Slider

The slider is an auxiliary component for viewing data, compressing large volumes of data onto one axis. It allows users to both view an overall data landscape and zoom into specific data segments, enabling drag-and-drop for observing data evolution within a certain range.

The slider compresses value-range data and is closely tied to the type of scale corresponding to the position channels x and y. Generally, it is used more frequently for time-based scales, less for continuous axis, and rarely for categorical axis.

Refer to the Slider tutorial for more information.

Tooltip

When the mouse hovers over a point, a tooltip appears showing information related to that point, such as its value and data units. The tooltip’s content can also be dynamically specified using a formatting function.

Refer to the Tooltip tutorial for more information.

Label

In G2, data labels (Label) are one of the ways to add annotations to charts.

Refer to the Label tutorial for more information.

Chart Layout

Usage

Whether for single-view charts or multi-view charts, layout information (chart width, height, etc.) can be specified at the top level of options.

// Mark level
const markLevel = {
  type: 'interval',
  width: 640,
  height: 180,
  margin: 10,
};
// View level
const viewLevel = {
  type: 'view',
  width: 640,
  height: 180,
  margin: 10,
  // ...
};
// Multi-view chart
const compositionLevel = {
  type: 'spaceFlex',
  width: 640,
  height: 180,
  margin: 10,
};

You can also specify it when initializing the Chart object:

const chart = new Chart({
  type: 'view',
  width: 640,
  height: 180,
  margin: 10,
  // ...
});

You can also specify through top-level spec properties:

chart.options({ type: 'interval', padding: 10, margin: 20 });

chart.options({ type: 'view', padding: 10, margin: 20 });

chart.options({ type: 'spaceFlex', padding: 10, margin: 20 });

View Model

In G2, the view model is used to define how chart views are divided. Different regions generated by this division can draw different content and be configured through corresponding options. A view can be simply understood as an independent chart. G2’s view model structure is as follows:

• View Area: Represents the overall view area of the chart. When setting the chart’s width and height, the effective range is the width and height of the view area. The area between the view area and the plot area is called the margin range, whose size can be adjusted by configuring the margin property, typically used to set the distance between fixed components (such as axis, legends, etc.) and the boundaries.

• Plot Area: Represents the drawing area of the chart. The area between the plot area and the main area is called the padding range, whose size can be adjusted by configuring the padding property, typically used to draw chart components such as title, legend, axis, etc.

• Main Area: Represents the main area for drawing chart content. The area between the main area and the content area is called the breathing range, whose size can be adjusted by configuring the inset property, used to create spacing between components and marks (graphic elements) to prevent overlap, especially useful for scatter plots.

• Content Area: Represents the content area for drawing marks. Primarily used for drawing marks (graphic elements).

The size of the content area is calculated by the following formula:

const contentWidth =
  width -
  paddingLeft -
  paddingRight -
  marginLeft -
  marginRight -
  insetLeft -
  insetRight;

const contentHeight =
  height -
  paddingTop -
  paddingBottom -
  marginTop -
  marginBottom -
  insetTop -
  insetBottom;

Layout Algorithm

G2 internally implements its own layout algorithm, responsible for coordinating the calculation of layout parameters such as margin, padding, and inset width, ensuring that components like axis and legends are reasonably laid out within the chart container.

Dynamic Calculation

You might have wondered why manually declaring padding as 0 in the configuration causes the x-axis of the chart to display incompletely. To answer this question, we need to explore the dynamic calculation part of G2’s layout algorithm.

In G2’s layout algorithm, all passed padding, margin, and inset properties are first obtained. If not set, padding (including paddingTop, paddingLeft, etc.) is assigned a default value of auto, margin is assigned a default value of 16, and inset is assigned a default value of 0. Next, chart components are grouped by position to facilitate subsequent layout calculations.

Taking position = 'top' as an example, if an explicit paddingTop is configured, the logic for dynamically calculating paddingTop is not triggered. At this time, for components with undefined size, the internally defined default size defaultSize is used; for group components, the above operations are executed recursively, and then the maximum child component size is taken as the parent component size; if the component includes an axis component and labelAutoHide is not explicitly set, labelAutoHide is set to true to automatically hide axis labels to avoid overflow.

If paddingTop is not configured, the dynamic calculation logic is triggered, and the final actual paddingTop size is calculated by accumulating margins based on the actual size of components (crossPadding defaults to 12).

To answer the original question: In G2, the padding range is used to reserve display space for chart components. If you manually set padding to 0, it will disable the internal adaptive calculation logic, which may cause chart components to display incompletely. Therefore, when personalized configuration is needed, ensure sufficient space is reserved for components; otherwise, it’s recommended to use the default adaptive logic to avoid display issues.

Anti-Compression Mechanism

G2 internally sets a fallback mechanism for the chart display area. When there are mark elements (such as line, interval, etc.) in the view, the anti-compression mechanism is triggered to ensure that the main area of the chart has a minimum proportion of 1/4. Taking the horizontal direction as an example, assuming the plot area size is plotWidth, if plotWidth minus the dynamically calculated left padding pl0 and right padding pr0 is less than plotWidth * 1/4, the main area size will be prioritized to be plotWidth * 1/4, and the padding will be proportionally reduced. When the user specifies paddingLeft, the size of paddingRight will be dynamically calculated, and the remaining space will be allocated proportionally. It’s best to avoid setting both left and right margins to fixed values simultaneously, as this may cause the adaptive algorithm to fail. The calculation rules for the vertical direction are similar.

Configuration Options

Try it out:

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

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

chart.options({
  type: 'point',
  height: 600,
  width: 700,
  margin: 100,
  padding: 60,
  paddingLeft: 100, // 单独设置paddingLeft的优先级比padding高
  insetLeft: 30,
  insetRight: 30,

  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/commits.json',
  },
  encode: {
    x: (d) => new Date(d.time).getUTCHours(),
    y: (d) => new Date(d.time).getUTCDay(),
    size: 'count',
    shape: 'point',
  },
  transform: [{ type: 'group', size: 'sum' }, { type: 'sortY' }],
  scale: { y: { type: 'point' } },
  style: { shape: 'point', fill: '#76b7b2' },
  axis: {
    x: { title: 'time (hours)', tickCount: 24 },
    y: { title: 'time (day)', grid: true },
  },
  legend: false,
  viewStyle: {
    viewFill: '#DCEEFE',
    plotFill: '#A2D4F6',
    mainFill: '#FFC6A1',
    contentFill: '#FF8E72',
  },
});

chart.render();

autoFit

If you want the chart’s width and height to stay consistent with the container, you can set options.autoFit to true, which has lower priority than specifying width and height.

({ type: 'view', autoFit: true });

viewStyle

Configure the chart’s view style.

view

Configure the chart’s view area style.

plot

Configure the chart’s plot area style.

main

Configure the chart’s main area style.

content

Configure the chart’s content area style.

When configuring view styles, instead of configuring as an object, you configure using the view, plot, main, content prefixes with properties.

({
  viewStyle: {
    // Configure chart view area style
    viewFill: '#DCEEFE',
    viewRadius: 50,

    // Configure chart plot area style
    plotFill: '#fff',
    plotFillOpacity: 0.45,
    plotStroke: 'yellow',
    plotLineWidth: 4,

    // Configure chart main area style
    mainFill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
    mainFillOpacity: 0.75,

    // Configure chart content area style
    contentFill: 'l(90) 0:#ffadad 0.5:#ffd6a5 1:#fdffb6',
    contentShadowColor: '#5d5d5d',
    contentShadowBlur: 40,
    contentShadowOffsetX: 5,
    contentShadowOffsetY: 5,
  },
});

Try it out:

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

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

chart.options({
  viewStyle: {
    // 配置图表的视图区域的样式
    viewFill: '#DCEEFE',
    viewRadius: 20,

    // 配置图表的绘制区域的样式
    plotFill: '#fff',
    plotFillOpacity: 0.45,
    plotStroke: 'yellow',
    plotLineWidth: 4,

    // 配置图表的主区域的样式
    mainFill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
    mainFillOpacity: 0.75,

    // 配置图表的内容区域的样式
    contentFill: 'l(90) 0:#ffadad 0.5:#ffd6a5 1:#fdffb6',
    contentShadowColor: '#5d5d5d',
    contentShadowBlur: 40,
    contentShadowOffsetX: 5,
    contentShadowOffsetY: 5,
  },
  type: 'area',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/aapl.json',
  },
  encode: {
    x: (d) => new Date(d.date),
    y: 'close',
  },
  axis: false,
  style: {
    fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
    fillOpacity: 0.9,
  },
  height: 350,
  width: 700,
  margin: 30,
  padding: 20,
  inset: 15,
  legend: false,
});

chart.render();