'Echarts - Rotated X-Axis labels overlap the graph itself

I am using Apache Echarts 5.2.2 and I am struggling with rotated x-axis labels. With large font sizes like 30, 40, they overlap the graph as you can see in the image below

Here the config

option = {
  grid: {
    left: '10%',
    right: '10%',
    bottom: '15%'
  },
  xAxis: {
    type: 'category',
    data: [
      "Arta",
      "Chahar Mahal va Bakhtiari",
      "Drenthe",
      "Gamprin",
      "Kabale",
      "Lvivska oblast",
      "Tebessa",
      "Wangdue Phodrang",
      "Zagorje ob Savi",
      "Zeeland"
    ],
    axisLabel: {
      fontSize: 40,
      rotate: -45,
      overflow: 'truncate',
      width: 100,
    }
  },
  yAxis: {
    type: 'value',
    name: 'km/s minus 299,000',
  },
};

Anyone knows the solution or what I am doing wrong?

echarts

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Echarts - Rotated X-Axis labels overlap the graph itself

Sources

Related Questions