MattP23
Posts: 2
Joined: Mon Jun 26, 2017 6:53 am

How to reverse a Y Axis but not column direction

Mon Jun 26, 2017 7:31 am

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!
Attachments
highcharts-reversed-y-axis.jpg
highcharts-reversed-y-axis.jpg (21.06 KiB) Viewed 633 times

pawel_d
Posts: 1884
Joined: Thu Jun 02, 2016 10:28 am

Re: How to reverse a Y Axis but not column direction

Mon Jun 26, 2017 7:37 am

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.
Paweł Dalek
Highcharts Developer

MattP23
Posts: 2
Joined: Mon Jun 26, 2017 6:53 am

Re: How to reverse a Y Axis but not column direction

Mon Jun 26, 2017 7:44 am

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?

pawel_d
Posts: 1884
Joined: Thu Jun 02, 2016 10:28 am

Re: How to reverse a Y Axis but not column direction

Tue Jun 27, 2017 7:45 am

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.
Paweł Dalek
Highcharts Developer

Return to “Highcharts Cloud”