Victory-native: Preselect slice on a VictoryPie

[whoisjordangarcia]

I need the VictoryPie component to have a pre-selected data point (slice) on screen load.

Is there a way to have the props.events have an onLoad event?

[boygirl]

@arickho
It isn't currently possible to have one slice of the pie with a larger radius like that, out of the box. You could alter the dataComponent to have a scale transform, though.

As for activating a tooltip, the active prop on VictoryTooltip takes a function so you could do something like labelComponent={<VictoryTooltip active={(datum) => datum.x === "Deprecation" }/>

You would also want to add an event to your parent element that removes that, or it wont go away.

something like

events={[{
  target: parent,
  eventHandlers: {
    onMouseOver: () => {
      return [{
         target: "labels",
         eventKey: "all",
         mutation: () => ({ active: false })
      }]
    }
}

[thm-design]

@boygirl any chance you could add an example on how to accomplish this: You could alter the dataComponent to have a scale transform. ?

Edit: reading about it here: https://formidable.com/open-source/victory/docs/common-props/#datacomponent

[boygirl]

@thm-design fun timing! I'm actually currently working on an improvement that will make it much easier to get the popped out slice effect I think you're after (one slice of the pie with a larger radius than the others). I expect this work to land tomorrow or Monday :)

[thm-design]

Wow awesome! thanks for your reply will be watching for that to drop then!

[bear-junior]

@boygirl is it ready? How can we use it? :)

[boygirl]

@thm-design @bear-junior sorry the docs are lagging. As of version 31.0.0 you can define radius as a function like radius={(datum, active) => active ? 150 : 100}. You can read more about the changes in the changelog

We have some other docs changes in the works, so those are a bit delayed, but let me know if there's any confusion and I will try to help clear it up with examples

[thm-design]

@boygirl oh snap awesome, I'm on 30.2.0. Updating and trying this now! Cheers for the update.

[thm-design]

@boygirl just realized this is for the victory-native repo, is this behavior available in the victory library for web? I updated to 31.0.0 and tried the following, active is always undefined.

            <VictoryPie
              name="pie"
              radius={(datum, active) => {
                 return active ? 150 : 100;
              }}
               ...

            <VictoryPie
              name="pie"
              dataComponent={
                <Slice
                  radius={(datum, active) => {
                    return active ? 150 : 100;
                  }}
                />
              }
              ...

[thm-design]

Nevermind, sorry for the noise: this explains it for me:mhttps://github.com/FormidableLabs/victory/issues/1136

Thanks for your work @boygirl