overview
Previous
timingKeyframe
Next
Academy
Loading...
In G2, Theme refers to the default styles of the graphics in a chart.
Themes can be configured at the view level:
({type: 'view',theme: {},});
// APIchart.theme({});
Themes can also be configured at the mark level:
({type: 'interval',theme: {},});
// APIchart.interval().theme({});
G2 provides built-in themes that can be switched using the type property.
chart.theme({ type: 'classicDark' }); // use the dark theme
There are two ways to customize the theme, the first is to specify in theme that you want to override certain theme styles:
const theme = {};// Spec formatconst options = {theme: {type: 'light',...theme,},};// API formatchart.theme({ type: 'light', ...theme });
The following example overrides the default color of the light theme:
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', y: 'frequency' },axis: { y: { labelFormatter: '.0%' } },theme: {color: 'red', // Set the default color to red},});chart.render();
If you want to customize all theme styles, you can add a new theme, override the default theme, register it, and then use it.
import { Light, register, Chart } from '@antv/g2';// define the themefunction CustomTheme() {const light = Light();return { ...light, color: 'red' };}// register the themeregister('theme.custom', CustomTheme);const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', y: 'frequency' },axis: { y: { labelFormatter: '.0%' } },theme: { type: 'custom' }, // use the theme});chart.render();
The default themes included are:
G2.LightG2.DarkG2.ClassicG2.ClassicDarkG2.AcademyFor a complete theme configuration, you can refer to the light theme.