Introduction
Highcharts support variety of chart types to display the data in a meaningful way. Bar, line, spline, area, pie, scatter, column, gauge, arearange, areasplinerange and columnrange are some of the chart types that Highchart supports. This chapter explains about various Highcharts Types.
- Combining chart types
Description
Following are some of the Highcharts Types 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 Highcharts Types. Not only column and line, even the bar and line charts can be used as a combination Highcharts Types. Example
Below example demonstrates the simple code for creating a chart combining 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 yAxis attributes.
Example
Below example demonstrates the simple code for creating 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 yAxis attributes.
Example
Below example demonstrates the simple code for creating 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 to an equation and the graph represented by this equation is known as regression line. One can combine the regression line with scatterplot charts in Highcharts.
Example
Below example demonstrates the simple code for creating a scatter plot 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
- Combination charts are mainly used for a clear view of low and high categories.
- For combining different charts into one chart, user needs to change only 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 end-user to create Highcharts.