Overlapping labels in xAxis with type="time"

Version

5.5.0

Link to Minimal Reproduction

Steps to Reproduce

The data and the code are provided above so the chart is created when running it. The plot looks like this:

Current Behavior

The problem is that the x axis labels overlap and I have not found a way of solving this.

I have seen the parameter interval in the documentation, but I think it cannot be used with type='time' in the xAxis. If I try to add it in the code I get the following error in VS Code (but not on the URL provided):

Object literal may only specify known properties, and 'interval' does not exist in type 'AxisLabelBaseOption | AxisLabelOption<"time">'.ts(2353)

Expected Behavior

I want to get a chart where labels do NOT overlap. It would be great if I could add a label per month of data (i.e., 1st May, 1st June...).

Environment

- OS: macOS Big Sur
- Browser: Chrome 124.0.6367.208
- Framework: Ionic 7.2.0 + Angular

Any additional comments?

Thank you!

I am sorry, but the link above did not include my code. I am providing it below:

const formattedData = [
  {fecha_eva: '30 abr 2024', eva: '6', eva_complete: '2'},
  {fecha_eva: '1 may 2024', eva: '7', eva_complete: '2'},
  {fecha_eva: '3 may 2024', eva: '6', eva_complete: '2'},
  {fecha_eva: '4 may 2024', eva: '5', eva_complete: '2'},
  {fecha_eva: '5 may 2024', eva: '10', eva_complete: '2'},
  {fecha_eva: '14 may 2024', eva: '6', eva_complete: '2'},
  {fecha_eva: '15 may 2024', eva: '6', eva_complete: '2'},
  {fecha_eva: '17 may 2024', eva: '7', eva_complete: '2'},
  {fecha_eva: '20 may 2024', eva: '5', eva_complete: '2'},
  {fecha_eva: '20 may 2024', eva: '4', eva_complete: '2'},
  {fecha_eva: '26 jul 2024', eva: '10', eva_complete: '2'}
];

const processedData = formattedData.map(obj => ({
  fecha_eva: new Date(obj.fecha_eva),
  eva: typeof obj.eva === 'string' ? parseInt(obj.eva, 10) : obj.eva
})).sort((a, b) => a.fecha_eva.getTime() - b.fecha_eva.getTime());

const seriesData = processedData.map(obj => [obj.fecha_eva, obj.eva]);

option = {
  title: {
    text: "Cuestionario EVA",
    subtext: "Niveles de dolor introducidos"
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: (value) => {
        const date = new Date(value);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      },
    },
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: 'EVA Level',
      type: 'line',
      data: seriesData,
      lineStyle: {
        color: '#E67E22',
        width: 2.5,
      },
      itemStyle: {
        color: '#E67E22',
      },
      animationDelay: idx => idx * 10,
    }
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate: idx => idx * 5,
};

apache / echarts