CODEWITHSUNDEEP
javascripthtmlcssreactjsvictory-charts
Alex
Alex

Reputation: 272

How to add labels to javascript chart

enter image description here enter image description here 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"));

Upvotes: 0

Views: 79

Answers (1)

GiL Itzhaky
GiL Itzhaky

Reputation: 304

just throwing some ideas:

  1. Add border-bottom for each element, and a after-pseudo element (in css) with the desired content.

  2. Wrap each of the VictoryBars with a simple 'div', and do something like this:

<div style={{ width: 'fit-content', display: flex; flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
  <VictoryBar ... />
  <span style={{ width: '200px', height: '10px', backgroundColor: 'black' }}/>
  <span>low</span>
</div>

this will keep the size of the VictoryBar (make sure its longer than the span, otherwise take min), will add a black line below it (because we use flex with direction column and center it) and then will add the text you want.

there are many other ways to get this result, let me know if it helped and if not we will try another.

Upvotes: 1

Related Questions