Highcharts 3D Lines
HTML
<script src="https://code.jquery.com/jquery-2.2.3.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" style="height: 100vh"></div>
CSS
html, body {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
width: 100vw;
}
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(/* DATA/ */{
"chart": {
"renderTo": "container",
"margin": 100,
"options3d": {
"enabled": true,
"alpha": 10,
"beta": 30,
"depth": 250,
"viewDistance": 5,
"fitToPlot": true,
"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": "Node Streams Performance"
},
"subtitle": {
"text": "Click and drag the plot area to rotate in space"
},
"plotOptions": {
"scatter": {
"width": 1000,
"height": 14371,
"depth": 10
}
},
"series": [
{
"name": "total",
"data": [
{
"y": 65,
"z": 1,
"x": 1
},
{
"y": 66,
"z": 2,
"x": 1
},
{
"y": 66,
"z": 3,
"x": 1
},
{
"y": 66,
"z": 4,
"x": 1
},
{
"y": 74,
"z": 5,
"x": 1
},
{
"y": 72,
"z": 6,
"x": 1
},
{
"y": 72,
"z": 7,
"x": 1
},
{
"y": 70,
"z": 8,
"x": 1
},
{
...