The y-axis on my graph goes from 1 to 20 (min to max), but I want the y-axis to go from 20 to 1 (max to min) The max number starting at the base of the graph and decreases as you go up the graph until you reach the min.I can't seem to find the syntax to perform this. I am using chart.js to do this

<script>
var myChart = document.getElementById("myChart").getContext("2d");

var historyChart = new Chart(myChart, {
    type:'line',
    data:{
        labels:['2012/13', '2013/14', '2014/15', '2015/16', '2016/17'],
        datasets:[{
            label: 'League Position',
            fill: false,
            lineTension: 0.1,
            backgroundColor: "blue",
            borderColor: "black",
            borderCapStyle: 'butt',
            data: [15, 11, 17, 13, 4]
        }]
    },
    options:{
    title: {
        display: true,
        text: 'League History'
    },
     scales: {
            yAxes : [{
                ticks : {       
                     fontSize: 14,            
                    max : 20,  
                    min : 1,
                    stepSize: 1,
                }
            }],
            xAxes : [{
                ticks : {       
                     fontSize: 14,            

                }
            }]
        }

    }
});
</script>

The y-axis on my graph goes from 1 to 20 (min to max), but I want the y-axis to go from 20 to 1 (max to min) The max number starting at the base of the graph and decreases as you go up the graph until you reach the min.I can't seem to find the syntax to perform this. I am using chart.js to do this

<script>
var myChart = document.getElementById("myChart").getContext("2d");

var historyChart = new Chart(myChart, {
    type:'line',
    data:{
        labels:['2012/13', '2013/14', '2014/15', '2015/16', '2016/17'],
        datasets:[{
            label: 'League Position',
            fill: false,
            lineTension: 0.1,
            backgroundColor: "blue",
            borderColor: "black",
            borderCapStyle: 'butt',
            data: [15, 11, 17, 13, 4]
        }]
    },
    options:{
    title: {
        display: true,
        text: 'League History'
    },
     scales: {
            yAxes : [{
                ticks : {       
                     fontSize: 14,            
                    max : 20,  
                    min : 1,
                    stepSize: 1,
                }
            }],
            xAxes : [{
                ticks : {       
                     fontSize: 14,            

                }
            }]
        }

    }
});
</script>

• javascript
• html
• charts
• chart.js

• Don't forget to up vote! – Chandan Rauniyar Commented Nov 13, 2017 at 12:01
• Yes sir!!!!!!!! :) – Workkkkk Commented Nov 13, 2017 at 17:55

1 Answer 1

Use reverse: true for yAxes configuration

yAxes: [
        {
            reverse: true, // will reverse the scale
        }
    ]