'ECharts: how to show all axis labels?

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.

javascript echarts

Solution 1:^[1]

axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.

Solution 2:^[2]

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 },

Solution 3:^[3]

2 ways to solve long label text

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

Solution 4:^[4]

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,
      },

Sources

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

Source: Stack Overflow

Solution	Source
Solution 1	cgat
Solution 2	Tekson
Solution 3	Lakshmi Pillai
Solution 4	CamiEQ

'ECharts: how to show all axis labels?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]