Highcharts Cookbook

To get started, follow the ensuing instructions:

There are a few things that we need to do before we get started:

To get started, follow the ensuing instructions:

The .highcharts function is actually a part of a jQuery plugin used to create the Highcharts.Chart objects. It uses jQuery's element selector (for example, $('#container')) to find the element we want to render the chart to and renders the chart inside that element. Even if we supply a more general selector (for example, $('div')), it will only render the first element.

As previously mentioned, it is not necessary to use jQuery to render a chart. We can create a chart instance manually using the chart.renderTo option and the Highcharts.Chart constructor. Using this method, we can either pass in the ID of an element or a reference to an element, as shown in the following code:

    // Using an element id
    var options = {
        chart: {
            renderTo: 'container'
        },
         // ...
    }

    var chart = new Highcharts.Chart(options);
    
    // Using an element reference
    var otherOptions = {
        chart: {
            renderTo: document.getElementById('container');
        },
         // ...
    }

    var otherChart = new Highcharts.Chart(options);

To get started, follow the ensuing instructions:

If we want to add another series to the chart after it has been rendered, you can use the addSeries method and pass it in the series object. We can get a reference to the chart in one of the following two ways:

The addSeries method also has a few other arguments that can be passed. The addSeries method also has optional second and third arguments that determine whether the chart should be redrawn (defaults to true) and how the new series should be animated (defaults to true, but we could supply an animation object that is best described in the documentation).

To get started, follow the ensuing instructions:

By default, Highcharts will use the chart.type string to determine how the different series should be displayed. However, if a series has its own type provided, it will use that type when it is rendered in the chart.

Just changing the type string of the series will probably result in something ugly or otherwise undesired, especially in the case of a pie chart where it will render on top of the existing chart. Fortunately, it is possible to adjust the positioning and style of a pie series by providing a center option.

If we wanted to enable the labels on the pie chart, we could set dataLabels.enabled to true, as shown in the following code:

    var options = {
        // ...
        series: [{
            type: 'pie',
            name: 'Bar #1',
            data: [1,2,3,4],
            dataLabels: {
                enabled: true
            }
        }]
    };

In fact, a series object can have any options that you would normally set inside plotOptions.<chartType>. For more details, visit http://api.highcharts.com/highcharts#plotOptions.

To get started, follow the ensuing instructions:

Highcharts uses the same reference to the data for both charts. Unfortunately, it does not maintain a reference to the original data, so we need to call setData to update the chart with the new data.

To get started, follow the ensuing instructions:

To get started, perform the following instructions:

By default, tooltips are not shared—every series displays only the data for its own tooltip. If you want to have all the data to be available from a single tooltip, you can set tooltip.shared to true. In this case, if we are using tooltip.formatter, we need to change how we refer to our y values, that is, instead of this.y, we need to use this.points[i].y (where i is the series index). In fact, any value that we would normally access via this.<value> needs to be accessed via this.points[i].<value> when we have the shared Boolean value set to true. The one exception to this rule is this.x, which is always common.

If we wanted, we could also make our tooltips look better by adding HTML to our formatter function. The formatter function supports the <b>, <strong>, <i>, <em>, and <br/> tags, which gives us a bit more flexibility in how we design our tooltips. This is shown in the following code:

var options = {
    // ...
    tooltip: {
        formatter: function() {
            return 'The <b>value</b> at this point is <em>' + this.y +'</em>';
        }
    }
}

To get started, follow the ensuing instructions:

Highcharts supports multiple data formats. Earlier, we were using its most basic format—an array of numeric data. However, as in this example, we have seen that the data array can be more complex. A data series can support two other formats—an array of objects with named values (as we used previously) and an array of the [x,y] coordinates, as you can see in the following code:

var options = {
    // ...
    series: {
        data: [
            [1,1],
            [2,2],
            [3,3]
        ]
    }
}

When we specify data as an array of objects, we can access the information about the individual points via this.point.options. Since the formatter function is just a JavaScript function, we can do whatever we might normally do inside a JavaScript function, such as displaying our additional information.

We will need to have access to some translated words. We could use Google Translate or a similar service; but for our purposes, we will use French, just to ensure that changes have been made.

To get started, follow the ensuing instructions:

The Highcharts.setOptions function allows us to change the options of all the charts prior to the charts being rendered. Unlike other options, lang can only be set in this way. Internally, Highcharts has a number of different settings for language strings, and what we have done in our example is overwritten the default English strings with French ones.

Number formats and other numeric details can also be changed for languages that differ from English. Again, using French as the example, we will change the decimal separator to a comma and the thousands separator to a space instead of a comma, as shown in the following code:

Highcharts.setOptions({
    lang: {
        decimalPoint: ',',
        thousandsSep: ' '
    }
});

We can also change the numeric symbols if we like. Numeric symbols are used when we have large numbers to display, such as one million (1,000,000). By default, metric prefixes are used for every power of one thousand (1,000), such as k for one thousand (1k) and M for one million (1M). However, we can change these values as we like. We can also disable shortening altogether if we set lang.numericSymbols to null. This is shown in the following code:

Highcharts.setOptions({
    lang: {
        numericSymbols: [' thousand', ' millions']
    }
});

Some languages are displayed right-to-left (RTL) rather than left-to-right (LTR), as English is. If the language we are working with is an RTL language, we may want to move the positions of the x and y axes such that they are also right oriented. We can do this by setting yAxis.opposite to true (to move the y axis to the right-hand side) and xAxis.reversed to true (to start the x axis on the right-hand side), as shown in the following code snippet:

var options = {
    // ...
    yAxis: {opposite: true},
    xAxis: {opposite: true}
}

By calling Highcharts.setOptions for different lang options (refer to http://api.highcharts.com/highcharts#lang for more details), we can change just about any of the default strings in Highcharts including the strings used to determine the loading text (for example, lang.loading), the strings for downloading the chart (for example, lang.downloadJPEG.), and other date fields (for example, lang.weekdays).

If, for whatever reason, we need to render the chart before we set language options, there is a way to do so. All that we have to do is redraw the existing chart after it has rendered, as shown in the following code:

    Highcharts.setOptions(options);
    $('#container').highcharts().redraw();

To get started, follow the ensuing instructions:

The Highcharts.setOptions function, as previously discussed, sets options globally; a theme is just a set of options that we want applied to all charts.

If we want to store the theme in a separate file, we only need to make a few small changes. First, we will create our theme in a new file. In this file, we will create our theme in the Highcharts namespace, include our theme file after highcharts.js on our main page, and call Highcharts.setOptions, as shown in the following code:

    // myTheme.js
    Highcharts.myTheme = {
        // Our theme goes here
    };
    
    // main page
    <script type='text/javascript' src='highcharts.js'></script>
    <script type='text/javascript' src='myTheme.js'></script>
    
    <script type='text/javascript'>
        // ... chart creation ...
        
        Highcharts.setOptions(Highcharts.myTheme);
        
        // ... chart rendering …
    </script>

Highcharts provides a few basic themes out of the box. This includes grid, skies, gray, dark blue, and dark green, in addition to the default colors. They can be found in the themes folder and are included just as you would include any other theme. More details on theming can be found at http://highcharts.com/docs/chart-design-and-style/themes.

To get started, follow the ensuing instructions:

We have created a wrapper function for common options. Instead of using jQuery, we use the renderTo option to find an element with container as its ID and render the chart within that element. As we only overwrite certain properties in our SpiderWebChart function, we can pass in as many other options as we like and only the ones relevant to the SpiderWebChart function will be affected.