Render A Single Label For A Victory Group

[redixhumayun]

Questions

For discussions about features or questions about how to use Victory, please start a new discussion rather than opening an issue.

Bug Reports

Checklist

• [X] I have read through the FAQ and Guides

• [X] I am using the latest version of Victory

• [X] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I'm curious to understand if there is a way to combine the tooltips for a Victory Group into one tooltip. Right now, when rendering a tooltip as part of a Victory Group like so:

<VictoryChart domainPadding={{ x: containerWidth / 11.25, y: containerWidth / 85 }} width={containerWidth} height={450} containerComponent={
        <VictoryContainer responsive={false} />
      }>
        <VictoryLabel text={'DHU'} x={containerWidth / 27} y={25} style={{
          fontSize: '40px',
          fill: '#0F3460'
        }} textAnchor={'middle'} />
        <VictoryGroup labelComponent={<VictoryTooltip active={true} />} colorScale={'qualitative'} offset={containerWidth / 34} style={{ data: { width: containerWidth / 33.76 } }}>
          {
            chartData.map((item, index) => {
              return (
                <VictoryBar key={index} data={item} x={'batchNumber'} y={'DHU'} />
              )
            })
          }
        </VictoryGroup>
      </VictoryChart>

The result is a single tooltip per bar in each group like this:

However, I am interested to see if something like the below is possible where there is one tooltip per group of bars.