--- title: "Components of G2 Charts" description: "Components of G2 Charts" language: "en" canonical: "https://g2.antv.antgroup.com/en/manual/core/chart/chart-component/" version: "5.4.8" --- [Resource index](/llms.txt) 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. chart-component ### 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](/en/manual/component/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](/en/manual/component/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](/en/manual/component/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](/en/manual/component/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](/en/manual/component/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](/en/manual/component/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](/en/manual/component/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. ```js // 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: ```js const chart = new Chart({ type: 'view', width: 640, height: 180, margin: 10, // ... }); ``` You can also specify through top-level spec properties: ```js 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 chart-component 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: ```js 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 | Property | Description | Type | Default | Required | | ------------- | ----------------------------------------------------------------------------------- | ----------------------- | --------------------------- | -------- | | autoFit | When enabled, chart width and height stay consistent with container | boolean | false | | | width | Set chart width | number | `640` | | | height | Set chart height | number | `480` | | | viewStyle | Set chart view style | [viewStyle](#viewstyle) | See [viewStyle](#viewstyle) | | | margin | Set margin values for all four directions, lower priority than individual settings | number | `16` | | | marginLeft | Set left margin value | number | `16` | | | marginTop | Set top margin value | number | `16` | | | marginRight | Set right margin value | number | `16` | | | marginBottom | Set bottom margin value | number | `16` | | | padding | Set padding values for all four directions, lower priority than individual settings | number | `auto` | | | paddingLeft | Set left padding value | number | `auto` | | | paddingTop | Set top padding value | number | `auto` | | | paddingRight | Set right padding value | number | `auto` | | | paddingBottom | Set bottom padding value | number | `auto` | | | inset | Set inset values for all four directions, lower priority than individual settings | number | `0` | | | insetLeft | Set left inset width | number | `0` | | | insetTop | Set top inset width | number | `0` | | | insetRight | Set right inset width | number | `0` | | | insetBottom | Set bottom inset width | number | `0` | | Try it out: ```ts 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. ```js ({ type: 'view', autoFit: true }); ``` #### viewStyle Configure the chart's view style. | Property | Description | Type | Default | Required | | -------- | ---------------------------- | ------------------- | ----------------------- | -------- | | view | Configure view area style | [view](#view) | See [view](#view) | | | plot | Configure plot area style | [plot](#plot) | See [plot](#plot) | | | main | Configure main area style | [main](#main) | See [main](#main) | | | content | Configure content area style | [content](#content) | See [content](#content) | | ##### view Configure the chart's view area style. | Property | Description | Type | Default | Required | | ----------------- | --------------------------------------------- | --------------- | --------- | -------- | | viewRadius | Border radius size for chart view area | number | `0` | | | viewFill | Fill color for chart view area | string | - | | | viewFillOpacity | Fill opacity for chart view area | number | - | | | viewStroke | Stroke color for chart view area | string | - | | | viewStrokeOpacity | Stroke opacity for chart view area | number | - | | | viewLineWidth | Stroke width for chart view area | number | - | | | viewLineDash | Stroke dash configuration for chart view area | [number,number] | - | | | viewOpacity | Overall opacity for chart view area | number | - | | | viewShadowColor | Shadow color for chart view area | string | - | | | viewShadowBlur | Shadow blur factor for chart view area | number | - | | | viewShadowOffsetX | Shadow horizontal offset for chart view area | number | - | | | viewShadowOffsetY | Shadow vertical offset for chart view area | number | - | | | viewCursor | Cursor style for chart view area | string | `default` | | ##### plot Configure the chart's plot area style. | Property | Description | Type | Default | Required | | ----------------- | --------------------------------------------- | --------------- | --------- | -------- | | plotRadius | Border radius size for chart plot area | number | `0` | | | plotFill | Fill color for chart plot area | string | - | | | plotFillOpacity | Fill opacity for chart plot area | number | - | | | plotStroke | Stroke color for chart plot area | string | - | | | plotStrokeOpacity | Stroke opacity for chart plot area | number | - | | | plotLineWidth | Stroke width for chart plot area | number | - | | | plotLineDash | Stroke dash configuration for chart plot area | [number,number] | - | | | plotOpacity | Overall opacity for chart plot area | number | - | | | plotShadowColor | Shadow color for chart plot area | string | - | | | plotShadowBlur | Shadow blur factor for chart plot area | number | - | | | plotShadowOffsetX | Shadow horizontal offset for chart plot area | number | - | | | plotShadowOffsetY | Shadow vertical offset for chart plot area | number | - | | | plotCursor | Cursor style for chart plot area | string | `default` | | ##### main Configure the chart's main area style. | Property | Description | Type | Default | Required | | ----------------- | --------------------------------------------- | --------------- | --------- | -------- | | mainRadius | Border radius size for chart main area | number | `0` | | | mainFill | Fill color for chart main area | string | - | | | mainFillOpacity | Fill opacity for chart main area | number | - | | | mainStroke | Stroke color for chart main area | string | - | | | mainStrokeOpacity | Stroke opacity for chart main area | number | - | | | mainLineWidth | Stroke width for chart main area | number | - | | | mainLineDash | Stroke dash configuration for chart main area | [number,number] | - | | | mainOpacity | Overall opacity for chart main area | number | - | | | mainShadowColor | Shadow color for chart main area | string | - | | | mainShadowBlur | Shadow blur factor for chart main area | number | - | | | mainShadowOffsetX | Shadow horizontal offset for chart main area | number | - | | | mainShadowOffsetY | Shadow vertical offset for chart main area | number | - | | | mainCursor | Cursor style for chart main area | string | `default` | | ##### content Configure the chart's content area style. | Property | Description | Type | Default | Required | | -------------------- | ------------------------------------------------ | --------------- | --------- | -------- | | contentRadius | Border radius size for chart content area | number | `0` | | | contentFill | Fill color for chart content area | string | - | | | contentFillOpacity | Fill opacity for chart content area | number | - | | | contentStroke | Stroke color for chart content area | string | - | | | contentStrokeOpacity | Stroke opacity for chart content area | number | - | | | contentLineWidth | Stroke width for chart content area | number | - | | | contentLineDash | Stroke dash configuration for chart content area | [number,number] | - | | | contentOpacity | Overall opacity for chart content area | number | - | | | contentShadowColor | Shadow color for chart content area | string | - | | | contentShadowBlur | Shadow blur factor for chart content area | number | - | | | contentShadowOffsetX | Shadow horizontal offset for chart content area | number | - | | | contentShadowOffsetY | Shadow vertical offset for chart content area | number | - | | | contentCursor | Cursor style for chart content area | string | `default` | | When configuring view styles, instead of configuring as an object, you configure using the `view`, `plot`, `main`, `content` prefixes with properties. ```js ({ 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: ```ts 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(); ```