For each Highcharts' chart, you can set a title and a subtitle. In the previous section, we have already declared the chart with the title Sales by city. We will now add a subtitle section with the text Statistics of 2012.

In the credits parts, you will be able to set the source or the copyright of your chart. By default, it is set to Highcharts.com. We will change this default value to Packt Publishing. The URL of the credit by default is http://www.highcharts.com, but you can change it by setting the href parameter with your own URL. We will change this value with http://www.packtpub.com.

The series section is a mandatory one of Highcharts, which you will have to include for every chart, that you will create. A series is simply a set of data that will be defined with a name and an array of data. We will now modify the previous series section by adding another section that will represent the sales of two different years for the three cities already defined:

The axes sections will be set for some charts, such as line and column charts, but will not be included for charts, such as pie charts or donut charts. Axes are divided into two types: Y Axes and X Axes. Then, each axis is divided into four categories:

By default, the axis is calculated automatically, but you can set a minimum or maximum value if you set the 'min' and 'max' parameters of your axis. Then, you can add plot lines and plot bands for each of your axes. Plot lines and plot bands can be used when you want to display a limit or when you want to point out some parts of your axis.

For our chart, we will add a plot line, which will represent the best sales of the company and a plot band, which will represent the expected sales:

The tool tip element appears when you are pointing your mouse over an element. Highcharts sets a default tool tip, but you can override it by setting a new template. In our example, we will modify the tool tip by adding a measurement unit, which will simply be Units in our case.

The chart legend can be displayed by default on some Highcharts' charts. Nevertheless, you can hide or customize the legend. In order to retrieve some space in our chart, we will change the legend position to the top right side of the chart.

The final code looks like:

$(function () { 
    var chart = $('#myFirstChartContainer').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Sales by city'
        },
        subtitle: {
            text: 'Statistics of 2012'
        },
        credits: {
            text: 'Packt Publishing',
            href: 'http://www.packtpub.com'
        },
        xAxis: {
            categories: ['London', 'Paris', 'Madrid']
        },
        yAxis: {
            title: {
                text: 'Sales'
            },
            plotLines: [{
                color: '#FF0000',
                width: 2,
                value: 2500
            }],
            plotBands: [{
                color: 'rgba(124,252,0, 0.3)',
                from: 1000,
                to: 1500,
                label: {
                    text: 'Expected Sales'
                }
            }]
        },
        tooltip: {
            valueSuffix: ' Units'
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            floating: true
        },
        series: [{
            name: '2011',
            data: [1000, 2500, 1500]
        },
        {
            name: '2012',
            data: [1200, 2200, 1700]
        }]
    });
});

At the end of this section, you have created the main elements that comprise a chart, and you will now be able to reuse it to any charts that you would want to create.