José Colina
José Colina

Reputation: 21

Add line to 3d column chart in Highcharts

I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:

Chart working in 2D

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:

Chart NOT working in 3D

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

Answers (1)

Sebastian Bochan
Sebastian Bochan

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

Related Questions