admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Dec 13, 2018 at 15:38 Saad asked Dec 11, 2018 at 17:58 SaadSaad 54.1k21 gold badges76 silver badges114 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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" />

本文标签： javascriptSpacing and size of horizontal bars in a Victory stackStack Overflow

版权声明：本文标题：javascript - Spacing and size of horizontal bars in a Victory stack? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744070254a2528353.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。