0

I'm using Victory Histogram and wish to have a label underneath a Bin. That Bin would be highlighted differently from other bins because a particular value is under that range for this I have used the snippet below:

<div>
  <svg style={{ height: 0 }}>
    <defs>
      <linearGradient
        id={"myGradient"}
      >
        <stop offset="0%" stopColor="#6B0772" />
        <stop offset="25%" stopColor="#FB8CAB" />
        <stop offset="50%" stopColor="#360167" />
        <stop offset="75%" stopColor="#CF268A" />
        <stop offset="100%" stopColor="#E65C9C" />
      </linearGradient>
    </defs>
  </svg>

  <VictoryChart>
    <VictoryHistogram
      data={histogramData}
      bins={binNumber}
      standalone={false}
      style={{
        data: {
          fill: ({ datum }) =>
            datum.x === getValueFromRange(cardEvaluatedValue, datum.x, datum)
              ? "red"
              : "#B1E1FF",
          stroke: "hsl(355, 10%, 25%)",
        },
      }}
    />
    <VictoryAxis
      dependentAxis
      crossAxis
      orientation="left"
      style={{
        axis: { stroke: "white" },
        tickLabels: { fill: "white" },
      }}
    />
    <VictoryAxis
      crossAxis
      orientation="bottom"
      tickFormat={() => ""}
      style={{
        axis: { stroke: "white" },
        axisLabel: { fill: "red" },
      }}
      label="label text"
      axisLabelComponent={<VictoryLabel dx={valueLabel} />}
    />
  </VictoryChart>
</div>;

This is how it is looking like:

enter image description here

This was done but now I also want to have a arrow mark under this Bin to indicate a value is under this Bin.

For this I came across this example from which we can put custom labels https://codesandbox.io/s/basic-victory-example-z1w7c?file=/index.js

But I was wondering how to give "Dx" prop value for the Bin? Also I wish to have an Image of an Arrow like Icon to indicate the value under that Bin. How should I do this?

enter image description here

1 Answer 1

0

I had come up with the solution by passing a custom component to tickLabelComponent

<VictoryAxis
  domain={{ x: [0, 100] }}
  style={{
     axis: { stroke: "#808080" }, // For X-axis
  }}
  tickLabelComponent={<CustomTick y={250} />}
/>

and used datum object to match the condition.

const CustomTick = (datum) => {
return datum.datum === valueLabel ? ( // valueLabel is any value that would make match value in datum object
  <TriangleUpComponent
    x={datum.x - 80}
    y={datum.y}
    width={100}
    height={100}
    fontSize={40}
    fill={"#45fc30"}
  />
) : null;};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.