React Victory Chart: VictoryTooltip is not working - reactjs

Question

I am working on a React JS project. My application needs to display data in chart format. I am using Victory Chart. I can display the chart.
What I am trying to do now is that when the user hovers the mouse cursor on a bar of the bar chart, it should display a tooltip using VictoryTooltip component. But it is not working.
Here is my code:
<VictoryChart
responsive={true}
width={byMonthChartWidth}
height={byMonthChartHeight}
padding={byMonthChartPadding}
domainPadding={byMonthChartDomainPadding}
>
<VictoryAxis
style={{
axis: {
stroke: "transparent"
},
tickLabels: {
fill: props.color,
fontSize: 8,
fontWeight: "bold"
}
}}
fixLabelOverlap={true}
tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
tickFormat={['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']}
preserveAspectRatio={"none"}
/>
<VictoryAxis
style={{
axis: {
stroke: "transparent"
},
tickLabels: {
fill: props.color,
fontSize: 8,
fontFamily: "roboto",
fontWeight: "bold"
}
}}
fixLabelOverlap={true}
dependentAxis
tickValues={yAxisTicks}
tickFormat={(x) => (`${x}`)}
preserveAspectRatio={"none"}
/>
<VictoryBar
labelComponent={
<VictoryTooltip
center={{ x: 225, y: 30 }}
pointerOrientation="bottom"
flyoutWidth={150}
flyoutHeight={50}
pointerWidth={150}
cornerRadius={0}
/>
}
animate={byMonthChartBarAnimation}
barWidth={byMonthChartBarWidth}
cornerRadius={{
topLeft: (data) => 5,
topRight: (data) => 5,
bottomLeft: (data) => 5,
bottomRight: (data) => 5
}}
style={{
data: {
fill: props.color,
stroke: props.color,
fontFamily: "roboto",
fillOpacity: 1,
strokeWidth: 1
}
}}
data={data}
x="identifier"
y="value"
/>
</VictoryChart>
As you can see I am trying to display a tooltip using labelComponent prop of VictoryBar component. When I hover the mouse cursor over the bar, it is not showing any tooltips. What is wrong with my code and how can I fix it?

Answer 1

The data variable used inside your data={data} must carry a label property which contains tooltip's contents.
You can modify tooltip's font color by adding labels object into <VictoryBar>'s style property - example below
LIVE DEMO
Example:
<VictoryBar
barRatio={1}
cornerRadius={0}
style={{ data: { fill: "#6DB65B" }, labels: { fill: "red" } }}
alignment="middle"
labels={(d) => d.y}
labelComponent={
<VictoryTooltip
center={{ x: 225, y: 30 }}
pointerOrientation="bottom"
flyoutWidth={150}
flyoutHeight={50}
pointerWidth={150}
cornerRadius={0}
flyoutStyle={{
stroke: "blue", // border-color
fill: "yellow", // background-color
}}
/>
}
data={[
{ x: "Year 1", y: 150000, label: "My label 1" },
{ x: "Year 2", y: 250000, label: "My label 1" },
{ x: "Year 3", y: 500020, label: "My label 1" },
{ x: "Year 4", y: 750000, label: "My label 1" },
{ x: "Year 5", y: 1000000, label: "My label 1" }
]}
/>