React中Chart.js X轴每月仅显示一次月份标签(MMM)的实现方法

Got it, let's tackle that X-axis label problem where the month repeats on every tick. The solution lies in using a custom tick callback to conditionally show the month abbreviation only when the month changes, and just the date for subsequent ticks in the same month.

Step-by-Step Modification #

Here's how to update your options configuration to achieve the desired output (May 15, 18, 21, ..., Jun 2, 5, ...):

const options = {
  legend: {
    display: false,
  },
  hover: {
    mode: 'index',
    intersect: false,
    animationDuration: 0,
  },
  scales: {
    yAxes: [{ position: 'right' }],
    xAxes: [{ 
      gridLines: { display: false },
      distribution: 'linear',
      type: 'time',
      time: {
        parser: 'MMM D',
        tooltipFormat: 'MMM D',
        unit: 'day',
        unitStepSize: 3,
        // Remove the displayFormats here since we'll use a custom callback
      },
      ticks: {
        min: startDate,
        max: date.format(date.addDays(new Date(), 1), 'MMM D'),
        autoSkip: true,
        // Custom callback to control label display
        callback: function(value, index, values) {
          const currentDate = new Date(value);
          const currentMonth = currentDate.getMonth();
          
          // Initialize previous month tracking (uses axis context to persist state)
          if (!this.prevMonth) {
            this.prevMonth = currentMonth;
            return date.format(currentDate, 'MMM D');
          }

          if (currentMonth === this.prevMonth) {
            // Same month as previous tick: only show date
            return date.format(currentDate, 'D');
          } else {
            // New month: show month + date, update tracking variable
            this.prevMonth = currentMonth;
            return date.format(currentDate, 'MMM D');
          }
        }
      }
    }],
  },
  tooltips: {
    mode: 'x-axis',
  },
};

How This Works #

• Custom Tick Callback: The callback function runs for every X-axis tick. We use it to compare the current tick's month with the previous one.
• State Persistence: We store the previous month in this.prevMonth (the this here refers to the X-axis instance, so it persists across ticks).
• Conditional Formatting:
  • For the first tick, we initialize prevMonth and show the full MMM D format.
  • If the current tick's month matches prevMonth, we only show the date.
  • When the month changes, we update prevMonth and show the full MMM D format again.

Notes #

• We're using your existing date-and-time library to handle date formatting, which keeps consistency with your code.
• The tooltip format remains MMM D so users still see the full date when hovering, which is good for clarity.

内容的提问来源于stack exchange，提问作者Arthur