How to change the font color of React Victory Tooltip

Question

I am working on a React JS project. My application needs to display some data in chart format. I am using React Victory for that. I am displaying tooltips when the user hovers the cursor on the bars. I can display the tooltip. But I cannot change the font color of the tooltip.

This is my code for tooltip.

const { x, y } = tooltipProps;
    const rotation = `rotate(0 ${x} ${y})`;
    return (
      <g transform={rotation}>
        <VictoryTooltip
          {...tooltipProps}
          cornerRadius={5}
          pointerLength={4}
          flyoutHeight={30}
          flyoutStyle={{
            stroke: "none",
            fill: props.color,
          }}
          constrainToVisibleArea={true}
          renderInPortal={true} />
      </g>
    );

I tried setting the color prop to flyoutStyle prop object. It does not work. I tried using style prop too. It does not work. It is always showing the font color in default black color. How can I change that?

Answer 1

You must use the style property for this

const { x, y } = tooltipProps;
const rotation = `rotate(0 ${x} ${y})`;
return (
  <g transform={rotation}>
    <VictoryTooltip
      {...tooltipProps}
      cornerRadius={5}
      pointerLength={4}
      flyoutHeight={30}
      flyoutStyle={{
        stroke: "none"
      }}
      style={{ fill: props.color }}
      constrainToVisibleArea={true}
      renderInPortal={true} />
  </g>
);

flyoutStyle applies styles to the container, style to the label itself