Bar chart with single bar not centered on label

[asahlin]

I am submitting a...

• [ ] Feature request
• [ ] Design defect
• [x] Source code defect
• [ ] Demo/documentation defect
• [ ] Other

charts version: 0.10.2

Issue description: I have bar chart with grouped data, when their is only one value (one bar) the bar is not centered on the x-axis

Steps to produce the issue: Supply multiply datasets to bar chart, with only have one value code example: if (tempValue > 90) { dataSafeLevel.push(null); dataWarningLevel.push(null); dataNeedsActionLevel.push(tempValue); } else if (tempValue > 50) { dataSafeLevel.push(null); dataWarningLevel.push(tempValue); dataNeedsActionLevel.push(null); } else { dataSafeLevel.push(tempValue); dataWarningLevel.push(null); dataNeedsActionLevel.push(null); } });

return {
  labels: labels,
  datasets: [
    {
      backgroundColors: ['#4178be'], // $color__blue-50
      data: dataSafeLevel,
      label: 'Safe',
    },
    {
      backgroundColors: ['#734098'], //$color__purple-60
      data: dataWarningLevel,
      label: 'Warning',
    },
    {
      backgroundColors: ['#ad1625'], // '$color__red-60
      data: dataNeedsActionLevel,
      label: 'Needs Action',
    },
  ],
};

Current behavior: Single bar does not line up

Expected behavior: Bar is centered

Screenshot or recording

showing array with values & nulls in each index.

[asahlin]

One possible fix is to not calculate null values in the bar width calculations? In my case, only 1 dataset will have a value for each bar, so technically it could /should be full width allowed (not divided by 3)

[theiliad]

Thanks @asahlin 👍

[asahlin]

@theiliad Is that is something that will addressed? This is what our customers are seeing

[theiliad]

Hey @asahlin. We should really address this issue asap IMO.

I'm going to get design involved to see if your proposed solution would be ideal for us to go through with, then we can quickly implement a fix.

@shixiedesign @cameroncalder

[amortiz]

@theiliad how was this fixed? Aaron and I migrated to the new tabular data format, and i still see the same problem:

[amortiz]

see this: https://codesandbox.io/s/crazy-khayyam-xmvcr

we;re using the bar charts to show safe/warning/error levels for certain metrics. Which means for a certain dataset, only one key will have a value, the others will be 0. we'd like for the bar to be centered and ignore the ones that have 0, Aaron explains it better above

on the sandbox example, you can tell that the "warning" yellow dataset is centered because it's the 2nd group, but the safe one (green) is on the left side. we'd like all the bars to be consistent regardless of the grouping.

[nstuyvesant]

Appears to still be an issue in the latest... https://codesandbox.io/s/focused-resonance-x8yw5w?file=/src/index.js