Error indicators in grouped bar charts

[SGEMKE]

Hi,

i am currently trying to implement an error indicator like this:

in an xy chart grouped bar chart like this:

I couldn't find any example of error indicators in visx, so i tried some of my own ideas. I tried using a glyph but the only thing i managed to get is a glyph that is fixed to the bar group not the underlying series.

Second issue i am facing is how to draw the Glyph itself. I currently use the Datacontext to get the Scale and then call it in the renderGlpyh function like this:

const BuildMinMaxIndicator = () => {

const { xScale,yScale } = useContext(DataContext);

return <React.Fragment>
  <AnimatedGlyphSeries
    dataKey={specAirfds!.mode + "Min"}
    data={getShownData(specAirfds!.minValuePairs, specAirfds!.show)}
    xAccessor={accessors.xAccessor}
    yAccessor={accessors.yAccessor}
    renderGlyph={
      ({ datum }: GlyphProps<ValuePair>) => {
        if (datum.vf_bc_perc > 0.01) {
          return (
            <CustomGlyph>
              <rect x={'-4.5%'} width={'9%'} height={yScale!(datum.vf_bc_perc) as number} opacity={0.5}></rect>
            </CustomGlyph>
          );

However this leads to some kind of loop during rendering and gives a warning that the maximum update depth was exceeded.

Is this maybe out of the scope of XYchart and i should try to rebuild it using basic components? If someone could point me in the right direction i would appreciate it.

[SGEMKE]

In case anyone else faces a similar problem: I did get it working, however it required rebuilding the entire chart using the low level bar grouping components.

In general grouped bar charts are a bit tricky. In xychart the single bars become inaccessible once they are grouped. If there is a way to get their dimensions and positions i did not find it. The low level grouped bar component seems locked to the data structure given in examples.