Theme

1 min read

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

Refer