Highcharts 3D Column Chart with Null and 0 Values

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.

Highcharts 3D Column Chart with Null & 0 Values Example

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.

 

Highcharts 3d column chart with null and 0 values example result

 

This is how we can create a 3D column chart with null and 0 values using highcharts library with required properties. 

Topics Covered