ZingChart Themes
The ZingChart library has several built-in themes as well as the ability to extend and create new themes.
Implementation
Graphset
You can enable themes in several ways. The first way to enable a theme is a the graphset level.
let chartConfig = {
theme: 'dark',
graphset: [{
type: 'line',
noData: {},
series: []
}]
};
Top Level
If you are not using graphset, you can just define theme in the top level of your chart configuration.
let chartConfig = {
theme: 'dark',
type: 'line',
noData: {},
series: []
};
Globally
You can define a theme globally at the window level by defining the theme on the zingchart window object.
// MUST define before zingchart.render() call
zingchart.THEME = 'dark';
let chartConfig = {
type: 'line',
noData: {},
series: []
};
Defaults (Custom)
You can define a theme globally in a JavaScript variable and assign the theme defaults at render.
// MUST define at a scope available at zingchart.render()
let myTheme = {};
let chartConfig = {
type: 'line',
noData: {},
series: []
};
zingchart.render({
id: 'myChart',
data: chartConfig,
defaults: myTheme
});
Defaultsurl (Custom)
You can define a theme globally in a .txt file and assign the theme defaults at render.
// MUST define at a scope available at zingchart.render()
let themeConfig = {};
let chartConfig = {
type: 'line',
noData: {},
series: []
};
zingchart.render({
id: 'myChart',
data: chartConfig,
defaultsurl: './path/to/myTheme.txt'
});
Default (Light)
The light theme is enabled by default implicitly.
Dark
The dark theme will make the chart dark and the text light.
Classic
The classic theme was the original theme from our Flash days. For backwards compatibility and to pay homage our roots, we still keep it around.
Spark
The spark theme will remove all text and axis lines from the chart. The spark theme is a shortcut of default attributes which turn off a lot of features.
Custom
A custom theme can be defined globally and applied to your charts.
Summary
Themes allow you to quickly apply preset styling to each of your charts. You can use our built in themes or create your own!