Theme system with built-in themes and customization options for colors, fonts, and visual styling.
Pre-configured theme objects for consistent visual styling.
/**
* Built-in theme imports
*/
import { Light, Dark, Academy, Classic, ClassicDark } from "@antv/g2";
/**
* Light theme - clean, minimal appearance with light background
*/
const Light: ThemeOptions;
/**
* Dark theme - dark background with light text and elements
*/
const Dark: ThemeOptions;
/**
* Academy theme - academic/research-focused styling
*/
const Academy: ThemeOptions;
/**
* Classic theme - traditional G2 styling (default)
*/
const Classic: ThemeOptions;
/**
* ClassicDark theme - dark version of classic theme
*/
const ClassicDark: ThemeOptions;Built-in Theme Usage:
import { Chart, Light, Dark } from "@antv/g2";
// Apply light theme
const lightChart = new Chart({
container: "light-chart",
theme: Light
});
// Apply dark theme
const darkChart = new Chart({
container: "dark-chart",
theme: Dark
});
// Theme as string reference
const classicChart = new Chart({
container: "classic-chart",
theme: "classic" // String reference to built-in theme
});Core theme structure and customization options.
interface ThemeOptions {
/** Color palette configuration */
colors?: ColorTheme;
/** Typography settings */
typography?: TypographyTheme;
/** Component styling */
components?: ComponentTheme;
/** Animation defaults */
animation?: AnimationTheme;
/** Layout and spacing */
layout?: LayoutTheme;
}
interface ColorTheme {
/** Primary color palette for categorical data */
category?: string[];
/** Sequential color scales */
sequential?: string[];
/** Diverging color scales */
diverging?: string[];
/** Background colors */
background?: {
primary?: string;
secondary?: string;
};
/** Text colors */
text?: {
primary?: string;
secondary?: string;
disabled?: string;
};
/** Border and stroke colors */
border?: {
primary?: string;
secondary?: string;
};
}
interface TypographyTheme {
/** Font family stack */
fontFamily?: string;
/** Base font size */
fontSize?: number;
/** Font weights */
fontWeight?: {
normal?: number;
bold?: number;
};
/** Line height ratios */
lineHeight?: {
normal?: number;
heading?: number;
};
}Styling configuration for specific chart components.
interface ComponentTheme {
/** Axis styling */
axis?: AxisTheme;
/** Legend styling */
legend?: LegendTheme;
/** Tooltip styling */
tooltip?: TooltipTheme;
/** Grid styling */
grid?: GridTheme;
/** Label styling */
label?: LabelTheme;
}
interface AxisTheme {
/** Axis line styling */
line?: {
stroke?: string;
strokeWidth?: number;
};
/** Tick mark styling */
tick?: {
stroke?: string;
strokeWidth?: number;
length?: number;
};
/** Axis label styling */
label?: {
fill?: string;
fontSize?: number;
fontFamily?: string;
};
/** Axis title styling */
title?: {
fill?: string;
fontSize?: number;
fontWeight?: number;
};
}
interface LegendTheme {
/** Legend item styling */
item?: {
fill?: string;
fontSize?: number;
spacing?: number;
};
/** Legend title styling */
title?: {
fill?: string;
fontSize?: number;
fontWeight?: number;
};
/** Legend marker styling */
marker?: {
size?: number;
spacing?: number;
};
}Component Theme Examples:
// Custom axis theme
const customTheme = {
components: {
axis: {
line: {
stroke: "#333",
strokeWidth: 2
},
label: {
fill: "#666",
fontSize: 12,
fontFamily: "Arial, sans-serif"
},
title: {
fill: "#000",
fontSize: 14,
fontWeight: 600
}
}
}
};
const chart = new Chart({
container: "chart",
theme: customTheme
});Creating and applying custom color schemes.
interface ColorPalette {
/** Categorical colors for discrete data */
category10?: string[];
category20?: string[];
/** Sequential colors for continuous data */
blues?: string[];
reds?: string[];
greens?: string[];
/** Custom color interpolation */
custom?: {
domain: [number, number];
range: string[];
interpolate?: "linear" | "hsl" | "lab";
};
}Color Palette Examples:
// Custom categorical palette
const brandColors = {
colors: {
category: [
"#FF6B35", // Brand orange
"#004E7C", // Brand blue
"#FFE066", // Brand yellow
"#4ECDC4", // Brand teal
"#45B7D1", // Light blue
"#96CEB4", // Mint green
"#FFEAA7", // Cream
"#DDA0DD" // Plum
]
}
};
// Custom sequential palette
const heatmapTheme = {
colors: {
sequential: [
"#f7fbff", "#deebf7", "#c6dbef", "#9ecae1",
"#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"
]
}
};
const chart = new Chart({
container: "chart",
theme: brandColors
});Font and text styling configuration.
interface TypographyConfig {
/** Font family for all text */
fontFamily?: string;
/** Font size scaling */
fontSize?: {
/** Base font size */
base?: number;
/** Title font size */
title?: number;
/** Label font size */
label?: number;
/** Legend font size */
legend?: number;
};
/** Font weight settings */
fontWeight?: {
normal?: number;
bold?: number;
};
}Typography Examples:
// Custom typography theme
const typographyTheme = {
typography: {
fontFamily: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
fontSize: {
base: 14,
title: 18,
label: 12,
legend: 13
},
fontWeight: {
normal: 400,
bold: 600
}
}
};
// System font theme
const systemFontTheme = {
typography: {
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
}
};Default animation settings across all chart elements.
interface AnimationTheme {
/** Default animation duration */
duration?: number;
/** Default animation easing */
easing?: string;
/** Default animation delay */
delay?: number;
/** Enable/disable animations globally */
enabled?: boolean;
}Animation Theme Examples:
// Slow, smooth animations
const smoothTheme = {
animation: {
duration: 1500,
easing: "ease-in-out",
delay: 0,
enabled: true
}
};
// Fast, snappy animations
const snappyTheme = {
animation: {
duration: 300,
easing: "ease-out",
delay: 50,
enabled: true
}
};
// Disable animations
const staticTheme = {
animation: {
enabled: false
}
};Spacing, padding, and layout configuration.
interface LayoutTheme {
/** Default padding around chart */
padding?: number | [number, number, number, number];
/** Spacing between components */
spacing?: {
component?: number;
legend?: number;
axis?: number;
};
/** Default dimensions */
size?: {
width?: number;
height?: number;
};
}Automatic dark mode detection and switching.
interface DarkModeOptions {
/** Enable automatic dark mode detection */
auto?: boolean;
/** CSS media query for dark mode */
mediaQuery?: string;
/** Light theme configuration */
light?: ThemeOptions;
/** Dark theme configuration */
dark?: ThemeOptions;
}Dark Mode Examples:
// Automatic dark mode switching
const adaptiveChart = new Chart({
container: "chart",
theme: {
auto: true,
mediaQuery: "(prefers-color-scheme: dark)",
light: Light,
dark: Dark
}
});
// Manual dark mode toggle
function toggleDarkMode(isDark: boolean) {
chart.options({
theme: isDark ? Dark : Light
});
}Building completely custom themes from scratch.
/**
* Create custom theme with full configuration
*/
function createCustomTheme(options: ThemeOptions): ThemeOptions;
/**
* Extend existing theme with custom options
*/
function extendTheme(baseTheme: ThemeOptions, overrides: Partial<ThemeOptions>): ThemeOptions;Custom Theme Examples:
// Corporate theme
const corporateTheme = {
colors: {
category: ["#1f4e79", "#2e75b6", "#5b9bd5", "#a5c6e5"],
background: {
primary: "#ffffff",
secondary: "#f8f9fa"
},
text: {
primary: "#2c3e50",
secondary: "#7f8c8d"
}
},
typography: {
fontFamily: "'Source Sans Pro', sans-serif",
fontSize: 13,
fontWeight: {
normal: 400,
bold: 600
}
},
components: {
axis: {
line: { stroke: "#e1e8ed", strokeWidth: 1 },
label: { fill: "#657786", fontSize: 12 },
title: { fill: "#14171a", fontSize: 14, fontWeight: 600 }
},
legend: {
item: { fill: "#657786", fontSize: 12 },
title: { fill: "#14171a", fontSize: 13, fontWeight: 600 }
}
},
layout: {
padding: [20, 30, 20, 30],
spacing: {
component: 15,
legend: 10,
axis: 5
}
}
};
// Scientific publication theme
const scientificTheme = {
colors: {
category: ["#000000", "#666666", "#cccccc"],
background: {
primary: "#ffffff",
secondary: "#f5f5f5"
}
},
typography: {
fontFamily: "'Times New Roman', serif",
fontSize: 11,
lineHeight: { normal: 1.2 }
},
components: {
axis: {
line: { stroke: "#000000", strokeWidth: 0.5 },
label: { fill: "#000000", fontSize: 10 },
title: { fill: "#000000", fontSize: 11 }
}
}
};Methods for applying and updating themes.
// Apply theme during chart creation
const chart = new Chart({
container: "chart",
theme: customTheme
});
// Update theme after creation
chart.theme(newTheme);
// Get current theme
const currentTheme = chart.theme();
// Reset to default theme
chart.theme("classic");Themes that adapt to different screen sizes and contexts.
interface ResponsiveTheme {
/** Default theme */
base: ThemeOptions;
/** Breakpoint-specific themes */
breakpoints?: {
mobile?: Partial<ThemeOptions>;
tablet?: Partial<ThemeOptions>;
desktop?: Partial<ThemeOptions>;
};
}Responsive Theme Examples:
// Mobile-optimized theme
const responsiveTheme = {
base: Light,
breakpoints: {
mobile: {
typography: {
fontSize: 16, // Larger text for mobile
},
layout: {
padding: [10, 15, 10, 15], // Reduced padding
},
components: {
legend: {
item: { fontSize: 14 },
marker: { size: 8 }
}
}
},
desktop: {
typography: {
fontSize: 12,
},
layout: {
padding: [20, 30, 20, 30],
}
}
}
};