ChartJS hide labels on small screen sizes

问题

I have a problem hiding xAxes and yAxes labels on small screen sizes (mobile phones). I know there is this option:

options:
        {
            scales:
            {
                xAxes: [{
                    ticks:{
                        display: false
                    }

                }];
            }
        }

But if i use it in the onResize function like this

var ctx = document.getElementById("chart");

var myChart = new Chart(ctx, {
    //chart data and options,

   onResize: function(myChart, size) {

   if (size.height < 140) {
        options:
        {
            scales:
            {
                xAxes: [{
                    ticks:{
                        display: false
                    }

                }];
            }
        }
     }
});

But it does not work on resize. Is hiding labels onResize even the right solution? I am testing on with Chrome responsive mode and on resize works, but would it if accessed from mobile phones?

Can somebody please help me with this problem and point me int the right direction?

Thanks, Gregor

回答1:

Have a try with

var myChart = new Chart(ctx, {
    //chart data and options,

   onResize: function(myChart, size) {

     var showTicks = (size.height < 140) ? false : true;

     myChart.options = {
            scales: {
                xAxes: [{
                    ticks: {
                        display: showTicks
                    }
                }];
            }
     };

  }
});

回答2:

Try this:

onResize: function(myChart, size) {
    myChart.options.scales.xAxes[0].ticks.display = (size.height >= 140);
}

In order to get the option on load on mobile, you should do this:

function isMobileDevice(){
    return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}

var myChart = new Chart(ctx, {
    options :
        scales:
        {
            xAxes: [{
                ticks:{
                    display: !isMobileDevice()
                }

            }];
        } 
})

来源：https://stackoverflow.com/questions/47791250/chartjs-hide-labels-on-small-screen-sizes

标签

javascript

chart.js

responsive