CODEWITHSUNDEEP
javascriptchart.jsresponsive
greentech
greentech

Reputation: 111

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

Upvotes: 6

Views: 8158

Answers (3)

Habib
Habib

Reputation: 29

For Angular you can make the logic like this... the screen.width will counted as your viewport width

  canvas: any;
  ctx: any;
  legend: any;
  font: any;
  constructor() { }

  ngOnInit(): void {
    this.canvas = document.getElementById('tpChart');
    this.ctx = this.canvas.getContext('2d');
    this.legend = (screen.width < 575) ? false : true; //when viewport will be under 575px
    this.font = (screen.width < 1200) ? 14 : 16; //when viewport will be under 1200px
    let tpChart = new Chart(this.ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          borderWidth: 2,
          data: [70, 50, 40, 30],
          backgroundColor: [
            '#00CDB6',
            '#F08C2E',
            '#0F9AF0',
            '#F16C51',
          ],
        }],
        labels: [
          'United Kingdom',
          'Bangladesh',
          'United States',
          'Others',
        ]
      },
      options: {
        responsive: true,
        cutoutPercentage: 65,
        spanGaps: false,
        legend: {
          display: this.legend, //This will work dynamatically
          position: "right",
          align: "center",
          labels: {
            fontColor: '#484848',
            boxWidth: 10,
            fontSize: this.font, //This will work dynamatically
            fontFamily: "Cabin",
            padding: 25,
            usePointStyle: true
          },
          
        }
      },
    });
  }

Upvotes: 0

muasif80
muasif80

Reputation: 6006

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
                    }
                }];
            }
     };

  }
});

Upvotes: 6

Phiter
Phiter

Reputation: 14992

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()
                }

            }];
        } 
})

Upvotes: 9

Related Questions