reactjsformidablevictory-charts

Victory Histogram: Need a Arrow Mark under a Bin in Histogram

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

Solution

  • 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;};