https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image above. My aim is to have bracket-shaped labels that span from the first to the second data point, with "Low" for one, "Target" for another, and "High" for the last two. The size of each box varies, so I need the labels to adjust accordingly. Is there a way to achieve this using Victory.js, Javascript, or HTML? Thanks for any help you can provide.
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"));