CODEWITHSUNDEEP
javascripthighcharts
XCS
XCS

Reputation: 28177

Highchart.js secondary axis not showing on the opposite side

These are the options for the secondary axis:

{
  title: {
    text: 'This should be on the other side' 
  },
  opposite: true
}],

I expected it to show on the left, buy it does not. How can I show it on the left side? http://jsfiddle.net/5XQT9/1/

Upvotes: 1

Views: 763

Answers (3)

Eduardo Caltempa
Eduardo Caltempa

Reputation: 81

I had the same issue, when I changed the order of the properties, setting first "opposite" and then all the others it render as expected.

{
    opposite: false,
    title: {
           text: 'This should be on the other side'
           },
    min: 0,
    ceiling: 100
}

Upvotes: 0

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Since you are using a stockChart the options for the opposite are the opposite !

http://api.highcharts.com/highstock#yAxis.opposite defaults to true whilst http://api.highcharts.com/highcharts#xAxis.opposite defaults to false

Hence changing it to false as below will work: http://jsfiddle.net/robschmuecker/5XQT9/4/

{
        title: {
            text: 'This should be on the other side'
        },
        opposite: false
    }

Upvotes: 4

yogi
yogi

Reputation: 19619

As per Highcharts

opposite: Boolean Whether to display the axis on the opposite side of the normal. The normal is on the left side for vertical axes and bottom for horizontal, so the opposite sides will be right and top respectively. In Highstock 1.x, the Y axis was placed on the left side by default. Defaults to true.

That means Right is the opposite.

So if you want Y-Axis to be on left then mark opposite false see this fiddle

 yAxis: [
                {
                title: {
                    text: 'Temperature (°C)'

                },
                        opposite: false}, 
                    {
                        title: {
                            text: 'This should be on the other side' 
                        },
                        opposite: false
                    }],

Upvotes: 1

Related Questions