Edit this page


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.



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.

  <VictoryGroup offset={12}>
      labels={["apples", "bananas", "cherries"]}
      data={[{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 5}]}
      data={[{x: 1, y: 2}, {x: 2, y: 1}, {x: 3, y: 7}]}
      data={[{x: 1, y: 3}, {x: 2, y: 4}, {x: 3, y: 9}]}