[Bug] Horizontal bar chart series names cut off when chart is not wide enough

[adiakritos]

Version

5.4.1

Link to Minimal Reproduction

https://codepen.io/nres/pen/JjBVWqN

Steps to Reproduce

Generate the chart with these options:

var myChart1 = echarts.init(document.getElementById('main1'));   

option = {
  title: {
    text: "Revenue"
  },
  xAxis: {
  },
  yAxis: {
    data: ['James D.', 'Donald T.', 'Neo I.', 'Todd T.', 'Dennis A.']
  },
  series: [
    {
      name: 'X',
      type: 'bar',
      color: '#349811',
      data: [11000, 15000, 22000, 24000, 38000],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ]
};                

myChart1.setOption(option);             

And this HTML:

<div id="main1" style="height: 300px; width:300px"></div>

Notice the width and height on the container.

Current Behavior

The container does not resize to fix the series names, or allow for more space of the series names. This cuts off the names depending on the width of the chart.

Expected Behavior

Characters on series name should shrink in font size or the chart should be smaller to allow space for the series names.

Environment

- OS: Mac
- Browser:
Chrome
- Framework:
Ruby on Rails 7

Any additional comments?

I love echarts.

[adiakritos]

Not an error. I needed to use these configs:

  grid: {
    containLabel: true,
    left: 'left'
}

It will force the containerLabel to always be visible and not overflow, and then also force the container as far left as possible.