Introduction
Highcharts 3D Charts module that provides 3D support to charts. Currently, Highcharts 3D charts allows the users to create 3D column charts, 3D pie charts and 3D scatter charts. 3D charts are used to create 3-Dimensional charts. This chapter explains about Highcharts 3D Charts types and how to create different 3D charts in Highcharts.
Description
Highcharts 3D Charts allows the user to create limited 3 Dimensional charts. One should add additional 3 Dimensional plugin to the header section of html page to create 3D charts. Add the following plugin after
highcharts.js.
[c]<script src=”/http://code.highcharts.com/highcharts-3d.js”></script>[/c]
Description
Usually, the 3D chart configuration is done in the chart section of the options by loading the 3D module. The charts get altered only when they are specifically set up to 3D. Different chart types have specific settings and can be found in
plotOptions. The below snippet code demonstrates the 3D options in Highcharts.
[c]
chart:{
……..
options3d:{
enabled: ‘boolean value’,
alpha: ‘numeric value’,
beta: ‘numeric value’,
depth: ‘numeric value’,
viewDistance: ‘numeric value’,
}
};
[/c]
Null Tag
The 3D options given in the above code are important for all the 3D charts. Highcharts allow the user to create 3 panes, known as frames, which can be configured separately in
chart.options.3d.frame. The snippet code below demonstrates the 3D frame options:
[c]
frame: {
bottom: {
size: “numeric value’,
color: ‘color value’
},
side: {
size: ‘numeric value’,
color: ‘color value’
},
back: {
size: ‘numeric value’,
color: ‘color value’
}
},
[/c]
Description
Highcharts currently support 3 Dimensions for the following chart types:
- 3D column chart
- 3D column chart with grouping and stacking
- 3D column chart with 0 and null values
- 3D pie chart
- 3D scatter chart
- 3D donut chart
Description
Highcharts allow the user to create column charts with 3 dimensions. By default, the depth for column charts is 25. One can change the depth by changing the
plotOptions. Example
Below example demonstrates how to create a column chart with 3 dimensions using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D column 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>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<div id="sliders">
<table>
<tr>
<td>Alpha Angle</td>
<td><input id="alpha" type="range" min="0" max="50" value="15"/><span id="alpha-value" class="value"></span></td>
</tr>
<tr>
<td>Beta Angle</td>
<td><input id="beta" type="range" min="0" max="50" value="15"/><span id="beta-value" class="value"></span></td>
</tr>
<tr>
<td>Depth Angle</td>
<td><input id="depth" type="range" min="20" max="100" value="50"/><span id="depth-value" class="value"></span></td>
</tr>
</table>
</div>
<script language="JavaScript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '3D column charts'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
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]
}]
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
$('#sliders input').on('input change', function () {
chart.options.chart.options3d[this.id] = this.value;
showValues();
chart.redraw(false);
});
showValues();
});
</script>
</body>
</html>
[/c]
Description
The normal column chart with grouping and stacking can be represented with 3 dimensions in Highcharts.
Example
Below example demonstrates how to represent a column chart in 3D with grouping and stacking using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D column grouping and stacking 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>
<script src="https://code.highcharts.com/highcharts-3d.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',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: 'Product sales by region'
},
xAxis: {
categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Sales'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
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>
[/c]
Description
A normal column chart can be represented with 0 and null values in 3 dimension module in Highcharts by setting the
plotOptions. Example
Below example demonstrates how to create a column chart with 0 and null values and representing it in 3D module using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D column with zero and null values</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/highcharts-3d.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',
margin: 75,
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D column chart with 0 and null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
data: [49.9, 71.5, 106.4, null, 144.0, 176.0, 135.6, 0, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</body>
</html>
[/c]
Description
Pie charts can be represented in 3D module in Highcharts by setting the depth property in
plotOptions. The depth property defines the chart thickness. Example
Below example demonstrates how to create a pie chart and represents it in 3D module using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D pie 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>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Social Login Preference 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Social Logins',
data: [
['Facebook', 44],
['Twitter', 5],
{
name: 'Linkedin',
y: 3,
sliced: true,
selected: true
},
['Yahoo', 5],
['Google plus', 37],
['Others', 4]
]
}]
});
});
</script>
</body>
</html>
[/c]
Description
The scatter charts can be represented in 3 dimensional module similar to normal scatter charts. The 3D plugin uses X, Y and Z parameters to place the data points in 3 dimensions.
Example
Below example demonstrates how to create a scatter chart and represents it in 3 dimensions module using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D scatter 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>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: '3D scatter chart'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
colorByPoint: true,
data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
}]
});
$(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
eStart = chart.pointer.normalize(eStart);
var posX = eStart.pageX,
posY = eStart.pageY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5; // lower is more sensitive
$(document).bind({
'mousemove.hc touchdrag.hc': function (e) {
// Run beta
newBeta = beta + (posX - e.pageX) / sensitivity;
chart.options.chart.options3d.beta = newBeta;
// Run alpha
newAlpha = alpha + (e.pageY - posY) / sensitivity;
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function () {
$(document).unbind('.hc');
}
});
});
});
</script>
</body>
</html>
[/c]
Description
A normal donut chart can be represented in 3 dimensional module in Highcharts by setting the depth property in
plotOptions. Example
Below example demonstrates how to create a donut chart and represents it in 3 dimensions module using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>3D donut 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>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Social Login Preference 2015'
},
subtitle: {
text: '3D donut'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Social Login',
data: [
['Facebook', 44],
['Twitter', 5],
['Linkedin', 3],
['Yahoo', 5],
['Google plus', 37],
['Others', 4]
]
}]
});
});
</script>
</body>
</html>
[/c]
Key Points
- Highcharts 3D Charts - Currently, Highcharts provide limited 3 dimensional support to charts.
- Usually, the configuration for 3D chart is done in the chart section.
- Similar to normal column charts, the 3D plugin allows you to display a series of charts.
Programming
Tips
- Add the additional 3D chart plugin module after the
highchart.js - Give the preferred chart type in the
chart.typeproperty - 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.