Chartjs-(Chart.js 3.7.0) change position of x-axis ticks to alternate between each tick?

by

0👍

You can define two identical datasets together with two x-axes. One of the x-axes with position: 'top', the other one with default position (‘bottom’).

A slightly different ticks.callback function on both x-axes makes sure that only every second tick is displayed.

ticks: {
  source: 'data',
  ...
  callback: (v, i) => i % 2 ? v : ''
},

Please take a look at the following runnable code and see how it works.

const data = [
  { x: "2022-03-22", y: 0 },
  { x: "2022-04-01", y: 0 },
  { x: "2022-04-02", y: 0 },
  { x: "2022-04-03", y: 0 },
  { x: "2022-04-08", y: 0 },
  { x: "2022-04-12", y: 0 },
  { x: "2022-04-15", y: 0 }
];

new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
      data: data,
      backgroundColor: 'black',
      pointRadius: 5,
      pointHoverRadius: 5,
      borderWidth: 2,
      xAxisID: 'x'
    },
    {
      data: data,
      backgroundColor: 'black',
      pointRadius: 5,
      pointHoverRadius: 5,
      borderWidth: 2,
      xAxisID: 'x2'
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: context => undefined
        }
      }
    },    
    scales: {
      y: {
        ticks: {
          display: false,
        },        
        grid: {
          display: false,
          drawBorder: false
        }
      },
      x: {
        position: 'top',
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        ticks: {
          source: 'data',
          minRotation: 90,
          callback: (v, i) => i % 2 ? v : ''
        },        
        grid: {
          display:false,
          drawBorder: false
        }
      },
      x2: {
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        ticks: {
          source: 'data',
          minRotation: 90,
          callback: (v, i) => i % 2 ? '' : v
        },        
        grid: {
          display:false,
          drawBorder: false
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="chart" height="50"></canvas>

Leave a comment