CODEWITHSUNDEEP
highcharts
Jurudocs
Jurudocs

Reputation: 9165

How to reverse a bar chart in highcharts?

Are there some highcharts pros out there?

What i want is, that value 6 (lowest score) starts left and on the right there is the highest score (1)

so the bars heading to 1 (showing the space to be mark 1)

like:

|------------------------(1.9)

|--------------------(2.3)

|----------------------------(1.4)

6..............3................1

http://jsfiddle.net/aCz2s/1/

Any help with that?

Upvotes: 4

Views: 9647

Answers (2)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26310

You can set reversed to yAxis too, like you did on xAxis.

Like this:

xAxis: {
    reversed: true
},
yAxis: {
    reversed: true
}

Here is a demo

Upvotes: 12

wergeld
wergeld

Reputation: 14442

I would do something like this. What is important here and is kind of clunky. Is to make your values be negative and then use the label formatter on the xAxis to have them appear positive (with adjusted min/max):

    yAxis: {
        min: -6,
        max: 0,
        title: {
            text: 'Marks from  6 (very bad) to 1 (yery good)',
            align: 'high'
        },
        labels: {
            overflow: 'justify',
            formatter: function() {
            return this.value * -1;
        }
        }
    }

Also set the Xaxis to be on the opposite side:

    xAxis: {
        reversed:true,
        categories: ['John', 'Sandy', 'Carl', 'Maria'],
        title: {
            text: null
        },
        opposite: true
    }

Upvotes: 2

Related Questions