javascript - Chart.JS how to change order of y-axis - Stack Overflow

admin管理员组

文章数量:1394520

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

Share Improve this question Follow edited Nov 12, 2017 at 23:49 Workkkkk asked Nov 12, 2017 at 23:29 WorkkkkkWorkkkkk 28511 gold badge77 silver badges2424 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Use reverse: true for yAxes configuration

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

本文标签： javascriptChartJS how to change order of yaxisStack Overflow