A Highcharts theme is a collection of predefined styles that are applied before a chart is instantiated. A theme will be applied to all the charts on the page after the point of its inclusion, given that the styling options have not been modified within the chart instantiation. This provides us with an easy way to apply custom branding to charts without the need to define styles over and over again.

In the following example, we will create a basic global theme for our charts. This way, we will get familiar with the fundamentals of Highcharts theming and some API methods.

We will define our theme inside a separate JavaScript file to make the code reusable and keep things clean. Our theme will be contained in an options object that will, in turn, contain styling for different Highcharts components.

Consider the following code placed in a file named custom-theme.js. This is a basic implementation of a Highcharts custom theme that includes colors and basic font styles along with some other modifications for axes:

Highcharts.customTheme = {

    colors: ['#1BA6A6', '#12734F', '#F2E85C', '#F27329', '#D95D30', '#2C3949', '#3E7C9B', '#9578BE'],

    chart: {
        backgroundColor: {
            radialGradient: {cx: 0, cy: 1, r: 1},
            stops: [
                [0, '#ffffff'],
                [1, '#f2f2ff']
            ]
        },
        style: {
            fontFamily: 'arial, sans-serif',
            color: '#333'
        }
    },
    title: {
        style: {
            color: '#222',
            fontSize: '21px',
            fontWeight: 'bold'
        }
    },
    subtitle: {
        style: {
            fontSize: '16px',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        lineWidth: 1,
        lineColor: '#cccccc',
        tickWidth: 1,
        tickColor: '#cccccc',
        labels: {
            style: {
                fontSize: '12px'
            }
        }
    },
    yAxis: {
        gridLineWidth: 1,
        gridLineColor: '#d9d9d9',
        labels: {
            style: {
                fontSize: '12px'
            }
        }
    },
    legend: {
        itemStyle: {
            color: '#666',
            fontSize: '9px'
        },
        itemHoverStyle:{
            color: '#222'
        }   
    }
};
Highcharts.setOptions( Highcharts.customTheme );

We start off by modifying the Highcharts object to include an object literal named customTheme that contains styles for our charts. Inside customTheme, the first option we defined is for series colors. We passed an array containing eight colors to be applied to series. In the next part, we defined a radial gradient as a background for our charts and also defined the default font family and text color. The next two object literals contain basic font styles for the title and subtitle components.

Then comes the styles for the x and y axes. For the xAxis, we define lineColor and tickColor to be #cccccc with the lineWidth value of 1. The xAxis component also contains the font style for its labels.

The y axis gridlines appear parallel to the x axis that we have modified to have the width and color at 1 and #d9d9d9 respectively.

Inside the legend component, we defined styles for the normal and mouse hover states. These two states are stated by itemStyle and itemHoverStyle respectively. In normal state, the legend will have a color of #666 and font size of 9px. When hovered over, the color will change to #222.

In the final part, we set our theme as the default Highcharts theme by using an API method Highcharts.setOptions(), which takes a settings object to be applied to Highcharts; in our case, it is customTheme.

The styles that have not been defined in our custom theme will remain the same as the default theme. This allows us to partially customize a predefined theme by introducing another theme containing different styles.

In order to make this theme work, include the file custom-theme.js after the highcharts.js file:

<script src="js/highcharts.js"></script>
<script src="js/custom-theme.js"></script>

The output of our custom theme is as follows:

We can also tell our theme to include a web font from Google without having the need to include the style sheet manually in the header, as we did in a previous section. For that purpose, Highcharts provides a utility method named Highcharts.createElement(). We can use it as follows by placing the code inside the custom-theme.js file:

Highcharts.createElement( 'link', {
    href: 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName( 'head' )[0], null ); 

The first argument is the name of the tag to be created. The second argument takes an object as tag attributes. The third argument is for CSS styles to be applied to this element. Since there is no need for CSS styles on a link element, we passed null as its value. The final two arguments are for the parent node and padding, respectively.

We can now change the default font family for our charts to 'Open Sans':

chart: {
    ...
    style: {
        fontFamily: "'Open Sans', sans-serif",
        ...
    }
}

The specified Google web font will now be loaded every time a chart with our custom theme is initialized, hence eliminating the need to manually insert the required font style sheet inside the <head> tag.

This image shows a chart with 'Open Sans' Google web font.