'active' variable in style for VictoryBar no longer works as expected

[nateguy]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37.0.2

Code Sandbox link

No response

Bug report

<VictoryBar
   key={1}
   barRatio={1}
   style={{
      data: {
         fill: ({active}) =>
            active ? '#3A7DC0' : '#CCD2D9',
         },
      }}
   data={chartData.transactionCountData}
   y={(datum) => datum.y}
/>

Steps to reproduce

1. Open screen with VictoryBar chart
2. Click on one of the bars

Expected behavior

The selected bar color should change to #3A7DC0

Actual behavior

The selected bar no longer changes color

Environment

- Device:
- OS:
- Node:
- npm:

[vinitsood]

I noticed it too. This worked in 36.9.2

[carbonrobot]

The active property is only available when a component is wrapped in a selection container like VictorySelectionContainer, VictoryBrushContainer, etc. Components by default do not have events attached to them, so for a simple Bar chart you would do something like this.

Here is an example codesandbox of using events to target data elements. Relevant code pasted below.

<VictoryBar
  style={{
    data: {
      fill: (props) => (props.active ? "#3A7DC0" : "#CCD2D9"),
    },
  }}
  events={[
    {
      target: "data",
      eventHandlers: {
        onMouseOver: () => {
          return [{ target: "data", mutation: () => ({ active: true }) }];
        },
        onMouseOut: () => {
          return [{ target: "data", mutation: () => ({ active: false }) }];
        },
      },
    },
  ]}
/>