javascripthtmlchartsvictory-chartsvictory-native

Rounding edges on chart from Victory.js

Not sure if anyone on here is familiar with the Victory.js framework, but I am trying to create a stacked bar with rounded edges. I have everything but the rounded edges and I can't seem to figure them out. Here is my code:

import React from "react";
import { render } from "react-dom";
import { VictoryStack, VictoryBar } from "victory";

const Chart = () => {
  return (
    <VictoryStack
      horizontal
      style={{
        data: { stroke: "white", strokeWidth: 3, width: 30 }
      }}
      colorScale={["#9e62c0", "#bc95d4", "#44c973", "#f9c63d", "#f5a000"]}
    >
      <VictoryBar data={[{ x: "c", y: 0.5 }]} />
      <VictoryBar data={[{ x: "c", y: 1 }]} />
      <VictoryBar data={[{ x: "c", y: 5.2 }]} />
      <VictoryBar data={[{ x: "c", y: 2.3 }]} />
      <VictoryBar data={[{ x: "c", y: 1 }]} />
    </VictoryStack>
  );
};

render(<Chart />, document.getElementById("root"));
Solution

  • I figured out how to do it. I added the following for each corner of each individual bar:

    cornerRadius={{bottomLeft:(4), bottomRight:(4), topLeft:(4), topRight:(4)}}