Chart.js: Reverse Scale?

[praxeum]

Trying to make a graph where the scale goes from 1-20 from top top bottom (for a chart over league positions), is that possible?

[nnnick]

Not right now. I'm currently collating features for the next major library release.

If you have some ideas on how an API for this feature could work let me know.

[thetaylor82]

I need this urgently. Is this project dead?

[djn72]

This would be really useful, I have a simlar case where I want to display a graph of league positions over several weeks and the ability to "invert the scale" would be very useful.

Wondering if anyone is looking at adding an option to implement this?

I have hacked my data to achieve the results I want, but it's not pretty...

(1) invert my data sources by multiplying all data points by -1

(2) override the data labels with tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= (value * -1 ) %>"

(3) override the scale labels with scaleLabel: "<%=(value * -1)%>"

Someone else might find this workaround useful in the meantime.....

[reinvanleirsberghe]

+1

[ympbyc]

Passing a negative value as scaleStepWidth worked for me.

chart.Line({......}, {
  scaleOverride: true,
  scaleSteps: 19,
  scaleStepWidth: -1,
  scaleStartValue: 20
});

[derekperkins]

@praxeum Try @ympbyc 's solution in conjunction with the easier config of 2.0. The first alpha of Chart.js 2.0 has landed and should fix this issue. Check out the release and try it out! We've got a lot of momentum right now, so please help us test so we can launch 2.0 Gold by the end of the month.
https://github.com/nnnick/Chart.js/releases/tag/v2.0-alpha

I'm closing this issue for now, but if you have implementation questions or find bugs, please create a jsfiddle and post the link here and we'll reopen this issue and get it fixed.

[rclations]

I'm sorry if I'm totally missing something here, but scaleStepWidth doesn't appear to be anywhere in the 2.0-alpha codebase. Any idea how I can get this working?

[etimberg]

@rclations I believe it got renamed. In your config, you could do something like the following

config = {
    scales: {
        yAxes: [{
            override: {
                 start: 10,
                 steps: 10,
                 stepWidth: -1
            }
        }]
    }
}

This is the code that uses it.

[rclations]

thanks for the quick reply!

I dug around some more and found that it could be done like this in a kind of hacky way -

        var options = {
            scales: {
                yAxes: [
                    {
                        beginAtZero: true,
                        labels: {
                            userCallback: function(tick, index, ticks) {
                                return Math.abs(tick);
                            }
                        }
                    }
                ]
            }
        };

The override option has a bug in it - I'm getting a js error because the value is set to null in the source, so it doesn't like me passing an object.

Regardless, the override object would only let me really customize steps so I could prevent decimals in y-axis labels - I didn't find anything that would invert the scale. stepWidth does change the labels to step negatively, but doesn't change the chart data with it.

[etimberg]

I'll look into the bugs tonight. It might just be easier to add a reverse option to the scale. Thanks for trying it out!

[rclations]

you bet - having a reverse option on the scale would be fantastic

[rclations]

any news on this? Could we reopen this ticket until this gets resolved?

[etimberg]

@rclations I added a reverse option to the linear scale config in 76d2a78

var options = {
    scales: {
        yAxes: [
            {
                reverse: true, // will reverse the scale
            }
        ]
    }
};

[nightwolfy]

To draw the y axes from top to down try this. This works for me

yAxes: [{
        ticks: {
          beginAtZero: true,
          reverse: true,
        },
        display: true,

      }]

[abddu1]

Can the xAxis direction be reversed? We need it for RTL languages, to show the chart right to left, is this possible any other way?

[juniorcintra]

Can the xAxis direction be reversed? We need it for RTL languages, to show the chart right to left, is this possible any other way?

Any help? I need this too!

[kurkle]

Same reverse option should work there (has been moved under ticks):

var options = {
  scales: {
    xAxes: [{
      ticks: {
        reverse: true, // will reverse the scale
      }
    }]
  }
};

[juniorcintra]

Same reverse option should work there (has been moved under ticks):

var options = {
  scales: {
    xAxes: [{
      ticks: {
        reverse: true, // will reverse the scale
      }
    }]
  }
};

I resolved this, but not on the chart.js configuration, but directly on javascript, before sent the arrays to the chart.js, using .reverse() function! :)

[DevidCIC]

@rclations I added a reverse option to the linear scale config in 76d2a78

var options = {
    scales: {
        yAxes: [
            {
                reverse: true, // will reverse the scale
            }
        ]
    }
};

This does not work for me, I have the 2.8.0 chart.js version. Anyone else with the same problem ?
Even if I put it under ticks!