too much padding in bar-vertical-2d chart

[shah-dhaval]

Describe the bug When have large data in bar-vertical-2d chart then getting extra spacing in chart at start and end

Expected behavior Please guide to how to remove that extra spacing at start and end

Screenshots

Demo https://stackblitz.com/edit/swimlane-grouped-vertical-bar-chart-j6oucq

ngx-charts version 14.0.0

Additional context I have tried this https://stackoverflow.com/questions/30596100/unneeded-white-space-before-the-1st-bar-in-d3-bar-chart but this also not working

[krmarien]

I had the same issue recently. After some debug this is causes by the getXScale function in the latest version of the (in my case) stacked vertical bar chart.

This function uses the scaleBand from d3-scale and is enabling rounding. When you have a lot of ticks on the X-axis, this will cause issues.

In the following example you can see a comparison between the default chart and a custom one: https://stackblitz.com/edit/swimlane-stacked-vertical-bar-chart-m43zts?file=app%2Fapp.component.html

The getXScale function in the original code:

getXScale(): any {
    const spacing = this.groupDomain.length / (this.dims.width / this.barPadding + 1);
    return scaleBand().rangeRange([0, this.dims.width]).paddingInner(spacing).domain(this.groupDomain);
}

In the custom chart:

getXScale(): any {
    const spacing = this.groupDomain.length / (this.dims.width / this.barPadding + 1);
    return scaleBand().range([0, this.dims.width]).paddingInner(spacing).domain(this.groupDomain);
}