CODEWITHSUNDEEP
javascripthighcharts
Feedfedfat
Feedfedfat

Reputation: 193

In Highcharts, in 3D mode, is it posible to make right hand axis not pop out?

Here is what I want: enter image description here

Here is what I have at the moment: enter image description here

As you can see, this is the result when we set the yAxis opposite to true. But it is not very clear to see.

I'm wondering if there is a work around to acheive what I wanted. Or maybe even just a better way to display it more clearly.

Here is a fiddle: https://jsfiddle.net/scottszb1987/8pnk96jf/

--------------------------update---------------------------------
I'm looking for a solution that works for dynamic chart. With customizeable screen width, 3D angles, depth, chart values, axis values, as expected the y-axis labels should always be where it should be.

Upvotes: 0

Views: 68

Answers (2)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can change getLabelPosition so it will move your yAxis labels using depth of you chart. 

(function(H) {
    Highcharts.Tick.prototype.getLabelPosition = function() {
      var pos = origGetLabelPosition.apply(this, arguments),
        method3d = this.axis.chart.is3d;
      // Do not do this if the chart is not 3D
      if (!this.axis.chart.is3d()) {
        return pos;
      }
      var newPos = Highcharts.perspective([this.axis.swapZ({
        x: pos.x,
        y: pos.y,
        z: this.axis.chart.options.chart.options3d.depth
      })], this.axis.chart, false)[0];
      newPos.x = newPos.x - (!this.axis.horiz && this.axis.opposite ? this.axis.transA : 0); //#3788
      newPos.old = pos;
      return newPos;
    };
  })(Highcharts);

Here you can find an example how it can work: https://jsfiddle.net/8pnk96jf/4/

Upvotes: 0

Emre Bolat
Emre Bolat

Reputation: 4562

There is a workaround for this.

You need to change yAxis.labels's and yAxis.title's x and y values.

yAxis: {
      lineWidth: 1,
      opposite: true,
      labels: {
          x: 120,
          y: -120
      },
      title:{
          x: -80,
          y: -80
      }
    }

You can see my working example in this jsFiddle.

EDIT

For dynamic positioning, your only HighCharts option is to use yAxis.labels.formatter. You can do something like:

formatter: function () {
    var position = this.position;
    window.setTimeout(function () {
        if (position.y < 0) {
            position.dataLabel.attr({
                y: position.plotY + 50
            });
        }
    });
    return '<span>' + Math.abs(this.position.y) + '</span>';
}

OR

Another option is to use jQuery and ovirride the label position in the load callback;

$.each(yourChart.series[0].data, function(i, position) {
    if(position.y > 80) {
        position.dataLabel.attr({x:20});
    }
});

Upvotes: 1

Related Questions