victory-tooltip-basic-flyout.js

import React from "react";
import styled from "styled-components";
import { VictoryChart, VictoryBar, VictoryTooltip } from "victory";

const Container = styled("div")`
  font-family: sans-serif;
  text-align: center;
`;

const data = [
  { name: "John", score: 20 },
  { name: "Joe", score: 10 },
  { name: "Jos", score: 30 },
  { name: "Joy", score: 15 },
  { name: "Joan", score: 40 },
  { name: "Johnny", score: 50 }
];

export default function App() {
  return (
    <Container>
      <h1>VictoryTooltip</h1>
      <VictoryChart>
        <VictoryBar
          data={data}
          labels={({ datum }) => `Name: ${datum.name} score: ${datum.score}`}
          labelComponent={
            <VictoryTooltip
              flyoutWidth={95}
              flyoutHeight={35}
              cornerRadius={5}
              pointerLength={40}
              flyoutStyle={{
                stroke: "#868C97",
                strokeWidth: 2,
                fill: "#FFFFFF"
              }}
              style={{
                fill: "#868C97",
                fontSize: 10,
                fontWeight: 500,
                textAnchor: "middle"
              }}
            />
          }
          x="score"
          y="name"
        />
      </VictoryChart>
    </Container>
  );
}