Hello, I made a chart using the Victory.js framework (image 1) and I am trying to add the labels as pictured above (image 2). I apologize for the sloppy lines, but for the labels I want a bracket-shaped label that goes from the first to the second one and says "Low", and similar for the green one that says "Target" and finally one for the last two that says "High". In addition, the size of each box is not static, so I want the labels to be able to change to fit around the box(es) that they cover. Is there a way I can either do this in Victory.js, Javascript, or HTML? Thank you in advance.

import React from "react";
import { render } from "react-dom";
import { VictoryStack, VictoryBar } from "victory";

const Chart = () => {
  return (
    <VictoryStack
      horizontal
      style={{
        data: { stroke: "white", strokeWidth: 2, width: 30 }
      }}
      colorScale={["#ab3025", "#d59792", "#44c973", "#f9c63d", "#f5a000"]}
    >
      <VictoryBar
        data={[{ x: "c", y: 0.5 }]}
        cornerRadius={{
          bottomLeft: 2,
          bottomRight: 2,
          topLeft: 2,
          topRight: 2
        }}
      />
      <VictoryBar
        data={[{ x: "c", y: 1.0 }]}
        cornerRadius={{
          bottomLeft: 2,
          bottomRight: 2,
          topLeft: 2,
          topRight: 2
        }}
      />
      <VictoryBar
        data={[{ x: "c", y: 5.2 }]}
        cornerRadius={{
          bottomLeft: 2,
          bottomRight: 2,
          topLeft: 2,
          topRight: 2
        }}
      />
      <VictoryBar
        data={[{ x: "c", y: 2.2 }]}
        cornerRadius={{
          bottomLeft: 2,
          bottomRight: 2,
          topLeft: 2,
          topRight: 2
        }}
      />
      <VictoryBar
        data={[{ x: "c", y: 1 }]}
        cornerRadius={{
          bottomLeft: 2,
          bottomRight: 2,
          topLeft: 2,
          topRight: 2
        }}
      />
    </VictoryStack>
  );
};

render(<Chart />, document.getElementById("root"));