Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I invert an y-axis using chart.js (v2.0-dev)

Tags:

chart.js

I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the 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 at 5k+ lines in chart.js, it might take a while )

Thanks ^_^

like image 553
GreysonTyrus Avatar asked Nov 09 '15 11:11

GreysonTyrus


People also ask

How do you reverse the Y axis?

To do this, we have to right click the y axis that we want to reverse. Then, select the Format Axis from the context menu. The next thing to do is to check the Categories in reverse order. This is found in the Format Axis dialog, in the Axis Options.

What is chart legend Javascript?

The chart legend displays data about the datasets that are appearing on the chart.

What is a line chart?

A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line. Line charts are used to track changes over short and long periods.


1 Answers

Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become

{
    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/

like image 53
Quince Avatar answered Oct 26 '22 18:10

Quince