Hola, hice un gráfico usando el marco Victory.js (imagen 1) y estoy tratando de agregar las etiquetas como se muestra arriba (imagen 2). Pido disculpas por las líneas descuidadas, pero para las etiquetas quiero una etiqueta en forma de corchete que vaya de la primera a la segunda y diga "Bajo", y similar para la verde que dice "Objetivo" y finalmente uno para el último dos que dice "Alto". Además, el tamaño de cada caja no es estático, por lo que quiero que las etiquetas puedan cambiar para que quepan alrededor de las cajas que cubren. ¿Hay alguna manera de que pueda hacer esto en Victory.js, Javascript o HTML? Gracias de antemano.

 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"));