Theming Guide

Learn how to customize chart appearance with themes, colors, and styling options.

Built-in Themes

React ECharts Kit comes with several pre-built themes optimized for different use cases.

Using Built-in Themes

tsx

Available Themes

Light Theme

Clean, bright theme perfect for dashboards and reports.

theme="light"

Dark Theme

Modern dark theme ideal for night mode interfaces.

theme="dark"

Minimal Theme

Subtle, understated theme for professional presentations.

theme="minimal"

Colorful Theme

Vibrant, high-contrast theme for engaging visualizations.

theme="colorful"

Creating Custom Themes

Build your own themes to match your brand colors and design system.

Custom Theme Object

tsx

Brand Theme Example

tsx

Using the Theme Hook

The useChartTheme hook provides advanced theme management capabilities.

Theme Provider Setup

tsx

Dynamic Theme Switching

tsx

Color Customization

Fine-tune colors for individual charts and data series.

Custom Color Palette

tsx

Gradient Colors

tsx

Advanced Styling

Customize every aspect of your charts with advanced styling options.

Custom Grid and Axes

tsx

Custom Tooltip and Legend

tsx

Theming Best Practices

Guidelines for creating effective and accessible chart themes.

Do

• Use sufficient color contrast (4.5:1 minimum)
• Limit color palette to 5-8 colors
• Test themes in different lighting conditions
• Provide both light and dark theme options
• Use semantic colors (red for errors, green for success)
• Consider colorblind accessibility

Don't

• Use too many bright, saturated colors
• Rely solely on color to convey information
• Use red and green as the only differentiators
• Make text too light on light backgrounds
• Use gradients excessively
• Ignore your brand guidelines

Accessibility Tip

Always test your themes with accessibility tools and consider users with visual impairments. Use tools like WebAIM's Color Contrast Checker to ensure your color combinations meet WCAG guidelines.