Highcharts 3D Column Chart Example

Keywords : 3D column chart using highcharts with example, How to create column chart with 3D effect using higcharts, 3D column chart with options to change view using highcharts with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - 3D Column Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.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 type="text/javascript">
        $(function () {
            var chartype = {
                renderTo: 'container',
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    depth: 50,
                    viewDistance: 25
                }
            }
            var chartitle = {
                text: 'Chart rotation demo'
            }
            var chartsubtitle={
                text: 'Test options by dragging the sliders below'
            }
            var chartplotoptions = {
                column: {
                    depth: 25
                }
            }
            var chartseries =  [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
            // Set up the chart
            var chart = new Highcharts.Chart({
                chart: chartype,
                title: chartitle,
                subtitle: chartsubtitle,
                plotOptions: chartplotoptions,
                series: chartseries
            });
            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);
            }
            // Activate the sliders
            $('#sliders input').on('input change', function () {
                chart.options.chart.options3d[this.id] = this.value;
                showValues();
                chart.redraw(false);
            });
            showValues();
        });
    </script>
</head>
<body>
    <div id="container"></div>
    <div id="sliders">
        <table>
            <tr>
                <td>Alpha Angle</td>
                <td><input id="alpha" type="range" min="0" max="45" value="15" /> <span id="alpha-value" class="value"></span></td>
            </tr>
            <tr>
                <td>Beta Angle</td>
                <td><input id="beta" type="range" min="-45" max="45" value="15" /> <span id="beta-value" class="value"></span></td>
            </tr>
            <tr>
                <td>Depth</td>
                <td><input id="depth" type="range" min="20" max="100" value="50" /> <span id="depth-value" class="value"></span></td>
            </tr>
        </table>
    </div>
</body>
</html>

Highcharts 3D Column Chart Example

Example

Result