'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.

[nateguy]

@carbonrobot Is this issue still being worked on?

[carbonrobot]

@nateguy We don't have anyone actively working on this one yet, but we welcome any contributions from the community.

[acharyakavita]

@nateguy I couldn't recreate the issue even after cloning older versions of Victory repos. Using active prop works only when tooltip is used or if we use containerComponent like VictorySelectionContainer or VictoryVoronoiContainer etc.

First example in https://commerce.nearform.com/open-source/victory/docs/victory-selection-container is one of the scenario where active prop works.

Could you please provide a sandbox using Victory v36.9.2 where it is working fine ?