CODEWITHSUNDEEP
javascriptecharts
cgat
cgat

Reputation: 3909

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.

Upvotes: 29

Views: 36256

Answers (5)

Eli Zatlawy
Eli Zatlawy

Reputation: 1012

You can do:

  axisLabel: {
    hideOverlap: false, // This ensures labels are always shown
    interval: 0, // Forces all labels to show
    width: 100,
    overflow: 'break', // Can be 'break' or 'truncate' depending on your preference
    // Optional: rotate labels if they overlap
    // rotate: 45,
    // Optional: adjust margins to prevent cutoffs
    margin: 15,
  },

Upvotes: 0

CamiEQ
CamiEQ

Reputation: 771

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

Upvotes: 8

Lakshmi Pillai
Lakshmi Pillai

Reputation: 59

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

Upvotes: 5

Tek Kshetri
Tek Kshetri

Reputation: 2337

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

Upvotes: 36

cgat
cgat

Reputation: 3909

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

Upvotes: 46

Related Questions