Bar series overflow xAxis when using xAxis.scale = true with several series

[deterralba]

Version

5.1.2

Reproduction link

https://jsfiddle.net/9p4j6175/

Steps to reproduce

option = {
  "xAxis": {
    // min": 10,
    scale: true,
  },
  "yAxis": { },
  "series": [
    {
      "id": "F",
      "data": [
        [20,1],
        [35,2],
        [55,7],
    ],
      "type": "bar",
    },
    {
      "id": "M",
      "data": [
        [20,1],
        [35,2],
        [55,7],
      ],
      "type": "bar",
    }
  ]
}

What is expected?

The bars are not going at the left side of the xAxis for the lowest value.
We could add a option to add "extra security margins", scale: {margin: '10%'} could be a solution.

What is actually happening?

The bars are on the left side of the xAxis for the lowest value.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[100pah]

Does boundaryGap help?

[helgasoft]

@100pah - no, boundaryGap does not help yes, boundaryGap helps.
Looks like the bug is related to number of bars. Four or less bars with scale:true will overflow Xaxis. More than four will display correctly.

option = {
  "xAxis": { scale: true
       // ,boundaryGap: ['10%', '10%']    // workaround
   },
  "yAxis": {},
  "series": [ { "type": "bar" } ],
  "dataset": [{
      "source": [
        ["x", "y"],
        [  25000, 4  ],
        [  35000, 14 ],
        [  45000, 10 ],
        [  55000, 4  ],
//        [  66000, 1  ]   // un-comment to see difference
      ]
    }]
}

May be related to #13321.

[dimer47]

I had the same problem, thank you very much @helgasoft !
The xAxis scale:true option works perfectly.