Introduction
Highcharts Combinations are used to draw mixed charts like bar chart with pie chart. In this chapter, we will explain you how to create combination charts.
Description
One can highlight different types of data set information in a chart by using single or Highcharts Combinations.
Two or more charts can be combined in Highcharts for a clear view of low and high categories. One can combine a column chart with line chart or can also show the information in pie, line and bar chart combinations.
Description
Following are some types of Highcharts Combinations that can be represented using Highcharts.
- Column, line and pie charts
- Dual axes, line and column
- Multiple axes
- Scatter with regression line
Description
One can combine column, line and pie charts using the property '
series.type' for each chart type. Not only column and line, even bar and line charts can be used as a combination chart. Example
Below example demonstrates how to create a chart with a combination of column, line and pie using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>combination of column line and pie</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({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai'],
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
labels: {
items: [{
html: 'Product sales by region',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Cricket bats',
data: [20, 15, 25, 35, 40]
}, {
type: 'column',
name: 'Rackets',
data: [15, 20, 15, 10, 30]
}, {
type: 'column',
name: 'Sports shoe',
data: [45, 30, 20, 50, 40]
}, {
type: 'spline',
name: 'Average',
data: [26.6, 18.3, 20, 31.6, 36.6],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Cricket bats',
y: 135,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'Rackets',
y: 90,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Sports shoe',
y: 165,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [150, 70],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</body>
</html>
[/c]
Description
Multiple measurements can be represented using two independent dual axes. One can combine the line and column chart representing with dual axes by adding two y-Axis attributes.
Example
Below example demonstrates how to create a line and column combination chart representing with dual axes using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Dual axes line and column</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="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Hyderabad'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 300,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [0.2, 0.4, 0.6, 0.9, 1.1, 4.1, 6.7, 5.9, 6.6, 3.4, 1.1, 0.2],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [71.8, 76.5, 82.8, 88.2, 91.2, 84.9, 79.9, 79.0, 79.2, 78.1, 73.4, 70.2],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
</script>
</body>
</html>
[/c]
Description
Similar to dual axes, the given data set for a combination chart can be represented using multiple axes by adding three or more y-Axis attributes.
Example
Below example demonstrates how to create a combination chart represented with multiple axes using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Multiple axes</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: 700px; height: 600px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Hyderabad'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [0.2, 0.4, 0.6, 0.9, 1.1, 4.1, 6.7, 5.9, 6.6, 3.4, 1.1, 0.2],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016.1, 1014.3, 1011.6, 1009.2, 1005.3, 1004.6, 1004.0, 1005.5, 1007.3, 1011.1, 1014.8, 1016.3],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [71.8, 76.5, 82.8, 88.2, 91.2, 84.9, 79.9, 79.0, 79.2, 78.1, 73.4, 70.2],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</body>
</html>
[/c]
Description
Regression is a process of picking the data points and converting it into an equation. The graph represented by this equation is known as regression line. One can combine the regression line with scatterplot charts in Highcharts.
Example
Following is the code for creating a scatterplot chart with regression line using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Scatter with regression line</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({
xAxis: {
min: -0.5,
max: 5.5
},
yAxis: {
min: 0
},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'line',
name: 'Regression Line',
data: [[0, 1.11], [5, 4.51]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
marker: {
radius: 4
}
}]
});
});
</script>
</body>
</html>
[/c]
Key Points
- Highcharts Combinations are mainly used for a clear view of low and high categories.
- For combining different charts into one chart, one need to change the
series.type.
Programming
Tips
- Give the chart type as line in the chart.type option.
- Add the JavaScript files to the head section of HTML page for creating 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 the end-user to create Highcharts.