I am working on a React JS project. My application needs to display data in chart format. I am using Victory Chart, https://formidable.com/open-source/victory/. 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. Please, have a look at my code below.

<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, please?

CodePudding user response：

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