Introducing column charts

Column charts are the most common type of charts. They have categories organized horizontally on the x axis (for example, time) and data is placed vertically on the y axis. They are useful for illustrating the difference between the data of each category.

Consider the London Olympics 2012 medal table, in which the top five countries are as follows:

The preceding list shows the gold, silver, and bronze medals won by the top five countries. The last column shows the total number of medals won by the respective country. We will plot this data into a column chart for a more meaningful visualization:

1. Create a new blank HTML file that includes the jQuery and highcharts.js scripts. You can also copy the HTML code from the example in the previous chapter. Note that the chart container element has the value of the id attribute of medal_table:

   <div id="medal_table" style="width: 600px; height: 450px;"></div>

2. Place the following code in your <script></script> tags or the external JavaScript file if you are using one:

   (function() {
     $( '#medal_table' ).highcharts({
       chart: {
         type: 'column'
       },
       title: {
         text: 'Olympics 2012 Medal Table'
       },
       subtitle: {
         text: 'Source: http://www.bbc.com/sport/olympics/2012/medals/countries'
       },
       xAxis: {
         title: {
           text: 'Countries'
         },
         categories: ['United States', 'China', 'Russian Federation', 'Great Britain', 'South Korea']
       },
       yAxis: {
         title: {
           text: 'Number of total medals'
         }
       },
       series: [{
         name: 'Medals',
         data: [104, 88, 82, 65, 28]
       }]
     });
   })();

   The preceding code will produce the following column chart:

   

The preceding chart shows the total number of medals earned by each country. By referring to the total medal count, we include the numbers of gold, silver, and bronze medals.

In the previous example, we gave a subtitle to the chart using the subtitle property that points towards the source of the plotted data. The subtitle will appear below the main chart title. Also, note that both the x axis and y axis have their respective titles given to them via the title property. By hovering over each column, you can see the tooltip showing the category name (in this case, the country) and the value representing the data point.

The tooltip for the Great Britain series is as follows:

The preceding example shows the simplicity of the Highcharts configuration structure, which follows a hierarchical pattern. Each top-level component receives its own set of configuration objects comprising of its properties and their respective values. We will look at these additional properties in just a moment, but let's first modify the preceding chart to show multiple series.

Using the official documentation of Highcharts

By the end of this example, you might be willing to learn more about Highcharts components and their properties. For that purpose, the Highcharts website includes a robust documentation section that provides information about all the functionalities that Highcharts offers. This includes Highcharts components and their properties, methods, and events. You can find the Highcharts documentation at http://api.highcharts.com/highcharts.

The documentation presents information about Highcharts components and their properties in a hierarchical manner, thus making it a lot easier to find a specific property or method for a component.

Detailed documentation is accompanied by code examples in JS Fiddle that you can modify on the fly and see the results instantly.