Chart.js: scaleStartValue from highest to lowest
I am using Chart.js to render a line graph and I want my data to be displayed in reverse, i.e. the highest number that should be displayed at the bottom and the lowest that should be displayed at the top. I can achieve this by setting a negative scale, but the actual labels on the Y axis are lost. Is there any way to have these shortcuts. Please see here: http://jsfiddle.net/7z5e87he/
var myNewChart = new Chart(ctx).Line(data, {
scaleShowGridLines: false,
scaleOverride: true,
scaleStartValue: 10,
scaleStepWidth: 1,
scaleSteps: -6,
responsive:true}); ;
Thank..
+3
source to share
1 answer
No support for inverting y-axis in chartjs: https://github.com/nnnick/Chart.js/issues/579
You can fake it by inverting your dataset (although the axis labels don't match):
var inverted = [8, 8, 9, 7, 7, 7, 5, 4],
max = Math.max.apply(Math, inverted);
inverted.forEach(function(val, idx) {
inverted[idx] = max - val;
});
Fiddle: http://jsfiddle.net/az2u51gj/
+1
source to share