VChart Theme Extensions

• Repository Address: https://github.com/VisActor/vchart-theme

VChart provides a set of ready-to-use theme extensions as separate packages. These themes are not bundled with VChart by default; you can import and register them on demand to quickly achieve attractive, scenario-appropriate chart styles with minimal effort.

In addition, VChart offers dedicated theme packages for popular UI component libraries. These are introduced below.

Extension Package @visactor/vchart-theme

The vchart-theme package includes several extended themes, provided as ITheme objects or static JSON assets.

Demo

Visit codesandbox for a live preview.

Installation

@visactor/vchart-theme

# npm
npm install @visactor/vchart-theme

# yarn
yarn add @visactor/vchart-theme

Usage

Register and use themes included in vchart-theme:

import { allThemeMap } from '@visactor/vchart-theme';
import VChart from '@visactor/vchart';

// register themes
allThemeMap.forEach((theme, name) => {
  VChart.ThemeManager.registerTheme(name, theme);
});

// apply a theme
VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue');

If you only need a specific theme, you can import its JSON file directly from the package:

import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json';
import VChart from '@visactor/vchart';

// register the theme
VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue);

// apply the theme
VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue');

This package mainly includes the following theme JSON assets:

• light
• dark
• mobileLight light theme for mobile devices
• mobileDark dark theme for mobile devices
• legacyLight legacy light theme with simple legend style
• legacyDark legacy dark theme with simple legend style
• vScreenVolcanoBlue Large Screen – Volcano Blue
• vScreenClean Large Screen – Clean Crayon
• vScreenOutskirts Large Screen – Outskirts
• vScreenBlueOrange Large Screen – Automotive Blue-Orange
• vScreenFinanceYellow Large Screen – Finance Yellow
• vScreenWenLvCyan Large Screen – Culture & Tourism Cyan
• vScreenElectricGreen Large Screen – Electric Green
• vScreenECommercePurple Large Screen – E-commerce Purple
• vScreenRedBlue Large Screen – Red-Blue
• vScreenPartyRed Large Screen – Party Red
• semiDesignLight Semi Design – light
• semiDesignDark Semi Design – dark
• arcoDesignLight Arco Design – light
• arcoDesignDark Arco Design – dark
• ttPlatformLight TT Platform – light
• ttPlatformDark TT Platform – dark
• chartHubLight chartHub – light
• veODesignLight O Design – light
• veODesignLightFinance O Design – light – Financial industry palette
• veODesignLightGovernment O Design – light – Government industry palette
• veODesignLightConsumer O Design – light – Consumer industry palette
• veODesignLightAutomobile O Design – light – Automobile industry palette
• veODesignLightCulturalTourism O Design – light – Cultural tourism industry palette
• veODesignLightMedical O Design – light – Medical industry palette
• veODesignLightNewEnergy O Design – light – New energy industry palette
• veODesignDark O Design – dark
• veODesignDarkFinance O Design – dark – Financial industry palette
• veODesignDarkGovernment O Design – dark – Government industry palette
• veODesignDarkConsumer O Design – dark – Consumer industry palette
• veODesignDarkAutomobile O Design – dark – Automobile industry palette
• veODesignDarkCulturalTourism O Design – dark – Cultural tourism industry palette
• veODesignDarkMedical O Design – dark – Medical industry palette
• veODesignDarkNewEnergy O Design – dark – New energy industry palette