[Bug] Multi-series column charts extend beyond the x axis edge

[Shaq76]

Version

5.3.2

Link to Minimal Reproduction

No response

Steps to Reproduce

let data = [
    ["", "Val1", "Val2"],
    [1, 6545, 6545],
    [2, 2666, 5332],
    [4, 1002, 4008]
];

let option = {
    dataset: { source: data },
    xAxis: { type: 'value' },
    yAxis: {},
    series: [
        {
            type: 'bar',
            encode: { x:0, y:1 }
        },
        {
            type: 'bar',
            encode: { x:0, y:2 },
        }
    ]
};

Current Behavior

The axis doesn't extend beyond all the series

Expected Behavior

The axis is drawn beyond all the series

Environment

- OS: Windows 10
- Browser: Chrome

Any additional comments?

I can work around this by manually setting the axis range however the data is dynamic so that would be problematic.

[tyn1998]

Hi @Shaq76, do you actually need xAxis.type as "value"? Try setting it to "category" then it will work fine.

[Shaq76]

Hi thanks for your comment. Yeah I need the automatic 'gap' at the number 3. I also don't want to manually create extra categories for these gaps (as the data is dynamic)

[linghaoSu]

Hi, @Shaq76 maybe you can specify xAxis.max function to caculate suitable max value

let data = [
    ["", "Val1", "Val2"],
    [1, 6545, 6545],
    [2, 2666, 5332],
    [, 1002, 4008]
];

 option = {
    dataset: { source: data },
    xAxis: { type: 'value', max:(v) => v.max+1 }, // 
    yAxis: {},
    series: [
        {
            type: 'bar',
            encode: { x:0, y:1 }
        },
        {
            type: 'bar',
            encode: { x:0, y:2 },
        }
    ]
};

[Shaq76]

Hi LinghaoSu, thanks for your message. I have tried that solution and it makes the axis extend but you end up with tick labels which you don't want. Also given dynamic data (and dynamic numbers of series) it's difficult for me to calculate the value to add to 'max'.

[linghaoSu]

Hi LinghaoSu, thanks for your message. I have tried that solution and it makes the axis extend but you end up with tick labels which you don't want. Also given dynamic data (and dynamic numbers of series) it's difficult for me to calculate the value to add to 'max'.

let data = [
    ["", "Val1", "Val2"],
    [0, 6545, 6545],
    [2, 2666, 5332],
    [4, 1002, 4008]
];

 option = {
    dataset: { source: data },
    xAxis: { 
      type: 'value', 
      max: (v) => v.max+1, 
      min: (v) => v.min-1, 
      axisLabel: {
         showMaxLabel: false,
        showMinLabel: false,
      }
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            encode: { x:0, y:1 }
        },
        {
            type: 'bar',
            encode: { x:0, y:2 },
        }
    ]
};

echart will provide the 'max' and 'min' values in that column of data. So you need to get this max/min value and extend the range a little. If you don't want that value included in your data, you cloud set AxisLabel.showMaxLabel/showMinLabel false

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[Shaq76]

Hi, this is still an issue for me.