CODEWITHSUNDEEP
highchartsaxis
luftikus143
luftikus143

Reputation: 1285

Highcharts with inverted y-axis, but not inverted data?

Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.

Thanks for any hints!

Upvotes: 0

Views: 2903

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/

var max = 10;

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
},
title: {
    text: 'Chart Title'
},
credits: {
    enabled: false
},
yAxis: {
    min: 0,
    max: max,
    tickInterval: 2,
    reversed: true
},
series: [{
    type: 'column',
    data: [{
        y: 1,
        low: max
    }, {
        y: 3,
        low: max
    }, {
        y: 6,
        low: max
    }]
}]

Upvotes: 2

jlbriggs
jlbriggs

Reputation: 17791

There is no good easy direct way to do it (afaik).

There are a variety of approaches you could take, however.

This example uses a reversed axis and stacked columns:

http://jsfiddle.net/jlbriggs/JVNjs/301/

stacking:'normal',

It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.

I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.

Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.

Upvotes: 0

Strikers
Strikers

Reputation: 4776

Highcharts provides an option for this called reversed setting it true will do the work for you.

http://api.highcharts.com/highcharts#yAxis.reversed

reversed: true

here is the jsfiddle http://jsfiddle.net/bmbhD/

Upvotes: 0

Related Questions