3D Chart
Secondary Yaxis (Set x in title and labels)
by amrutaJgtp
HTML
<script src="http://code.jquery.com/jquery-1.11.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: 400px"></div>
CSS
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
JavaScript
$(function () {
$('#container').highcharts({
"chart": {
"backgroundColor": "rgba(255,255,255,0)",
"reflow": false,
"height": 509,
"width": 1049,
"plotBackgroundColor": null,
"options3d": {
"enabled": true,
"alpha":10,
"beta": 25,
"viewDistance": 0,
"depth": 40,
"frame": {
"back": {
"color": "rgba(255,255,255,0)"
},
"side": {
"color": "rgba(255,255,255,0)"
},
"bottom": {
"color": "rgba(255,255,255,0)"
}
}
},
"renderTo": {},
"events": {}
},
"title": {
"text": null
},
"tooltip": {
"enabled": true,
"shared": false,
"borderWidth": 1,
"borderRadius": 1,
"backgroundColor": "#ffffff",
"crosshairs": [true, false]
},
"plotOptions": {
"series": {
"animation": null,
"cursor": "pointer",
"showInLegend": true,
"turboThreshold": 0,
"events": {},
"pointPadding": 0.1
}
},
"legend": {
"enabled": true,
"item": {},
"borderWidth": 0,
"layout": "horizontal",
"backgroundColor": "rgba(255,255,255,0)",
"align": "center",
"verticalAlign": "bottom",
"margin": 0,
"padding": 5
},
"credits": {
"enabled": false
},
"scrollbar": {
"enabled": false
},
"xAxis": {
"title": {
"text": "SmallData",
"margin": 5
},
"opposite": false,
"axisInternalName": "0",
"labels": {
"enabled": true,
"rotation": 330
},
"lineWidth": 1,
"lineColor": "#000000",
"categories": ["1.00", "2.00", "3.00", "4.00"],
"tickmarkPlacement": "on",
"gridLineWidth": 1,
"gridLineColor": "#C0C0C0",
"plotLines": [],
"plotBands": []
},
"yAxis": [{
"title":...