MouseOver event for entire stacked bar, not each small rectangle in the StackedBarChart

I need to be able to trigger a mouse event from the entire vertical bar of a Stacked Bar Chart.

Currently, if you add onMouseEnter on on <Bar ... it triggers when you mouse over the corresponding colour on each bar (which makes sense), but isn’t what I need.

When you add a <Tooltip ... it is able to trigger when on a single bar, which is what I need, but i don’t need the Recharts tooltip. I need to be able to call a function that triggers state within my React component. I’ve played around with trying to manipulate the Tooltip to do what I want, but I can’t send down the active state (and the label which i was planning on using to differentiate between which bar was being hovered over) unless I sent it through the Tooltips’s content prop as a new component. This doesn’t work because you end up leaving the original component and therefor don’t have access to its state.

My code:

        <BarChart
          width={205}
          height={275}
          barCategoryGap="25%"
          data={graphData}
          margin={{ top: 20, right: 15, left: 0, bottom: 5 }}
        >
          <XAxis
            dataKey="name"
            tickLine={false}
            tick={<XAxisTick />}
            stroke={color.grey400}
          />
          <Bar
            dataKey="project"
            stackId="a"
            fill={color.blueMedium}
            isAnimationActive={false}
            label={<BarLabel currency={currencySymbol} />}
            onMouseEnter={this.handleShowDivA}
            onMouseLeave={this.handleHideDivA}
          />
          <Bar
            dataKey="reccuring"
            stackId="a"
            fill={color.blueDark}
            isAnimationActive={false}
            onMouseEnter={this.handleShowDivB}
            onMouseLeave={this.handleHideDivB}
          />
        </BarChart>

What currently happens when using onMouseEnter etc:

What I need to happen:

Does anyone know how to do this? Is it even possible?

[Haraldson]

The solution looks like this:

import React, { useState } from 'react'
import { BarChart, Bar, Rectangle } from 'recharts'

const BarChartContainer = ({ data, labels, colors, ...whatnot }) => {
    const [activeBarLabel, setActiveBarLabel] = useState(null)

    return (
        <BarChart data={data}>
            {labels.map((label, key, index) => (
                <Bar
                    dataKey={label}
                    stackId="x"
                    fill={colors[index]}
                    shape={props => {
                        const active = props.label === activeBarLabel

                        props = {
                            ...props,
                            width: active ? 50 : 40
                        }

                        return <Rectangle {...props} />
                    }}
                    onMouseEnter={({ label }) => setActiveBarLabel(label)}
                    onMouseLeave={() => setActiveBarLabel(null)}
                    key={label} />
            ))}
        </BarChart>
    )
}

export default BarChartContainer

[erosenberg]

Is there still no way to access a stack as a single element or component? Is there a way to get all of the data one would need from the props by each stack? That would be incredibly helpful if BarChart’s props for example contained an array of stacks with corresponding data/sums/colors/values, etc.