How to reverse a Y Axis but not column direction
Posted: Mon Jun 26, 2017 7:31 am
by MattP23
I would like to create a column chart with reversed Y axis, but where the columns rise from the bottom.
This is to achieve a visual representation of a ranking, where 1 is top and 18 is bottom (see the attached mock).
What's the best way to achieve this?
I know how to reverse the Y axis but can't figure out how to keep the columns rising from the bottom of the chart. Thanks for your help!
Re: How to reverse a Y Axis but not column direction
Posted: Mon Jun 26, 2017 7:37 am
by pawel_d
Hi Matt,
Have you tried to use reversed property? Take a look at the demo below.
API Reference:
http://api.highcharts.com/highcharts/yAxis.reversed
Example:
http://jsfiddle.net/ku336Lp5/
Regards.
Re: How to reverse a Y Axis but not column direction
Posted: Mon Jun 26, 2017 7:44 am
by MattP23
Hi Pawel, thanks for the quick reply. Yes, I can reverse the Y axis using the reversed property.
However I also want the columns to rise from the floor of the chart, rather than fall from the ceiling as they do in your example.
What's the recommended way to achieve this?
Re: How to reverse a Y Axis but not column direction
Posted: Tue Jun 27, 2017 7:45 am
by pawel_d
Hi Matt,
There is no such option in the API but you can achieve that by modifying your code a little. First of all, you need to reverse yAxis. Secondly, set max property with a number which will act as a base, lower threshold (let's say 20). Finally, each point has to have y property with its value and low property which will be mentioned before value of the threshold. Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/yAxis.max
Example:
http://jsfiddle.net/9k50bbcj/
Regards.