unexpected grouping for Bar chart

[mpushki]

Description

When I use xs and bar chart - I expect to be ungrouped

  data: {
    xs: {
      data1: "x1",
      data2: "x2"
    },
    columns: [
	    ["x1", 1, 2, 3, 4, 5],
            ["x2", 1, 2, 4, 5, 6],
	    ["data1", 4, 1, 6, 8, 10],
            ["data2", 5, 2, 6, 7, 8]
    ],
    type: "bar", // for ESM specify as: line()
  },

Steps to check or reproduce

https://jsfiddle.net/mpushki/eu2o561x/2/

[watnab]

It seems:

• xs + bar -> grouped.
• xs + area -> ungrouped.
• xs + area + groups -> ungroupd.
• xs + bar + groups -> grouped. Wrong? autoscale of y axis.

[netil]

Hi @mpushki, is there any reason to use same xs? The data bound to different xs, will make data to be rendered as in different x scales for each data series.

[watnab]

• xs + bar -> grouped.
• xs + bar + groups -> grouped. Wrong? autoscale of y axis.

I thought "data1" and "data2" were stacked(grouped). However "data1" seems to overlap with "data2".

[mpushki]

Hi @mpushki, is there any reason to use same xs? The data bound to different xs, will make data to be rendered as in different x scales for each data series.

I just used to c3js. And i'm in migration to billboard and option has unexpected behavior for me as I show it above.

About reason: I have large amount data with different x and show it on one chart. It makes no sense to run through a huge array if there is only one value for a particular case. So for each data stream I have a different x.

[watnab]

https://github.com/naver/billboard.js/blob/af1937054c7659158b4bf893db53b7aebfcc1bc0/src/ChartInternal/shape/bar.ts#L143 The value of barTargetsNum is 1 but it may be the value should be 2 in this case. It may be barIndices has wrong value.

[netil]

well, this mainly comes from treating xs as different scale space even they're having same x tick values. (Ref. #1115) Checkout the difference on billboard.js(left screenshot) and C3.js(right screenshot), with below generation option.

bb.generate({
  data: {
    xs: {
      "Sep": "x1",
      "Jul": "x2",
      "Aug": "x2"
    },
    type: "bar",
    columns: [
      ["x1", "05"],
      ["x2", "01", "08", "29"],
      ["Sep", 2],
      ["Jul", 1, 1, 1],
      ["Aug", 2, 2, 2]
    ]
  }
})

Will notice that right screenshot's bars aren't positioned correctly.