Handle grouped bars in react

[Fadi-Aldalati]

I'm using UplotReact and I'm adding the series conditionally based on what I want (line, bar, area or horizontal bar). The bar object looks like this

      {
        band: true,
        fill: chartColors[chartColorIndex],
        stroke: chartColors[chartColorIndex],
        paths: uPlot.paths.bars(),
      }

but the bars are overriding each other, they're not stacked nor grouped , any idea why?

[leeoniya]

neither stacking nor grouping is part of uPlot core. you can see that the demos here require additional logic:

https://github.com/leeoniya/uPlot/blob/master/demos/grouped-bars.js

https://github.com/leeoniya/uPlot/blob/master/demos/stack.js

[Fadi-Aldalati]

Using the additional logic in seriesBarsPlugin caused my code to have some problems in the following:

• Zooming was disabled

Do I need to customize the function in order to make it work?

[leeoniya]

Do I need to customize the function in order to make it work?

the way grouped bars are laid out on the x axis depends on x scale math. i think it will be tricky to get zooming to work here, but possible.

i don't think that zooming in these types of charts is necessary, since they never draw hundreds or thousands of bars. usually you have a few groups and a few bars per group.

[Fadi-Aldalati]

Can you please give me any tips on how to implement zooming cause I need it in my chart?

[YaminoYuki]

why this is closed .. I am facing the same problem :(

[leeoniya]

i explained why this is closed: this is an unusual requirement. also, i dont have time to rework the layout math in the demo - it's not a 10 minute task. that's the great thing about open source. if you'd like to contribute this feature to the demo, the source code is right here for you.

can you link any (preferably many) examples of other charting libraries that support and live-demo zoomable grouped bar charts?

[Fadi-Aldalati]

I found a way that doesn't need so much work nor editing the current code in the seriesBarsPlugin function, you can pass the full data as a prop to the function and in the setSelect in hooks you can slice the data and set the new one and when zooming out you can set the whole data in the init hook on double click hooks: { init: [], setSelect:[], }

[Fadi-Aldalati]

I still have a weird behavior when resetting scale the bars are not being set as expected.

@leeoniya Can you please help me to understand how the bars are being set on axis so I can customize the code as needed?