Back to Gallery

Multipoint Tooltip Labels

<VictoryChart
  domainPadding={{ y: 10 }}
  containerComponent={
    <VictoryVoronoiContainer
      voronoiDimension="x"
      labels={({ datum }) => `y: ${datum.y}`}
      labelComponent={
        <VictoryTooltip
          cornerRadius={0}
          flyoutStyle={{ fill: "white" }}
        />}
    />}
>
  <VictoryLine
    data={[
      { x: 1, y: 5, l: "one" },
      { x: 1.5, y: 5, l: "one point five" },
      { x: 2, y: 4, l: "two" },
      { x: 3, y: -2, l: "three" }
    ]}
    style={{
      data: {
        stroke: "tomato",
        strokeWidth: ({ active }) => active ? 4 : 2
      },
      labels: { fill: "tomato" }
    }}
  />

  <VictoryLine
    data={[
      { x: 1, y: -3, l: "red" },
      { x: 2, y: 5, l: "green" },
      { x: 3, y: 3, l: "blue" }
    ]}
    style={{
      data: {
        stroke: "blue",
        strokeWidth: ({ active }) => active ? 4 : 2
      },
      labels: { fill: "blue" }
    }}
  />

  <VictoryLine
    data={[
      { x: 1, y: 5, l: "cat" },
      { x: 2, y: -4, l: "dog" },
      { x: 3, y: -2, l: "bird" }
    ]}
    style={{
      data: {
        stroke: "black",
        strokeWidth: ({ active }) => active ? 4 : 2
      },
      labels: { fill: "black" }
    }}
  />
</VictoryChart>