Introduction
Highcharts is a JavaScript library that allows to create beautiful and high quality web-based charting with minimal coding. Professional and attractive charts can be designed for a web application or web site using Highcharts. This chapter will focus on Highcharts Stacking charts and its types.
Description
The area, column and bar charts can be stacked on top of one another rather than placing side by side. The Highcharts Stacking Charts can be stacked in two ways, they are:
- Normal stacking The normal stacking stacks the information arranged on the top of one another altogether.
- Percentage stacking The percentage stacking is used to draw each point of given data with some corresponding percentage for all the points of similar group and also fills the plot area.
Description
Highcharts Stacking Charts provide stacking only for few charts. Following are some of the chart types supported by Stacking.
- Stacked Area chart
- Stacked Column chart
- Stacked Bar chart
- Stacked Percentage column chart
Description
The Stacked area chart is a type of area chart that is based on a line chart and can be used to display different category data. The data gets displayed on the top of each other rather than displaying side by side.
Example
Below example demonstrates how to create a stacked area chart using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Stacked area chart</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: 'area'
},
plotOptions: {
area:{
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker:{
lineWidth: 1,
lineColor: '#666666'
}
}
},
title: {
text: 'Profit Ratio by Month'
},
subtitle: {
text: 'last 12 months'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Profit %'
}
},
series: [{
name: 'chairs',
data: [10, 6, 1, 2, 5, 7, 9, 12, 8, 6, 10, 7]
},{
name: 'Tables',
data: [4, 2, 7, 9, 12, 14, 16, 13, 20, 18, 19, 22]
}]
});
});
</script>
</body>
</html>
[/c]
Description
Instead of representing the columns side by side, users can stack the columns on top of each other column using the stacked column object. One can observe each data series total values and the ratio changes.
Example
Below example demonstrates how to create a Stacked column chart using CDN access for both Highcharts and jQuery.
[c]
<!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>
[/c]
Description
Instead of placing the data points side-by-side, the stacked bar charts stack the data points one on top. The stacked bar charts are useful for calculating the total values when multiple data series are given.
Example
Below example demonstrates how to create a stacked bar chart using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Stacked bar charts</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: 'bar'
},
title: {
text: 'Product sales by region'
},
xAxis: {
categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai'],
labels: {
rotation: -45,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Sales'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
}
},
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>
[/c]
Description
The percentage value of given data series can be represented using the stacked percentage column charts.
Example
The percentage value of given data series can be represented through the stacked percentage column charts using the CDN access for both the Highcharts and jQuery.
[c]
<!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>
[/c]
Key Points
- Highcharts Stacking Charts is categorized into two types-Normal and Percentage stacking.
- Highcharts Stacking Charts is used to represent the data on top of each other instead of representing side-by-side.
Programming
Tips
- Add the JavaScript file to the head section of HTML page for creating a chart.
- Make sure 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 the end-user to create Highcharts.