Bars overlaps with default settings in chart with multiple series

[stefano-xy]

Description

I have a simple bar graph, with two data series. With the default settings, the bars overlaps (see 1st screenshot) when the data point x = 95 is present. I have to configure the bar width and ratio manually to avoid it. Unfortunately the data is dynamic so I can't really do it. If the last row x = 95 is removed, the default settings are just fine (2nd screenshot).

Resizing the graph horizontally, even 2x, doesn't help.

Steps to check or reproduce

bb.generate({
  bindto: '#delay_distribution',
  data: {
    type: bar(),
    x: 'delay_h',
    rows: [
      ['delay_h', '%_prev', '%_last' ],
      [3,0.10119911436525857,0.1931098539221481],
      [7,0.12312515071135761,0.30997213543865576],
      [19,0.13627814192077514,0.31714937093641815],
      [23,0.16357498301071968,0.08642235919952715],
      [27,0.21011026590963894,0.06869036561682006],
      [31,0.14735734484950785,0],
      [43,0.10892868886599294,0],
      [95,0,0.005615131301190577]
    ]
  }
})

Tested with 2.1.4.

[netil]

Hi @ragazzojp, bar shapes are overlapped, because the corresponding x ticks space aren't enough for bars.
The x Axis scales based on x Axis value and its bound element's width.

If x Axis values scales from 3 to 95, the total width will be calculated based on that scale, where the space designated for the lower values(in the above example, will be the 3, 7, ... 31) will be more narrowed.

There're 2 possible solution:

• If don't need to x Axis be scaled by its values, make to have same width space using category axis type.

   axis: {
    x: {
      type: "category"
    }
  }

  

• or make bar width scale, according the chart width (bar width will be based on the chart bound element's size)

  bar: {
    width: {
       ratio: 0.3
    }
  }

  

[stefano-xy]

I know category, it's not the representation I would like to use. I still believe the default settings in presence of multiple data series is somehow not calculated correctly. You propose 0.3, it looks reasonable, but it should be calculated, let's say 2 series means 0.6 / 2, just an hypothesis knowing that the default is 0.6.

It's not a matter of chart width, see for example the following picture, where data is much more dense and it's still rendered nicely with the default settings, but this has only one data serie.

Compare it please with the 2 pictures I posted above, less dense but bars overlap. You can see it live if you prefer.

[netil]

@ragazzojp, after looking the source code I found that the Axis tick's interval aren't calculated correctly.
It was calculating based on the chart width and tick counts, not reflecting the scale.

Check out the below screenshot. Same bar width are set, where the right image shows correctly, because every ticks interval are same, whereas the left are getting overlapped.

current	same tick interval

Fixed version

It needs to be solved calculating the intervals based on the scale and its ticks value which set to be shown.

Based on the new calculation, bar's width will not be overlapped anymore, but as of the default ratio value(0.6), they will be shown more narrowed than before. To be fully occupying the tick's space, it needs to set ratio value to 1.

bar.width.ratio=0.6	bar.width.ratio=1

[stefano-xy]

Fix appreciated, I understand the bars looks more narrow now but they're correct and uniform everywhere. This allows me to raise bar.width.ratio everywhere.