Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

CSS

#container {
    height: 500px;
    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',
            type: 'scatter',
            options3d: {
                enabled: false,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 1000,
                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: false
                }
            }
        },
        xAxis: {
            gridLineWidth: 2
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 0,
            y: 0,
            floating: true,
            borderWidth: 1
        },
        series: [{
            name: 'series1',
            lineWidth: 2,
            //gapSize: 1,
            showInLegend: true,
            events: {
                legendItemClick: function () {
   ...