'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 }) }];
        },
      },
    },
  ]}
/>

[nateguy]

@carbonrobot Unfortunately this example doesn't solve the problem for me. Any reason why the active property was working in an earlier release but no longer working now?

[carbonrobot]

I went back and tried all versions back to 36.6.0 and was unable to reproduce the expected behavior. Here is a codesandbox pinned to 36.9.2 if someone wants to try to reproduce the problem.

https://codesandbox.io/p/sandbox/strange-hooks-sj3m22

[nateguy]

@carbonrobot I have downgraded to 36.9.2 and the active events are all working as expected without needing to add a custom events function. Let me describe all the events using active that were working previously

In Image 1, expected behavior is when a custom SVG point (ActiveScatterPoint) is made visible on a VictoryScatter chart when the user finger swipes over the chart. Code is as follows:

const ActiveScatterPoint = useCallback((props) => {
  const {x, y, active, datum} = props;
  if (datum.y > 0 && active) {
    return (
      <G x={x - 8} y={y - 8}>
        <TransactionDotIcon height={16} width={16} />
      </G>
    );
  }, []);

<VictoryScatter
  key={'transactionPriceScatterActive'}
  name={'transactionPriceScatterActive'}
  data={consolidatedTransactionPriceData}
  dataComponent={<ActiveScatterPoint />}
/>

Image 2 is the issue I described above in which the expected behavior is where the corresponding bar gets highlighted when user swipes over that bar and it becomes 'active' .

[carbonrobot]

Thanks, that's more information that is helpful. The tooltip elements add events to the base container.