In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create a 3d column chart with null and 0 values using highcharts library with examples.
Following is the example of creating a 3D column chart with null and 0 values by setting the required chart properties using highcharts library.
<html>
<head>
<title>Highcharts 3D Column Chart with Null</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with 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,
labels: {
skew3d: true,
style: {
fontSize: '16px'
}
}
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"> </div>
</body>
</html>
If you observe the above example, we created a 3D column chart with null and 0 values using highcharts library with required properties.
When we execute the above highcharts example, we will get the result like as shown below.
This is how we can create a 3D column chart with null and 0 values using highcharts library with required properties.