VictoryPortal

VictoryPortal is a wrapper component that renders a child in a top-level Portal element within VictoryContainer. This is useful in instances where elements should always be rendered above others, like tooltips and labels. If a Portal element is not found, VictoryPortal will render its child in place.

---

children

type: ReactElement

VictoryPortal takes a single children, and renders it in a top level portal element. Any additional props passed to VictoryPortal will be spread onto the child. In the following example, the labelComponent passed to the first series of bars has been wrapped in VictoryPortal. The resulting labels will be rendered in a top-level portal container, and will not be overlapped by subsequent data series, as they otherwise would have.

Live View

Loading...

Live Editor

<VictoryChart 
  domainPadding={{ x: 50 }}
  theme={VictoryTheme.clean}
>
  <VictoryGroup offset={25}>
    <VictoryBar
      labels={["apples", "bananas", "cherries"]}
      style={{
        labels: { fontSize: 20 }
      }}
      labelComponent={<VictoryPortal><VictoryLabel/></VictoryPortal>}
      data={[{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 5}]}
    />
    <VictoryBar
      data={[{x: 1, y: 2}, {x: 2, y: 1}, {x: 3, y: 7}]}
    />
    <VictoryBar
      data={[{x: 1, y: 3}, {x: 2, y: 4}, {x: 3, y: 9}]}
    />
  </VictoryGroup>
</VictoryChart>

---

groupComponent

type: ReactElement

The groupComponent prop takes a component instance which will be used to create a group element for VictoryPortal to render its child component into. This prop defaults to a <g> tag.