ECharts: how to show all axis labels?

Question

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.

score 39 · Answer 1 · answered May 31 '17 at 22:57

39

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

answered May 31 '17 at 22:57

cgat

3,689
4
24
38

2

Thank you, so much! – Londerson Araújo Oct 31 '18 at 19:04

score 29 · Answer 2 · answered Mar 21 '20 at 13:10

29

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

answered Mar 21 '20 at 13:10

Tek Kshetri

2,129
1
17
41

Also, in echarts 5.0, there are `showMinLabel` and `showMaxLabel` options which can force to show first and last label. You need to set interval: 'auto' to use these label. see: https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel – allenyllee Jul 14 '21 at 12:29

score 3 · Answer 3 · answered May 04 '20 at 08:47

3

2 ways to solve long label text

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

answered May 04 '20 at 08:47

Lakshmi Pillai

39
3

score 2 · Answer 4 · answered Jan 31 '22 at 16:27

2

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

answered Jan 31 '22 at 16:27

CamiEQ

671
5
14

I don't know why somebody marked this answer as not useful, but it helped me. – dominikj111 Oct 14 '22 at 05:43

ECharts: how to show all axis labels?

4 Answers4