CODEWITHSUNDEEP
javascriptreactjssvgchartsvictory-charts
Saad
Saad

Reputation: 53839

Spacing and size of horizontal bars in a Victory stack?

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

enter image description here

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!

Upvotes: 2

Views: 6172

Answers (3)

achill
achill

Reputation: 86

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 complex 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={outcome} barRatio={1} alignment="start" />

Upvotes: 1

Oleg Safarov
Oleg Safarov

Reputation: 2345

  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.

Upvotes: 2

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15831

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);

Upvotes: 4

Related Questions