Sankey

2 min read

Plot Container

width

optional number default: 400

Set the width of the chart.

height

optional number default: 400

Set the height of the chart.

autoFit

optional boolean default: true

Whether the chart automatically adjusts to fit the container. If it is set to true, width and height configuration would fail.

padding

optional number[] | number | 'auto'

Set padding value of the canvas. You can also use auto.

appendPadding

optional number[] | number

Extra appendPadding value.

renderer

optional string default: canvas

Set the render way to canvas or svg.

pixelRatio

optional number default: window.devicePixelRatio

Set the pixel ratio of the chart.

limitInPlot

optional boolean

Whether clip the Geometry beyond the coordinate system。

supportCSSTransform

optional boolean

支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

useDeferredLabel

optional boolean|number

开启后 label 渲染会在浏览器空闲时机执行。可制定具体 number 数值,来限定 timeout 时间 (建议开启时,指定 timeout 时间)

locale

optional string

Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use G2Plot.registerLocale to register a new locale. Go src/locales/en_US.ts to see the format.

Data Mapping

data

required array object

Configure the chart data source. The data source is a collection of objects, for example:[{ source: '支付宝首页', target: '花呗', value: 20 }, ...]

sourceField

required string

Sets the source node data field of the Sankey diagram. For example, for the above data, it is: 'source'.

targetField

required string

Sets the target node data field of Sankey diagram. For the above data, for example, it is: 'target'.

weightField

required string

Set the weight field information of the relationship between nodes. The larger the data, the larger the edge. For example, for the above data, it is: 'value'.

rawFields

optional string[

Raw fields of original data. With the 'rawsFields' definition, you can get the original (raw) datum on node or edge elements.

Geometry Style

nodeStyle

optional StyleAttr | Function

Sankey diagram node style configuration.

nodeState

optional StyleAttr | Function

State style configuration of Sankey node.

设置对应状态的样式,开放的状态有:'default' | 'active' | 'inactive' | 'selected' 四种。

示例:

{
  interactions: [{ type: 'element-active' }],
  state: {
    // 设置 active 激活状态的样式
    active: {
      animate: { duration: 100, easing: 'easeLinear' },
      style: {
        lineWidth: 2,
        stroke: '#000',
      },
    },
  }
};

nodeInteractions

optional Interaction[]

Interaction configuration of Sankey node.

edgeStyle

optional StyleAttr | Function

Sankey diagram variable style configuration.

edgeState

optional StyleAttr | Function

State style configuration of Sankey edge.

设置对应状态的样式,开放的状态有:'default' | 'active' | 'inactive' | 'selected' 四种。

示例:

{
  interactions: [{ type: 'element-active' }],
  state: {
    // 设置 active 激活状态的样式
    active: {
      animate: { duration: 100, easing: 'easeLinear' },
      style: {
        lineWidth: 2,
        stroke: '#000',
      },
    },
  }
};

color

optional string | string[] | Function

Configure the color. If there is no colorField configured, set one single color. Otherwise you can set a series of colors, or you can use callback function.

Default: The color board of the theme.

// set one single color
{
  color: '#a8ddb5'
}
// set a series of colors
{
  colorField: 'type', // or seriesField in some cases
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // or seriesField in some cases
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

edgeInteractions

optional Interaction[]

Interaction configuration of Sankey edge.

nodeWidthRatio

optional number

Sankey diagram node width configuration, 0 ~ 1, refer to the width of the canvas, the default is' 0.008 '.

nodeWidthPadding

optional number

The vertical spacing between nodes in Sankey diagram, 0 ~ 1, referring to the height of the canvas, default is' 0.01 '.

nodeAlign

optional string

The sankey diagram node layout direction, the default is the justify, can choose the 'left' | 'right' | 'center' | 'the justify' four ways.

nodeDepth

optional Function

The sankey diagram node depth configure, use function to return the depth value, started from zero, and we need to ensure contains node in every depth level.

{
  nodeDepth: (datum, maxDepth) => {
    const { name } = datum;
    if (name === 'node1') {
      return 0;
    }
    return 1;
  }
}

nodeDraggable

optional boolean

Whether the node of sankey is draggable, default is false.

{
  nodeDraggable: true,
}

Plot Event

On Plot, binding events are removed by ON and OFF method.

// Bind event
plot.on('eventName', callback);
// Bind event, only trigger one time
plot.once('eventName', callback);
// Remove event
plot.off('eventName', callback);

Composition: ${componentName}:${eventName}

Element refers to the type of element to bind to, for example elementlegend-itemaxis-labelmaskplotlegend-item-namereset-button etc.

Events correspond to DOM common events, for example clickmousedownmouseupdblclickmouseentermouseoutmouseovermousemovemouseleavecontextmenu etc. And support mobile events: touchstarttouchmovetouchend

// Plot adds click events to the entire chart area
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// Element to add a click event, element represents the graphic elements, graphical elements, please see: https://g2.antv.vision/en/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// Legend adds click events
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// Legend name adds click event
plot.on('legend-item-name:click', (...args) => {
  console.log(...args);
});

// 给 tooltip 添加点击事件
plot.on('tooltip:show', (...args) => {
  console.log(...args);
});

plot.on('tooltip:hide', (...args) => {
  console.log(...args);
});

plot.on('tooltip:change', (...args) => {
  console.log(...args);
});

// Label adds click events
plot.on('label:click', (...args) => {
  console.log(...args);
});

// Mask adds click events
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// Axis-label adds click events
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// Add click events to the annotation
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

Plot Method

render()

Render the chart.

update()

optional

Update chart configuration and overwrite it without comparing difference.

Example:

plot.update({
  ...currentConfig,
  legend: false,
});

Plot Theme

Recommend to use 💄 ThemeSet to customize your theme configurations online.

Built-in Theme

Built-in defaults: 'default' and 'dark'

{
  theme: 'default', // 'dark',
}

Theme attributes

In addition to using the built-in 'default' and 'dark' themes, you can also modify some of the theme content by setting the theme properties.

The following table lists the specific properties on the configuration items that make up the topic:

PropertiesTypeDescription
defaultColorstringTheme color
paddingnumbernumber[]
fontFamilystringChart font
colors10string[]Category color palette, used when the number of categories is less than 10
colors20string[]Category color palette, used when the number of categories is greater than 10
columnWidthRationumberGeneral histogram width ratio, 0-1 range of values
maxColumnWidthnumberMaximum width of histogram, pixel value
minColumnWidthnumberMinimum width of histogram, pixel value
roseWidthRationumberRose width ratio, 0-1 range of value
multiplePieWidthRationumberMultilayer pie and loop ratio, 0-1 range values
geometriesobjectConfigure the style of each shape for each Geometry, including the default style and the style for each state
componentsobjectConfigure theme samples for axes, legends, tooltips, and annotations
labelsobjectConfigure the theme style of the label under Geometry
innerLabelsobjectConfigure Geometry to display the Labels theme style inside the graph
pieLabelsobjectConfigure the theme style of pie chart labels

usage:

{
  theme: {
    colors10: [
      '#FF6B3B',
      '#626681',
      '#FFC100',
      '#9FB40F',
      '#76523B',
      '#DAD5B5',
      '#0E8E89',
      '#E19348',
      '#F383A2',
      '#247FEA',
    ];
  }
}

Theme attributes (StyleSheet)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

usage:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir';
    }
  }
}

支持的样式表属性:

PropertiesTypeDescription
backgroundColorstringBackground color
brandColorstringBrand color,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10stringQualitative palette,分类个数小于 10 时使用
paletteQualitative20stringQualitative palette,分类个数大于 10 时使用
paletteSemanticRedstringSemantic red
paletteSemanticGreenstringSemantic green
paletteSemanticYellowstringSemantic yellow
fontFamilystringfontFamily

Update theme

usage:

// example 1:
plot.update({ theme: 'dark' });

// example 2:
plot.update({ theme: { defaultColor: '#FF6B3B' } });

Custom theme

In addition, G2 provides a custom topic mechanism to define a new topic structure, allowing users to switch and define chart topics. Go G2 | Custom theme for more details.

🌰 Customize theme DEMO