I am using JavaScript along victory js or victory chart Lib. for this chart. Accepting only one label of victoryline in VictoryVoronoiContainer. below code rendering two labels in VictoryVoronoiContainer when mousepointer hover to scatter. but how can i take only one label that victoryLine lable in VictoryVoronoiContainer. whenever mouse hover on scatter.

Used victory JS .

import React from "react";
import {
  VictoryChart,
  VictoryLine,
  VictoryAxis,
  VictoryGroup,
  VictoryLabel,
  VictoryScatter,
  VictoryTooltip,
  VictoryVoronoiContainer,
} from "victory";
import * as finalData from "../Data";

function LineChart() {
  const colorData = Object.values(finalData.pieChartColor);
  console.log(colorData);
  const data = Object.entries(finalData.dataStore.dataStore).map(
    ([key, value], index) => {
      return {
        name: key,
        color: colorData[index],
        stage: key,
        data: value.map((item) => {
          return { x: item.Date, y: item.Count, stage: key };
        }),
      };
    }
  );

  return (
    <div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        {data.map((line) => {
          return (
            <div
              key={line.name}
              style={{ display: "flex", alignItems: "center", margin: "10px" }}
            >
              <div
                style={{
                  height: "20px",
                  width: "20px",
                  backgroundColor: line.color,
                  marginRight: "10px",
                }}
              ></div>
              <VictoryLabel text={line.name} style={{ fontSize: 25 }} />
            </div>
          );
        })}
      </div>
      <VictoryChart
        height={300}
        width={350}
        containerComponent={
          <VictoryVoronoiContainer
            labels={({ datum }) => `${datum.stage} : ${datum.y}`}
            labelComponent={
              <VictoryTooltip
                style={{
                  fontSize: 9,
                  fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
                }}
                flyoutStyle={{
                  stroke: "none",
                  fill: "#f0f0f0",
                }}
              />
            }
          />
        }
        style={{
          parent: {
            height: "100%",
            width: "70%",
          },
        }}
      >
        {data.map((line) => {
          return (
            <VictoryGroup data={line.data}>
              <VictoryLine
                key={line.name}
                style={{
                  data: { stroke: line.color, strokeWidth: 1 },
                }}
              ></VictoryLine>
              <VictoryScatter
                size={2}
                symbol="circle"
                style={{
                  data: { fill: line.color },
                }}
              />
            </VictoryGroup>
          );
        })}
        <VictoryAxis
          style={{
            tickLabels: {
              fontSize: 10,
              fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
              angle: -45,
              transform: "translate(-15,7)",
            },
          }}
          tickFormat={(x) => x.slice(0, 3) + " " + x.slice(4)}
        />
        <VictoryAxis
          style={{
            tickLabels: {
              fontSize: 10,
              fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
            },
          }}
          dependentAxis
        />
      </VictoryChart>
    </div>
  );
}

export default LineChart;
0

There are 0 best solutions below