score:0

Accepted answer

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.

score:0

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/

score:2

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
    }]
}]

Related Articles