G2

This document provides a comprehensive overview of G2's complete configuration system, covering all available configuration options and their hierarchical relationships.

Chart Initialization Configuration

When creating a chart instance, you can pass the following configuration options through new Chart(params):

Option	Type	Default	Description
container	`string \| HTMLElement`	-	Specify the DOM for chart rendering, can pass DOM id or DOM instance
autoFit	`boolean`	`false`	Whether the chart auto-fits the container size
clip	`boolean`	`false`	Whether to hide graphics outside the drawing area
width	`number`	`640`	Chart width
height	`number`	`480`	Chart height
depth	`number`	`0`	Chart depth, used in 3D charts
padding	`'auto' \| number`	`'auto'`	Chart padding, usage similar to CSS box model
margin	`number`	`16`	Chart margin, usage similar to CSS box model
inset	`number`	`0`	Chart breathing space width
renderer	`Canvas \| SVG \| WebGL`	`Canvas`	Specify rendering engine
theme	`'classic' \| 'classicDark' \| 'academy' \| customTheme`	-	Configure chart theme
plugins	`any[]`	-	Specify plugins used during rendering

Example:

const chart = new Chart({
  container: 'container', // DOM container
  autoFit: true, // Auto-fit container size
  clip: true, // Clip overflow area
  padding: 20, // Inner padding
  margin: 16, // Outer margin
  theme: 'classicDark', // Dark theme
  plugins: [new Plugin()], // Plugins
});

Chart Configuration

After creating a chart instance, you can configure it in two ways:

Method 1: API Chaining

chart
  .data(data)
  .encode('x', 'field1')
  .encode('y', 'field2')
  .scale('x', { type: 'band' })
  .axis('x', { title: 'X Axis Title' });

Method 2: Using options method with spec configuration

chart.options({
  type: 'interval',
  data: data,
  encode: { x: 'field1', y: 'field2' },
  scale: { x: { type: 'band' } },
  axis: { x: { title: 'X Axis Title' } },
});

The following is the complete chart configuration hierarchy:

G2SpecObject// 顶级配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

MarkObject// 标记配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

type?"interval" | "rect" | "line" | "point" | "text" | "cell" | "area" | "node" | "edge" | "link" | "image" | "polygon" | "box" | "vector" | "lineX" | "lineY" | "connector" | "range" | "rangeX" | "rangeY" | "sankey" | "chord" | "path" | "treemap" | "pack" | "boxplot" | "shape" | "forceGraph" | "tree" | "wordCloud" | "gauge" | "density" | "heatmap" | "liquid"标记// 标记类型

class?string标记// CSS类名

key?string标记// 唯一标识符

x?number位置// X坐标

y?number位置// Y坐标

zIndex?number位置// 层级

frame?boolean位置// 是否显示边框

padding?Padding间距// 内边距

paddingLeft?Padding间距// 左内边距

paddingRight?Padding间距// 右内边距

paddingTop?Padding间距// 上内边距

paddingBottom?Padding间距// 下内边距

margin?number间距// 外边距

marginLeft?number间距// 左外边距

marginRight?number间距// 右外边距

marginTop?number间距// 上外边距

marginBottom?number间距// 下外边距

inset?number间距// 内缩

insetLeft?number间距// 左内缩

insetRight?number间距// 右内缩

insetTop?number间距// 上内缩

insetBottom?number间距// 下内缩

style?Record<string, any>样式// 标记样式

viewStyle?Record<string, any>样式// 视图样式

data?Data数据// 数据源

InlineConnectorObject// 内联数据

FetchConnectorObject// 远程数据

transform?Transform[]标记转换// 标记转换配置

encode?Record<ChannelTypes, Encode>编码// 编码配置

编码类型EncodeTypes基础// 支持的编码类型

字段编码string | FieldEncode基础// 绑定数据字段

常量编码any | ConstantEncode基础// 使用固定值

函数编码TransformEncode基础// 使用变换函数

数据编码ColumnEncode基础// 使用数组数据

x?Encode// X轴位置编码

y?Encode// Y轴位置编码

z?Encode// Z轴位置编码（3D图表）

x1?Encode// X轴结束位置编码（区间图表）

y1?Encode// Y轴结束位置编码（区间图表）

position?Encode// 通用位置编码

position${number}?Encode// 通用位置编码

color?Encode// 颜色编码

size?Encode// 大小编码

shape?Encode// 形状编码

opacity?Encode// 透明度编码（0-1）

series?Encode// 系列编码（用于多线图、分组柱图等）

key?Encode// 数据键编码（用于动画识别）

groupKey?Encode// 分组键编码

enterType?Encode// 入场动画类型编码

enterEasing?Encode// 入场缓动函数编码

enterDuration?Encode// 入场动画时长编码（毫秒）

enterDelay?Encode// 入场动画延迟编码

updateType?Encode// 更新动画类型编码

updateEasing?Encode// 更新缓动函数编码

updateDuration?Encode// 更新动画时长编码

updateDelay?Encode// 更新动画延迟编码

exitType?Encode// 退场动画类型编码

exitEasing?Encode// 退场缓动函数编码

exitDuration?Encode// 退场动画时长编码

exitDelay?Encode// 退场动画延迟编码

scale?Record<ChannelTypes, Scale>比例尺// 比例尺映射

coordinate?Coordinate坐标系// 坐标系

facet?boolean布局// 是否启用分面

layout?Record<string, any>布局// 布局配置，仅部分标记有，例如wordCloud、sankey等

cartesian?boolean布局// 是否使用笛卡尔坐标系

clip?boolean布局// 是否裁剪超出区域

state?State状态// 状态样式配置

animate?Animation动画// 动画配置

interaction?Interaction交互// 交互行为配置

labels?Record<string, any>[]组件// 标签配置数组

tooltip?TooltipComponent组件// 提示框组件

axis?AxisComponent组件// 坐标轴组件

legend?LegendComponent组件// 图例组件

slider?SliderComponent组件// 缩略轴组件

scrollbar?ScrollbarComponent组件// 滚动条组件

title?string | TitleComponent组件// 标题组件

CompositionObject// 复合视图配置，标记可以单独使用，也可以嵌套在复合视图下

type?'view' | 'getView' | 'geoPath' | 'spaceLayer' | 'spaceFlex' | 'facetRect' | 'facetCircle' | 'repeatMatrix' | 'timingKeyframe'// 复合类型

children?(Mark | AxisComponent | LegendComponent)[]// 子组件，具体配置项见标记配置

[key: string]?any// 其他属性，例如style、data等，具体配置项见标记配置