Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 25,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Utilization Overview (3D)'
    },
    xAxis: {
        categories: Array.from({ length: 24 }, (_, i) => i.toString()), // Hours from 0 to 23
        title: {
            text: 'Hour of the Day'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Utilization'
        }
    },
    tooltip: {
        shared: false,
        formatter: function() {
            if (this.series.type === 'line') {
                return `<b>Average</b>: ${this.y}`;
            } else {
                return `<b>${this.series.name}</b>: ${this.y}`;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            depth: 25 // Set depth for columns
        },
        line: {
            marker: {
                enabled: false
            },
            zIndex: 10 
        }
    },
    series: [{
        name: 'Utilized',
        data: [5, 3, 4, 7, 2, 6, 8, 7, 5, 4, 6, 8, 9, 10, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Not Utilized',
        data: [2, 2, 3, 2, 1, 1, 2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Offline',
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Average',
        type: 'line',
        data: [4, 2.67, 2.67, 3.33, 1.33, 2.67, 3.67, 3.00, 2.67, 2.33, 2.67, 3.00, 3.67, 4.00, 4.67, 4.00, 4.00, 3.00, 2.67, 2.00, 2.00, 2.00, 2.00, 1.67],
        zIndex: 1000
    }]
});