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
});
https://app.zingsoft.com/demos/embed/A4WEINO4
https://app.zingsoft.com/demos/embed/A4WEINO4

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.

https://app.zingsoft.com/demos/embed/SK76JC7S
https://app.zingsoft.com/demos/embed/SK76JC7S

Dark

The dark theme will make the chart dark and the text light.

https://app.zingsoft.com/demos/embed/C9AYGXJN
https://app.zingsoft.com/demos/embed/C9AYGXJN

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.

https://app.zingsoft.com/demos/embed/CMW8L6W1
https://app.zingsoft.com/demos/embed/CMW8L6W1

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.

https://app.zingsoft.com/demos/embed/LRGSA2DC
https://app.zingsoft.com/demos/embed/LRGSA2DC

Custom

A custom theme can be defined globally and applied to your charts.

https://app.zingsoft.com/demos/embed/LZHII36K
https://app.zingsoft.com/demos/embed/LZHII36K