I have a simple 3 part horizontal bar chart like so:

You can check it out on CodeSandbox or try out the code:

function App() {
  return (
    <VictoryStack colorScale={['#D0021B', '#F5A623', '#00C16F']}>
      <VictoryBar horizontal data={[{ x: 'progress', y: 50 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
    </VictoryStack>
  )
}

I am having issues with 2 parts:

1. How can I make the height of these 3 bars taller (I guess technically the width because I made it horizontal)?
2. How can I add a bit of spacing between each bar? Meaning like 2px of space between the red, orange, and green bars.

I've tried a bunch of stuff while looking at the VictoryStack docs and VictoryBar charts, but I haven't been able to get it to work. Any help would be appreciated, thanks!

I have a simple 3 part horizontal bar chart like so:

You can check it out on CodeSandbox or try out the code:

function App() {
  return (
    <VictoryStack colorScale={['#D0021B', '#F5A623', '#00C16F']}>
      <VictoryBar horizontal data={[{ x: 'progress', y: 50 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
    </VictoryStack>
  )
}

I am having issues with 2 parts:

1. How can I make the height of these 3 bars taller (I guess technically the width because I made it horizontal)?
2. How can I add a bit of spacing between each bar? Meaning like 2px of space between the red, orange, and green bars.

I've tried a bunch of stuff while looking at the VictoryStack docs and VictoryBar charts, but I haven't been able to get it to work. Any help would be appreciated, thanks!

• javascript
• reactjs
• svg
• charts
• victory-charts

3 Answers 3

Here is a working snipped solution with:

barWidth props for bar height

a style prop is added to in order to simulate margin with borders

https://codesandbox.io/s/7y2ym084o6

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

function App() {
  return (
    <VictoryStack
      style={{
        data: {
          stroke: "rgba(255,255,255,1)",
          strokeWidth: 2
        }
      }}
      colorScale={["#D0021B", "#F5A623", "#00C16F"]}
    >
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 50 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
    </VictoryStack>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1. You can use a property barWidth to set the width of bars:

   <VictoryBar
       horizontal
       barWidth={30}
       data={[{ x: 'progress', y: 50 }]}
   />
   

   Or there is one more way through its style:

   <VictoryBar 
       horizontal 
       style={ { data: { width:30 } } } 
       data={[{ x: 'progress', y: 25 }]}
   />
   

2. To make spaces between the bars, try playing with the y0 property:

   <VictoryBar
       horizontal
       data={[{ x: 'progress', y: 25, y0: 77 }]}
   />
   

To portray the whole solution here is your slightly refined Sandbox.

You can use the other solutions proposed here using the barWidth and/or style props.

However, I think hardcoding the barWidth is not a good idea for two reasons. First, the barWidth should be responsive to the display size of the device you are using to view the chart. Second, as your chart gets more plex you might have a variable number of VictoryBars.

I think there is a more elegant solution: the barRatio prop. This will dynamically set the barWidth relative to the available space between bars, as documented here.

If you want to fill the entire space and make your bars as wide as possible, a barRatio of 1 makes sense, e.g.:

 <VictoryBar data={data} key={oute} barRatio={1} alignment="start" />