Apache EChartsでX軸ラベルが見切れるときの対応

この記事は公開から2年以上経過しています。

Apache EChartsでX軸ラベルが見切れてしまう現象が発生したため、その対応についての備忘録。

問題

Apache EChartsで縦書きの長いX軸ラベルを表示すると、先頭文字が見切れてしまう。

対応

grid.bottomオプションでラベルの高さ(グリッドコンポーネントとコンテナの距離)を、ラベルが切れないサイズに調整する(既定値は60)。

option = {
  // ↓追加
  grid: {
    bottom: 140
  },
  // ↑追加
  xAxis: {
    type: 'category',
    data: ['LooooongLabel1', 'LooooongLabel2', 'LooooongLabel3', 'LooooongLabel4'],
    axisLabel: {
      rotate: 90
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218],
      type: 'line'
    }
  ]
};

参考ウェブサイトなど

• Apache ECharts
  Docs/grid.bottom

以上です。