Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 100%; width: 100%"></div>

CSS

#container {
    height: 100%;
    width: 100%;
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

$(function () {

    // Give the points a 3D feel by adding a radial gradient
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });

    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            margin: 100,
            type: 'scatter',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 10,
                fitToPlot: false,
                frame: {
                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                }
            }
        },
        tooltip: {
        	enabled: true
        },
        title: {
            text: 'Draggable box'
        },
        subtitle: {
            text: 'Click and drag the plot area to rotate in space'
        },
        plotOptions: {
            scatter: {
                width: 10,
                height: 10,
                depth: 10,
                marker: {
                	enabled: true
                }
            }
        },
        yAxis: {
            title: null
        },
        xAxis: {
            gridLineWidth: 1
        },
        zAxis: {
            showFirstLabel: false
        },
        legend: {
            enabled: false
        },
            legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 0,
        y: 0,
        floating: true,
        borderWidth: 5
    },
        series: [{
            name:...