Theme Application Guide

VChart provides a flexible theme application mechanism that supports applying themes at both global and chart instance levels. This article will detail how to apply different types of themes, including default themes, custom themes, extension package themes, and how to extend installed themes.

Theme Application Scope

VChart supports two levels of theme application:

1. Global Application

The ThemeManager.setCurrentTheme() method (https://www.visactor.com/vchart/api/API/theme) can be used to set a global theme, which will affect all existing chart instances on the page as well as subsequently created chart instances.

2. Chart Instance Application

Through the theme configuration item in the chart spec or through the constructor (https://www.visactor.com/vchart/api/API/vchart), you can apply a specific theme to a single chart instance without affecting other charts.

You can also use the setCurrentTheme instance method to dynamically update the current chart, provided that the theme has been registered through VChart.ThemeManager.registerTheme.

vchart.setCurrentTheme('userTheme');

Theme Types

1. Default Themes

VChart has built-in light and dark default themes that can be used directly without registration.

Global Application of Default Theme

Chart Instance Application of Default Theme

2. Custom Themes

Custom themes are theme configuration objects defined by users. For custom content, refer to:

https://www.visactor.com/vchart/guide/tutorial_docs/Theme/Customize_Theme

Global Application of Custom Theme

Chart Instance Application of Custom Theme

There are two ways:

Method 1: Through the theme configuration item in spec

Method 2: Through instance method

3. Extension Package Themes

VChart provides an extension theme package @visactor/vchart-theme that contains various ready-to-use themes. Reference: https://www.visactor.com/vchart/guide/tutorial_docs/Theme/Theme_Extension

Installing Extension Theme Package

npm install @visactor/vchart-theme
# or
yarn add @visactor/vchart-theme

Global Application of Extension Package Theme

Chart Instance Application of Extension Package Theme

4. Extending Installed Themes

Sometimes we need to make some custom modifications to an existing theme rather than completely redefining it. You can get the installed theme and then extend it.

Extending Default Theme

Extending Extension Package Theme

Using Deep Merge to Extend Theme

For complex theme structures, you can use a deep merge utility to extend themes:

Summary

This article introduced a complete guide to VChart theme application:

• Theme Application Scope:

  • Global application: Affects all charts through ThemeManager.setCurrentTheme()
  • Chart instance application: Through the theme configuration item in spec or the instance's setCurrentTheme() method

• Theme Types:

  • Default themes: VChart's built-in light and dark themes that can be used without registration
  • Custom themes: Theme configuration objects defined by users
  • Extension package themes: Rich themes provided through the @visactor/vchart-theme package
  • Extending installed themes: Customizing modifications based on existing themes

• Best Practices:

  • Use global themes for multiple charts that need a unified style
  • Use instance themes for individual charts that need special styling
  • Use theme extension for scenarios that need fine-tuning based on existing themes

By flexibly using these theme application methods, you can easily achieve personalized customization and unified management of charts.