Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.jquery.com/jquery-3.1.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>

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

CSS

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

JavaScript

// Set up the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        margin: 100,
        type: 'scatter3d',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 30,
            depth: 250,
            viewDistance: 5,
            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)' }
            }
        }
    },
    title: {
        text: 'Axis labels in perspective'
    },
    subtitle: {
        text: 'Click and drag the plot area to rotate in space'
    },
    plotOptions: {
        scatter: {
            width: 10,
            height: 10,
            depth: 10
        }
    },
    xAxis: {
        min: 0,
        max: 1000,
        gridLineWidth: 1,
        labels: {
        padding: 1000
        },
        title: {
            text: 'X axis title'
        }
    },
    yAxis: {
        min: 0,
        max: 1000,
        labels: {
            skew3d: true
        },
        title: {
            text: 'Y axis title'
        }
    },
    zAxis: {
        min: 0,
        max: 1000,
        showFirstLabel: false,
        labels: {
            skew3d: true
        },
        title: {
            text: 'Z axis title'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Reading',
        colorByPoint: true,
        data: [
            [611, 138, 82],
            [304, 716, 717],
            [250, 196, 324],
            [309, 751, 146],
            [528, 724, 239],
            [51, 8, 341],
            [113, 414, 490],
            [194, 762, 536],
            [350, 939, 500],
            [339, 920, 386],
            [758, 314, 434],
            [144, 779, 960],
            [564, 464, 823],
            [312, 497, 148],
            [705, 669, 944],
            [306, 829, 993],
           ...