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 ^_^
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.
The chart legend displays data about the datasets that are appearing on the 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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With