Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how can I move yAxis labels from Right of chart to left of chart in highstock

how can I move yAxis labels from Right of chart to left of chart in highstock.

Here is a jsfiddle example in which we have labels like Fresh Breeze on the right side of chart which I want it on the left.

In the previous version of Highstock it is was on left by default. I have also tried the property align:left inside the yAxis options but it does not give the desired result.

Thanks

like image 843
Paul Phoenix Avatar asked Jan 23 '15 04:01

Paul Phoenix


People also ask

What is the opposite of Y axis?

The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the horizontal axis.

How do I text a Yaxis label?

format: string The recommended way of adding units for the label is using text , for example {text} km . To add custom numeric or datetime formatting, use {value} with formatting, for example {value:. 1f} or {value:%Y-%m-%d} . See format string for more examples of formatting.


2 Answers

In order to put your yAxis label to the left side, just set yAxis' opposite property to false.

yAxis: {
  opposite: false
}

It seems not intuitive, though.

like image 39
brunocoelho Avatar answered Oct 02 '22 16:10

brunocoelho


You don't want to set align:left at the axis level, you need to use it on the plotband label level.

The code in that example is explicitly telling the chart to align the plot band labels to the right, and push them an extra 40 pixels right as well.

Change that to align:left, and x:0

(or, just don't set the align or x properties at all, and by default the labels will be on the left, as they've always been...)

example:

  • http://jsfiddle.net/jlbriggs/LKtpc/28/

{{EDIT:

Your original question referenced the plotband labels in highcharts...

But it seems your question is really about the y axis placement in Highstock.

To move it to the left, you need to add this:

yAxis: {
  opposite:false
}

as Highstock sets the axis to opposite:true by default.

Example:

  • http://jsfiddle.net/aayajgLe/1/
like image 73
jlbriggs Avatar answered Oct 02 '22 16:10

jlbriggs