[Chartjs]-Conditional in ChartJS axes tick callback function isn't returning the expected labels

by

6👍

✅

You need to define ticks.autoSkip: false on the x-axis to make it work as expected:

autoSkip: If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.

Please take a look at your amended code below:

let data     = [
  1,6,3,11,5,1,2,6,2,10,5,8,1,1,2,4,5,2,3,1
];

let labels = [
  "Aug 1","Aug 2","Aug 3","Aug 4","Aug 5","Sep 1","Sep 2","Sep 3","Sep 4","Sep 5","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Nov 1","Nov 2", "Nov 3","Nov 4","Nov 5"
];

let rollingLabel;

chart = new Chart('chart', {
  type: "line",
  data: {
    datasets: [
      {
        backgroundColor: '#12263A',
        data: data,
        pointRadius: 0
      }
    ],
    labels: labels,
  },
  options: {
    legend: {
      display: false
    },
    responsive: false,
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            display: true,
            autoSkip: false,
            callback: function(label, index, labels) {
              let _label = label.replace(/[0-9]/g, ''); 
              if (rollingLabel != _label) {
                rollingLabel = _label;
                return rollingLabel;
              }
            }
          }
        }
      ]
    },
    tooltips: {
      mode: "index",
      intersect: false
    },
    hover: {
      mode: "index",
      intersect: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

5👍

I found a easy solution via the chart.js documentation.

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart with Tick Configuration'
      }
    },
    scales: {
      x: {
        ticks: {
          // For a category axis, the val is the index so the lookup via getLabelForValue is needed
          callback: function(val, index) {
            // Hide the label of every 2nd dataset
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }
  },
};

The callback function decides what labels will be shown. Current setup shows every 2nd label, if you want to show every 3rd for example you would change:

return index % 2 === 0 ? this.getLabelForValue(val) : '';

to:

return index % 3 === 0 ? this.getLabelForValue(val) : '';

Leave a comment