CODEWITHSUNDEEP
echarts
tputkonen
tputkonen

Reputation: 5739

Apache ECharts: Rotated labels get cropped

I'm trying to use rotated labels in my graph. However, the labels are getting cropped. How can I make more space in the bottom so that the labels can fit?

enter image description here

  options = {
    xAxis: {
      type: "category",
      data: axis,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 45,
      },
      axisTick: {
        show: true,
        interval: 0
      }
    },
    yAxis: {
      type: "value",
      data: axis,
      min: 1,
      minInterval: 1,
      maxInterval: 1,
      max: 15,
      axisTick: {
        interval: 1
      }
    },
    series: [
      {
        type: "bar",
        stack: "minmax",
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)"
          }
        },
        data: maxs
      },
      {
        type: "bar",
        stack: "minmax",
        data: mins,
        itemStyle: { color: "#63869e" }
      },
      {
        symbolSize: 20,
        data: scatter,
        type: "scatter",
        itemStyle: { color: "black" },
      },
    ]
  };

Upvotes: 5

Views: 8150

Answers (2)

Kristiyan Peev
Kristiyan Peev

Reputation: 111

To contain the label you can use:

options = {
  grid: {
    containLabel: true,
  }
}

Upvotes: 11

Sergey Fedorov
Sergey Fedorov

Reputation: 4450

Space can be added with grid option bottom:

options = {
  grid: {
    bottom: 100,
  }
}

Upvotes: 1

Related Questions