Learning Highcharts: Whether you're a novice or an advanced web developer, this practical tutorial will enable you to produce stunning interactive charts using Highcharts. With a foreword by the creator, it's the only guide you'll need to get started.

In the Highcharts configuration object, the components at the top level represent the skeleton structure of a chart. The following is a list of the major components that are covered in this chapter. For the references of all the configurations, go to http://api.highcharts.com/highcharts.

The following is a list of the major components:

Before we start to learn how Highcharts layouts work, it is imperative that we understand some basic concepts first. To do that, let us first recall the chart example used in Chapter 1, Web Charts, and set a couple of borders to be visible. First, set a border around the plot area; to do that we can set the options of plotBorderWidth and plotBorderColor in the chart section, as follows:

        chart: {
                renderTo: 'container',
                type: 'spline',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
        },

The second border is set around the Highcharts container. Next, we extend the preceding chart section with additional settings:

        chart: {
                renderTo: 'container',
                ....
                borderColor: '#a1a1a1',
                borderWidth: 2,
                borderRadius: 3
        },

Basically, this sets the container border color with the width of 2 pixels and the...

In this section, we are going to look into Highcharts axis configuration in terms of their functional area. Throughout this section, we will start off with a plain line graph and gradually apply more options to the chart to demonstrate the effects.

    chart: {
        renderTo: 'container',
        height: 250,
        spacingRight: 20 
    },
    title: {
        text: 'Market Data...

By now, we should have an idea of what series properties do. In this section we are going to examine it in more detail.

The series property is an array of series configuration objects that contain data- and series-specific options. It allows us to specify single series data and multiple series data. The purpose of series objects is to inform Highcharts of the format of the data and how the data is presented in the chart.

All the data values in the chart are specified through the data field. The data field is highly flexible, and it can take an array in a number of forms, as follows:

The first two options have already been examined in the Accessing axis data type section. In this section we will explore the third option. Let's use the single series Nasdaq example and we will specify the series data through a mixture of numerical values and objects:

         series...

plotOptions is a wrapper object for config objects for each series type, which are area, areaspline, bar, column, pie, scatter, spline gauge, and range. These configurations have properties such as plotOptions.line.lineWidth, common to other series types, as well as other configurations such as plotOptions.pie.center, which is only specific to the pie series type. Among the specific series, there is plotOptions.series, which is used for common plotting options shared by the whole series.

The preceding plotOptions can form a chain of precedence between plotOptions.series, plotOptions.{series-type}, and the series configuration. For example, series[x].shadow (where series[x].type is 'pie') has a higher precedence than plotOptions.pie.shadow, which in turn has a higher precedence than plotOptions.series.shadow.

The purpose of this is the chart composed of multiple different series types. For example, a chart with multiple series of columns and a single line series, so...

Tooltips in Highcharts are enabled by the boolean option tooltip.enabled, which is true by default. Their content formats are flexible, which can be defined via a callback handler or in HTML style. We will continue from the example in the previous section. As the chart is packed with multiple lines and columns, first we can enable the crosshair tooltip for helping us align the data points onto the axes. The crosshairs configuration can take either a Boolean value to activate the feature or an object style for the crosshair line style. The following is the code snippet to set up crosshairs with an array of x- and y-axis configurations for the gray color and dash line styles.

            tooltip : {
                crosshairs: [{
                     color: '#5D5D5D',
                     dashStyle: 'dash',
                     width: 2
                }, {
                     color: '#5D5D5D',
                     dashStyle: 'dash',
                     width: 2
  ...

There are two types of animations in Highcharts—initial and update animations. Initial animation is the animation when series data is ready and the chart is displayed; update animation is after the initial animation and when the series data or any parts of the chart anatomy have been changed.

The initial animation configurations can be specified through plotOptions.series.animation or plotOptions.{series-type}.animation, whereas the update animation is configured via the chart.animation property.

All the Highcharts animations use jQuery implementation. The animation property can be a boolean value or a set of animation options. Highcharts uses jQuery swing animation. The following are the options:

Here, we continue the example from the previous...

Highcharts not only supports single color values, but also allows complex color gradient definitions. Highcharts supports linear gradient, which is a directional color shading as well as radial (or circular) gradient. In this section, we will experiment with linear gradient, and the radial gradient will be explored in Chapter 6, Gauge, Polar, and Range Charts. In Highcharts, the color gradient is based on the SVG linear color gradient standard, which is composed of two sets of information, as follows:

We use the previous stock market example with only the Volume series, and redefine yAxis.alternateGridColor as follows:

       yAxis: [{
            title: { text: 'Nasdaq index...

In this chapter, major configuration components were discussed and experimented with examples shown. By now, we should be comfortable and ready to plot some of the basic graphs with more elaborate styles. In the next chapter, we will explore line, area, and scatter graphs supported by Highcharts. We will apply configurations that we have learned in this chapter and explore the series-specific style options to plot charts in an artistic style.