How to invert y axis using chart.js (v2.0-dev)

Question

I create line diagrams with 2 y-axes. one of these axes has two data sets, but both of them work from a range of 0-100. The higher the number, the better. The second y axis is usually lower in the range (often in single digits), and the best result is 1.

How can I invert the second y axis so that 1 is at the top of the chart?

(I will try to find a solution myself, but on the 5k + lines in chart.js this may take some time)

Thanks ^ _ ^

Answer 1

Dev 2.0 charts js supports the ability to change ticks when setting the axis so that your second axis declaration becomes

{ type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "right", id: "y-axis-2", ticks: { reverse: true }, // grid line settings gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up } } 

Here it is in action https://jsfiddle.net/nwc8ys34/15/

Answer 2

Using v 2.7.0, and the following seems to work:

options: { scales: { yAxes: [{ ticks: { reverse: true, } }] } }