ECharts: how to show all axis labels?

user_1631828 0
Viewed 17803

Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.

echarts javascript
4 Answers

You can try this to force the label of the x-axis,

xAxis: {
      type: "category",
      data: data[0],
      axisLabel: {
        interval: 0,
        rotate: 30 //If the label names are too long you can manage this by rotating the label.
      }

//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.

If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,

grid: { containLabel: true },
user_93543440

2 ways to solve long label text

  1. Using rotate option xAxis : { axisLabel: { rotate: 45 } }
  2. Using formatter and introducing '/n' to break the text
user_31956890

just for the record:

If your categories have a fixed width, you can also set it up like this, in order to show all labels:

      axisLabel: {
        width: 100, //fixed number of pixels
        overflow: 'truncate', // or 'break' to continue in a new line
        interval: 0,
      },
user_138247420
Related