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;