Basic theming concepts

Before we move on to theming Highcharts, let's recall that all the options in Highcharts are given in hierarchical structure. This concept also applies to theming with Highcharts. If we need to style any component, we can define those styles within that component. Individual components in different series can have different styles. This ability to define formatting and style on both the global and series level gives us more control and flexibility over the aesthetics of the charts.

By default, Highcharts has predefined colors for series defined in an array:

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']

Highcharts applies these colors to the series in sequential order. When all the colors are used, they are pulled from the start of the array again.

We will modify an example of a combination of different chart types from Chapter 5, Pie, Polar, and Spider Web Charts, to define our custom colors for series...