Overlapping and extra wide bars in bar graph

[ordago]

Description

Steps to Reproduce

1. prepare the data
2. pass the data to the chart

Expected Behavior

bars should not overlap and should not occupy more than one date (in a datetime chart)

These are other charts with the same options but different series:

Actual Behavior

bars overlap

Screenshots

Reproduction Link

https://codepen.io/ordago/pen/dPbNpxj

[jackrabbit-start]

I'd like to take a crack at it if you aren't already working on a fix for it

[jackrabbit-start]

BarStacked.js (260~)

     xDivision = w.globals.gridWidth / w.globals.dataPoints
      barWidth = xDivision

      let userColumnWidth = w.config.plotOptions.bar.columnWidth // 70%
      if (w.globals.isXNumeric && w.globals.dataPoints > 1) {
        xDivision = w.globals.minXDiff / this.xRatio
        barWidth = (xDivision * parseInt(this.barOptions.columnWidth, 10)) / 100
      } else if (String(userColumnWidth).indexOf('%') === -1) {
        barWidth = parseInt(userColumnWidth, 10)
      } else {
        // this case
        barWidth *= parseInt(userColumnWidth, 10) / 100
      }

      if (this.isReversed) {
        zeroH = this.baseLineY[translationsIndex]
      } else {
        zeroH = w.globals.gridHeight - this.baseLineY[translationsIndex]
      }

Hey @junedchhipa,
In this case, since w.globals.dataPoints is 1 and isXNumeric is true, the barWidth becomes abnormally large and does not render properly. I would like to ask if it would be acceptable to implement a separate exception case for datetime like original bar type.

[ordago]

Hey @jackrabbit-start, I think you have to tag @junedchhipa, or they won't get notified.

[jackrabbit-start]

@ordago

In this case, Alternatively, you can use this method.

 plotOptions: {
      bar: {
        columnWidth: "5%",
      },
    },

using this percentage
86400000 / (maxX - minX) * 100%
1day == 86400000

[ordago]

Hi @jackrabbit-start, thanks for the input. I tried it with 5% and got better results. The issue is in my case I have more than 20 graphs with the same settings, but with different values/data.

The widths were not as wide but not uniform.

[jackrabbit-start]

@ordago

• It is possible to have a fixed chart plot size.
• If the X-axis increases, it will not produce correct values. (because we setting columnwidth with 1day)
• If the stack option is not available, the column width will be very narrow.

 plotOptions: {
      bar: {
        columnWidth: "30", // example
      },
    },

If there are any other problem about this issue, I would appreciate it if you could provide an example.

I will create a PR for this issue.

[ordago]

Hi again @jackrabbit-start
I tried setting the width to a fixed number and even then the width is not always the same.

Here is a codepen with real examples:

https://codepen.io/ordago/pen/EaxPKqd

Thanks!