如何自定义VictoryTooltip

Question

我已经使用VictoryCharts实现了饼图，并添加了工具提示...

<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}
/>

工具提示如下...

我想删除箭头并使工具提示成为常规矩形并更改背景颜色。本质上，我想对其进行自定义，但是事实证明，这比我预期的要困难。

我尝试创建自定义组件...

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

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

我已添加到VictoryTooltip ...

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

但是，这什么也没做。我不知道如何制作自定义的工具提示。

Answer 1

您可以自定义VictoryTooltip并设置所需的样式。.

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

请参见this example