Highcharts 3D Column Chart with Null Values and Zeros
The following example demonstrates a 3D column chart with null values and zeros.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.
Configuration
chart.options3d Configuration
The following lists the basic configuration for 3D charts. Set the chart's type property to column, and the options3d option can be used to set the three-dimensional effect.
var chart = {
type: 'column',
options3d: {
enabled: true, // Whether to display the chart in 3D; set to true
alpha: 15, // Chart view rotation angle
beta: 15, // Chart view rotation angle
depth: 50, // Total depth of the chart, default is 100
viewDistance: 25 // Define the viewing distance of the chart
}
};
Example
Filename: highcharts_3d_column_null.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
};
var title = {
text: '3D Chart with Null Values'
};
var subtitle = {
text: 'Note the difference between 0 and null'
};
var xAxis = {
categories: Highcharts.getOptions().lang.shortMonths
};
var yAxis = {
title: {
text: null
}
};
var series= [{
name: 'Sales',
data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The output of the above example is: