Besides the charting capabilities offered by Highcharts, theming is yet another strong feature of Highcharts. With its extensive theming API, charts can be customized completely to match the branding of a website or an app. Almost all of the chart elements are customizable through this API. In this article by Bilal Shahid, author of Highcharts Essentials, we will do the following things:

(For more resources related to this topic, see here.)

Use different fill types and fonts
Create a global theme for our charts
Use jQuery easing for animations

Using Google Fonts with Highcharts

Google provides an easy way to include hundreds of high quality web fonts to web pages. These fonts work in all major browsers and are served by Google CDN for lightning fast delivery. These fonts can also be used with Highcharts to further polish the appearance of our charts.

This section assumes that you know the basics of using Google Web Fonts. If you are not familiar with them, visit https://developers.google.com/fonts/docs/getting_started.

We will style the following example with Google Fonts.

We will use the Merriweather family from Google Fonts and link to its style sheet from our web page inside the <head> tag:

<link href='http://fonts.googleapis.com/css?family=Merriweather:400italic,700italic' rel='stylesheet' type='text/css'>

Having included the style sheet, we can actually use the font family in our code for the labels in yAxis:

yAxis: [{
...
labels: {
   style: {
     fontFamily: 'Merriweather, sans-serif',
     fontWeight: 400,
     fontStyle: 'italic',
     fontSize: '14px',
     color: '#ffffff'
   }
}
}, {
...
labels: {
   style: {
     fontFamily: 'Merriweather, sans-serif',
     fontWeight: 700,
     fontStyle: 'italic',
     fontSize: '21px',
     color: '#ffffff'
   },
   ...
}
}]

For the outer axis, we used a font size of 21px with font weight of 700. For the inner axis, we lowered the font size to 14px and used font weight of 400 to compensate for the smaller font size.

The following is the modified speedometer:

theming-highcharts-img-0

In the next section, we will continue with the same example to include jQuery UI easing in chart animations.

Using jQuery UI easing for series animation

Animations occurring at the point of initialization of charts can be disabled or customized. The customization requires modifying two properties: animation.duration and animation.easing. The duration property accepts the number of milliseconds for the duration of the animation. The easing property can have various values depending on the framework currently being used. For a standalone jQuery framework, the values can be either linear or swing. Using the jQuery UI framework adds a couple of more options for the easing property to choose from.

In order to follow this example, you must include the jQuery UI framework to the page. You can also grab the standalone easing plugin from http://gsgd.co.uk/sandbox/jquery/easing/ and include it inside your <head> tag.

We can now modify the series to have a modified animation:

plotOptions: {
...
series: {
   animation: {
     duration: 1000,
     easing: 'easeOutBounce'
   }
}
}

The preceding code will modify the animation property for all the series in the chart to have duration set to 1000 milliseconds and easing to easeOutBounce. Each series can have its own different animation by defining the animation property separately for each series as follows:

series: [{
...
animation: {
   duration: 500,
   easing: 'easeOutBounce'
}
}, {
...
animation: {
   duration: 1500,
   easing: 'easeOutBounce'
}
}, {
...
animation: {
     duration: 2500,
   easing: 'easeOutBounce'
}
}]

Different animation properties for different series can pair nicely with column and bar charts to produce visually appealing effects.

Creating a global theme for our charts

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:

theming-highcharts-img-1

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.

theming-highcharts-img-2