How to customize VictoryTooltip

Question

I've implemented a pie graph using VictoryCharts and I added tooltips...

<VictoryPie
    labelComponent={<VictoryTooltip cornerRadius={0} />}
    colorScale={["tomato", "orange", "gold", "cyan", "navy" ]}
    padAngle={0.5}
    innerRadius={100}
    width={400} height={400}
    style={{ 
      labels: { fontSize: 15, fill: "black"},
      data: {
        fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3
      }
    }}
    labelRadius={90}
    data = {data_distribution}
/>

The tooltips look as follows...

I want to remove the arrow and make the tooltip a regular rectangle and change the background color. Essentially I want to customize it but this has proved to be harder than I expected.

I tried creating a custom component...

class CustomFlyout extends Component {
  render() {
    const {x, y} = this.props;

    return (
      <div style={{"background": "red"}}>
        <p>x</p>
      </div>
    );
  }
}

I added to the VictoryTooltip...

<VictoryTooltip
    cornerRadius={0}
    flyoutComponent={<CustomFlyout/>}
 />

However, this does nothing. I cannot figure out how to make a customized tooltip.

Fragmentary

Answer 1

You can customize VictoryTooltip and set the style you need like this ..

<VictoryTooltip
    cornerRadius={0}
    pointerLength={0}
    flyoutStyle={{
        stroke: "none",
        fill: "blue"
    }}
/>

See this example

Centrist

fixed it @IanSmith – Centrist