Victory: How do I specify a bar for an external mutation?

[jqueryisamonad]

Checklist

• [x] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [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

How do I specify a bar for an external mutation? When I use an external mutation with data target, mutation is applied to all bars. I want to highlight a bar in the bar chart when I hover over some external element (legend element). Is it possible?

Reproduction

https://codesandbox.io/s/nostalgic-shannon-f304p

[boygirl]

@jqueryisamonad try something like this for your onMouseEnter

onMouseEnter={() =>
  setMutations([
    // first remove all the style mutations, to clear any previous mutations
    {
      target: "data",
      eventKey: "all",
      mutation: () => ({ style: undefined }),
      callback: () => setMutations(null)
    },
    // then apply the green style. Mutations are applied in array order
    {
      target: "data",
      // set the eventKey to match the index of the bar you want to trigger
      eventKey: `${d.x - 1}`,
      mutation: () => ({ style: { fill: "green" } }),
      callback: () => setMutations(null)
    }
  ])
}