Reputation: 21
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
Upvotes: 0
Views: 514
Reputation: 37588
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
Upvotes: 1