CODEWITHSUNDEEP
reactjsvictory-charts
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

How to change the font color of React Victory Tooltip

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?

Upvotes: 1

Views: 1391

Answers (2)

Andrey
Andrey

Reputation: 1066

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

Upvotes: 2

MMH
MMH

Reputation: 886

Defining labels: {fill: "red"} at the <VictoryBar> would change the font color of the tooltip.

see below sample:

<VictoryBar
labelComponent={<VictoryTooltip/>}
data={[
  {x: 2, y: 5, label: "right-side-up"},
  {x: 4, y: -6, label: "upside-down"},
  {x: 6, y: 4, label: "tiny"},
  {x: 8, y: -5, label: "or a little \n BIGGER"},
  {x: 10, y: 7, label: "automatically"}
]}
style={{
  data: {fill: "tomato", width: 20},
  labels: {fill: "red"}
}}  />

Upvotes: 0

Related Questions