Themes

Overview

ZingChart offers the ability to customize and use your own chart themes, as well as three pre-built themes: light, dark, and classic.

Custom Color Palettes

In addition to using the pre-built themes, it is also possible to create your own themes to be easily reused with multiple charts. Begin by creating an object that will hold the theme data.

var myTheme = {};

Inside your theme object, create an object to hold your color palette information.

var myTheme = {
  palette: { }
};

Arrays of color palette arrays should be placed in the "palette" object. Palettes are defined by each chart type available within ZingChart.

var myTheme = {
  palette: {
    line: [
        [ '#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9' ], /* light blue */
        [ '#FBFCFE', '#E80C60', '#E80C60', '#d00a56' ], /* light pink */
        [ '#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d' ], /* light purple */
        [ '#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A' ], /* med yellow */
        [ '#FBFCFE', '#FB301E', '#FB301E', '#e12b1b' ], /* med red */
        [ '#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D' ], /* med green */
    ]
  }
};

Note: If you have more series than what is defined in your theme, any remaining series will use a random color scheme. You can specify as many color arrays as you like in your theme.

Custom Element Defaults

You've seen how to style the series data with color palettes, now let's look at how to style the rest of the chart objects.

To style the rest of your chart, create a graph object inside of your theme file (outside of the "palette" object).

var myTheme = {
  palette: {
    line: [
        [ '#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9' ], /* light blue */
        [ '#FBFCFE', '#E80C60', '#E80C60', '#d00a56' ], /* light pink */
        [ '#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d' ], /* light purple */
        [ '#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A' ], /* med yellow */
        [ '#FBFCFE', '#FB301E', '#FB301E', '#e12b1b' ], /* med red */
        [ '#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D' ], /* med green */
    ]
  },
  graph: { }
};

Within your "graph" object, style objects as you normally would to set new defaults. You can add styles to any part of the chart within your theme file that you want to be reused on multiple charts. For example, to set the defaults for the "title" object in a chart:

var myTheme = {
  palette: {
    line: [
        [ '#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9' ], /* light blue */
        [ '#FBFCFE', '#E80C60', '#E80C60', '#d00a56' ], /* light pink */
        [ '#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d' ], /* light purple */
        [ '#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A' ], /* med yellow */
        [ '#FBFCFE', '#FB301E', '#FB301E', '#e12b1b' ], /* med red */
        [ '#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D' ], /* med green */
    ]
  },
  graph: {
    title: {
      fontFamily: 'Lato',
      fontSize: 14,
      padding: 15,
      fontColor: '#1E5D9E',
      adjustLayout: true
    }
  }
};

Note: When using external themes, attributes included in your actual chart configuration will overwrite the external theme default values.

Applying Defaults

To apply the defaults to a chart, set the 'defaults' option in the zingchart.render() method:

zingchart.render({
  id: 'myChart', // Id of the chart's container div
  height: 400, // Height of the chart
  width: '100%', // Width of the chart
  data: myConfig, // Chart configuration object
  defaults: myTheme // Theme object
});

Using A .txt File

To pull in defaults from an external file, simply place the defaults object in an external .txt file, and set the path to the file using the 'defaultsurl' option in the zingchart.render() method:my_theme.txt:

{
  palette: {
    vbar: [
      [ "#ffffff", "#40beeb", "#40beeb", "#40beeb" ], // First series palette...
      [ "#ffffff", "#305f74", "#305f74", "#305f74" ], // Second series palette...
      [ "#ffffff", "#4492a8", "#4492a8", "#4492a8" ], // Third series...
      [ "#ffffff", "#8e8e8e", "#8e8e8e", "#8e8e8e" ],
      [ "#ffffff", "#85bdcd", "#85bdcd", "#85bdcd" ]
    ],
    line: [
      [ "#ffffff", "#40beeb", "#40beeb", "#40beeb" ], // First series palette...
      [ "#ffffff", "#305f74", "#305f74", "#305f74" ], // Second series palette...
      [ "#ffffff", "#4492a8", "#4492a8", "#4492a8" ], // Third series...
      [ "#ffffff", "#8e8e8e", "#8e8e8e", "#8e8e8e" ],
      [ "#ffffff", "#85bdcd", "#85bdcd", "#85bdcd" ]
    ]
  },
  graph: {
    title: {
      'background-color': "#c2af9e",
      height: "40px",
      'font-size': "16px",
      'font-color': "#333"
    }
  }
}

Render method:

zingchart.render({
  id: 'myChart', // Id of the chart's container div
  height: 400, // Height of the chart
  width: 600, // Width of the chart
  data: myData, // Chart configuration object
  defaultsurl: './path/to/my_theme.txt' // Path to my_theme.txt
});

Summary

Using chart themes can help add consistency across your visualizations, save time, or just be a good starting point when creating your charts.

Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.