CODEWITHSUNDEEP
javascriptechartsapache-echarts
Simone
Simone

Reputation: 7

Apache eCharts - yAxis legend without overlap

With eCharts, I'm trying to find a solution to display the yAxis name properly for every screen size and chart content. Starting from this example, where the axis name overlaps with the axis labels:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [{
    name: "TEST",
    nameLocation: "middle",
  }],
  series: [
    {
      data: [1500, 2300, 2240, 2180, 1350, 1470, 2600],
      type: 'line',
    }
  ]
};

I tried adding a padding to move the name and make it not overlap.

  yAxis: [
    {
      name: 'TEST',
      nameLocation: 'middle',
      nameTextStyle: {
        padding: [0, 0, 50, 0]
      }
    }
  ],

but that has two problems:

  1. it doesn't always work if the labels are longer (e.g. if the data has 8 digits instead of 4)
  2. if I reduce slightly the screen size, the name of the axis goes out of bounds.

How can I solve this problem? Is there a way to express the margin in a relative way from the axis labels?

Upvotes: 0

Views: 250

Answers (0)

Related Questions