In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?

Question

In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile ?

I Wanna hide/remove labels on x-axis ie "January", "February" etc...

Answer 1

They added the option, 2.1.4 (and maybe a little earlier) has it

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}

Answer 2

I've added a new option.

http://www.knighttube.com/scripts/chart.js

http://www.knighttube.com/scripts/chart.min.js

showXAxisLabel:false

Answer 3

Answer of @Kapytanhook is correct for chart.js version 2.x.x

For those interested, following modification of his answer for ...

chart.js v3.x.x

(as v3.x.x is not backward compatible with v2.x.x)

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {  // <-- object '{' now, instead of array '[{' before in v2.x.x
        ticks: {
          display: false
        }
      }
    }
  }
})

Programmatically:
Also, as questions mentiones to show/hide the lables/ticks, I added a button to modify the chart programmatically:

myLineChart.options.scales['x'].ticks.display = true;
myLineChart.update();

Following complete code with sample data to run snippet and see result with hidden x-axis ticks.

const labels = ["2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06"];
const data_1 = [39,41,42,43,43];
const data_2 = [37,38,40,41,39];

const ctx = document.querySelector('canvas').getContext('2d');

const btnShowHide = document.querySelector('#btnShowHide');

const data = {
  labels: labels,
  datasets: [{
    label: 'Data 1',
    borderColor: 'grey',
    data: data_1
  }, {
    label: 'Data 2',
    borderColor: 'grey',
    data: data_2
  }]
};

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { // <-- object '{' now, instead of array '[{' before in v2.x.x
        ticks: {
          display: false
        }
      }
    }
  }
});

btnShowHide.onclick = function() {
  if(btnShowHide.classList.contains('hidden')) {
    myLineChart.options.scales['x'].ticks.display = true;
    myLineChart.update();
    
    btnShowHide.classList.remove('hidden');
    btnShowHide.innerHTML = 'hide';
  } else {
    myLineChart.options.scales['x'].ticks.display = false;
    myLineChart.update();
    
    btnShowHide.classList.add('hidden')
    btnShowHide.innerHTML = 'show';
  }
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<button id="btnShowHide" class="hidden">show</button>

<div style="width:320px">
  <canvas></canvas>
</div>

Answer 4

I got around this by defining labels as a list of empty strings. Example:

var data = {
    labels: ["", "", "", "", ""],
    datasets: [{
        label: "TEST",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10, 20, 15, 8, 22]
    }]
};

For this you need the label to not be relevant in the tooltip box. I defined mine as follows:

tooltipTemplate: "Latency: <%=value%>"

Answer 5

The simplest solution is:

scaleFontSize: 0

see the chart.js Document

Answer 6

You can extend the current BarChart and remove the xLabels like this.

function registerCustomBarChart() {
    Chart.types.Bar.extend({
        name: "customBarChart",
        initialize: function (data) {
            Chart.types.Bar.prototype.initialize.apply(this, arguments);
            var xLabels = this.scale.xLabels
            xLabels.forEach(function (label, i) {
                    xLabels[i] = '';
            })
        }
    });
}

var myBarChart = new Chart(context).customBarChart(data);

Answer 7

Charts.js provides the responsive charts configuration options among which there is the onResize method. It gets passed two arguments: the chart instance and the new size. Should you log both to the console you'll see the complete chart instance there that includes all the regular options to control the chart instance scales.

I added this to the options object on the Bar chart instance so the X axis disappears on resize to the width of 768 px then appears on the resize back to the desktop screen size. The Bar instance was the Chart.js React wrapper provided by the react-chartjs-2 library.

<Bar
  data={barData}
  options={{
    // default value
    responsive: true,
    onResize: function(newChart, newSize) {
      console.log('newChart:', newChart);
      console.log('newSize:', newSize);

      if (newSize.width < 768) {
        newChart.options.scales.xAxes[0].display = false;
      } else {
        newChart.options.scales.xAxes[0].display = true;
      }
    }, ...

For a Pie instance switch newChart.options.scales.xAxes[0].display for newChart.options.legend.display.