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 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