Highcharts - SPLessons

Highcharts Column Charts

Chapter 7

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Column Charts

Highcharts Column Charts

shape Introduction

Column charts are used to represent data vertically. This chapter demonstrates how to create Highcharts column charts and explains about column charts and its types.

Column Chart

shape Description

Highcharts Column Charts can be represented in one or more data series. In single data series, each data point is represented with different colors, whereas, in multiple data series, each series data points are placed next to one another and separated with different color.

shape Conceptual
figure

Below image represents some data in column chart. Depending on the left side axis value, the column chart displays the vertical bars as shown.

Highcharts Column Types

shape Description

Following are a few types of Highcharts column.

Basic column Type

shape Description

The Highcharts Column Charts represent the data graphically. One or more data series points can be displayed using column charts. The column charts are mainly useful for comparing multiple series of data.

shape Example

Below code explains the creation of a Basic Column chart using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 00px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Jan to Dec'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});

</script>
</body>
</html>

Stacked column Type

shape Description

Instead of representing the columns side by side, the user can stack the columns on top of each other using the stacked column object. One can observe each data series total values and the changes in the ratio.

shape Example

Below code explains how to create a Stacked column chart using CDN access for both Highcharts and jQuery.


<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Product sales by region'
        },
        xAxis: {
            categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Sales'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'Top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'Cricket bat',
            data: [20, 15, 25, 35, 40]
        }, {
            name: 'Rackets',
            data: [15, 20, 15, 10, 30]
        }, {
		    name: 'Sports shoe',
			data: [45, 30, 20, 50, 40]
		}, {
            name: 'Footbal',
            data: [25, 30, 15, 40, 35]
        }]
    });
});
</script>
</body>
</html>

Stacked and grouped column Type

shape Description

The stacked columns can be grouped by giving the same stack name for different data series i.e., the columns with the same stack name are grouped and displayed.

shape Example

The following example demonstrates how to group a stacked column chart using the CDN access for both Highchart and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Product sales by region'
        },

        xAxis: {
            categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Sales'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'Cricket bats',
            data: [20, 15, 25, 35, 40],
            stack: 'Outdoor games'
        }, {
            name: 'Rackets',
            data: [15, 20, 15, 10, 30],
            stack: 'Outdoor games'
        }, {
            name: 'carroms',
            data: [45, 30, 20, 50, 40],
            stack: 'Indoor games'
        }, {
            name: 'chess',
            data: [25, 30, 15, 40, 35],
            stack: 'Indoor games'
        }]
    });
});
</script>
</body>
</html>

Stacked percentage column Type

shape Description

The percentage value of given data series can be represented using the stacked percentage column charts.

shape Example

The following example demonstrates how to create a Stacked percentage column chart using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Product sales by region'
        },
        xAxis: {
            categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Sales'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        series: [{
            name: 'Cricket bats',
            data: [20, 15, 25, 35, 40]
        }, {
            name: 'Rackets',
            data: [15, 20, 15, 10, 30]
        }, {
		    name: 'Sports shoe',
			data: [45, 30, 20, 50, 40]
		}, {
            name: 'Footbal',
            data: [25, 30, 15, 40, 35]
        }]
    });
});
</script>
</body>
</html>

Column with negative values

shape Description

If the given data set has both positive and negative values, then the chart is displayed with two scales for both the values.

shape Example

The following example demonstrates how to create a column chart with both positive and negative values using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Product Profit & Gain sales values by region'   
   };   
   var xAxis = {
      categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
   };
   var credits = {
      enabled: false
   };
   var series= [{
            name: 'Cricket bats',
            data: [20, 15, 25, 35, 40]
        }, {
            name: 'Rackets',
            data: [15, 20, 15, -10, -30]
        }, {
		    name: 'Sports shoe',
			data: [45, 30, -20, -50, 40]
		}, {
            name: 'Footbal',
            data: [-25, -30, 15, 40, 35]
        }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Column with rotated labels

shape Description

The labels given for each column can be rotated by giving a preferred value to the label rotation object.

shape Example

The following example demonstrates how to create a column chart with rotated labels.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'World\'s largest cities per 2014'   
   };    
   var xAxis = {
      type: 'category',
      labels: {
         rotation: -45,
         style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
         }
      }
   };
   var yAxis ={
      min: 0,
      title: {
        text: 'Population (millions)'
      }
   };  
   var tooltip = {
      pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
   };   
   var credits = {
      enabled: false
   };
   var series= [{
            name: 'Population',
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Instanbul', 14.2],
                ['Karachi', 14.0],
                ['Mumbai', 12.5],
                ['Moscow', 12.1],
                ['Sao Paulo', 11.8],
                ['Beijing', 11.7],
                ['Guangzhou', 11.1],
                ['Delhi', 11.1],
                ['Shenzhen', 10.5],
                ['Seoul', 10.4],
                ['Jakarta', 10.0],
                ['Kinshasa', 9.3],
                ['Tianjin', 9.3],
                ['Tokyo', 9.0],
                ['Cairo', 8.9],
                ['Dhaka', 8.9],
                ['Mexico City', 8.9],
                ['Lima', 8.9]
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;   
   json.tooltip = tooltip;   
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Column with drilldown

shape Description

The columns for given data set can be displayed either in increasing order or decreasing order depending on the values.

shape Example

Below example demonstrates how to create the column chart with drill down values using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Browser market shares'
        },
        subtitle: {
            text: 'From January-2015 to May-2015'
        },
        xAxis: {
            type: 'category',
			labels: {
         rotation: -50,
         style: {
            fontSize: '12px',
            fontFamily: 'Verdana, sans-serif'
         }
      }
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }

        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },

        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33,
                drilldown: 'Microsoft Internet Explorer'
            }, {
                name: 'Chrome',
                y: 24.03,
                drilldown: 'Chrome'
            }, {
                name: 'Firefox',
                y: 10.38,
                drilldown: 'Firefox'
            }, {
                name: 'Safari',
                y: 4.77,
                drilldown: 'Safari'
            }, {
                name: 'Opera',
                y: 0.91,
                drilldown: 'Opera'
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2,
                drilldown: null
            }]
        }],
        drilldown: {
            series: [{
                name: 'Microsoft Internet Explorer',
                id: 'Microsoft Internet Explorer',
                data: [
                    ['v11.0', 24.13],
                    ['v8.0', 17.2],
                    ['v9.0', 8.11],
                    ['v10.0', 5.33],
                    ['v6.0', 1.06],
                    ['v7.0', 0.5]
                ]
            }, {
                name: 'Chrome',
                id: 'Chrome',
                data: [
                    ['v40.0', 5],
                    ['v41.0', 4.32],
                    ['v42.0', 3.68],
                    ['v39.0', 2.96],
                    ['v36.0', 2.53],
                    ['v43.0', 1.45],
                    ['v31.0', 1.24],
                    ['v35.0', 0.85],
                    ['v38.0', 0.6],
                    ['v32.0', 0.55],
                    ['v37.0', 0.38],
                    ['v33.0', 0.19],
                    ['v34.0', 0.14],
                    ['v30.0', 0.14]
                ]
            }, {
                name: 'Firefox',
                id: 'Firefox',
                data: [
                    ['v35', 2.76],
                    ['v36', 2.32],
                    ['v37', 2.31],
                    ['v34', 1.27],
                    ['v38', 1.02],
                    ['v31', 0.33],
                    ['v33', 0.22],
                    ['v32', 0.15]
                ]
            }, {
                name: 'Safari',
                id: 'Safari',
                data: [
                    ['v8.0', 2.56],
                    ['v7.1', 0.77],
                    ['v5.1', 0.42],
                    ['v5.0', 0.3],
                    ['v6.1', 0.29],
                    ['v7.0', 0.26],
                    ['v6.2', 0.17]
                ]
            }, {
                name: 'Opera',
                id: 'Opera',
                data: [
                    ['v12.x', 0.34],
                    ['v28', 0.24],
                    ['v27', 0.17],
                    ['v29', 0.16]
                ]
            }]
        }
    });
});
</script>
</body>
</html>

Fixed placements columns

shape Description

Instead of placing one column on the top of other, columns can be overlaid on each other and differentiated by colors.

shape Example

Below example demonstrates how to create a fixed placement columns using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: ['Seattle HQ', 'San Francisco', 'Tokyo'],
		 labels: {
         rotation: -50,
         style: {
            fontSize: '12px',
            fontFamily: 'Verdana, sans-serif'
         }
      }	
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });
});
</script>
</body>
</html>

Data defined in an html table

shape Description

The data can be defined in an html table to create a chart i.e., instead of giving the data in series object, one needs to create a html table for preferred data and call the data using a script tag in the head section of the html page.

shape Example

Below example demonstrates how to create a column chart with data defined in an html table.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts Tutorial</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
   <script src="http://code.highcharts.com/modules/data.js"></script>     
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
		xAxis: {
		labels: {
         rotation: -50,
         style: {
            fontSize: '12px',
            fontFamily: 'Verdana, sans-serif'
         }
      }
	  },	
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });
});
</script>
<table id="datatable">
<thead>
<tr><th></th><th>David</th><th>Jhon</th></tr>
</thead>
<tbody>
<tr><th>Apples</th><td>5</td><td>6</td></tr>
<tr><th>Pears</th><td>4</td><td>7</td></tr>
<tr><th>Plums</th><td>0</td><td>14</td></tr>
<tr><th>Bananas</th><td>12</td><td>3</td></tr>
<tr><th>Oranges</th><td>10</td><td>8</td></tr>
</tbody>
</table>
</body>
</html>

Column range

shape Description

The range of a given data set can be represented using column charts. Column range is used to define the range for temperature, height and depth.

shape Example

Below example demonstrates how to create the Column range chart for the given data.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="http://code.highcharts.com/highcharts-more.js"></script>  
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Temperature variation by month'
        },

        subtitle: {
            text: 'From Jan to Dec'
        },
        xAxis: {
             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			 labels: {
             rotation: -50,
             style: {
             fontSize: '12px',
             fontFamily: 'Verdana, sans-serif'
         }
      }	
        },

        yAxis: {
            title: {
                text: 'Temperature ( °C )'
            }
        },

        tooltip: {
            valueSuffix: '°C'
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + '°C';
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [-9.7, 9.4],
                [-8.7, 6.5],
                [-3.5, 9.4],
                [-1.4, 19.9],
                [0.0, 22.6],
                [2.9, 29.5],
                [9.2, 30.7],
                [7.3, 26.5],
                [4.4, 18.0],
                [-3.1, 11.4],
                [-5.2, 10.4],
                [-13.5, 9.8]
            ]
        }]

    });

});
</script>
</body>
</html>

Summary

shape Key Points

  • The Highcharts Column Charts represent the data vertically.
  • Highcharts column type charts can be represented in one or more data series.

shape Programming
Tips

  • Add the JavaScript file to the head section of HTML page to create a chart.
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.