在我的胜利条形图中，条形图穿过我的轴

Question

我在 React Native 中使用 Victory 图表制作一些条形图。我已经让它尽可能好地工作了，但我遇到了一个问题，那是因为第一个栏穿过 y 轴标签。

示例：

我已经用 domainPadding 尝试了一些东西，但它也影响了 Y 轴。有人知道如何让条形图向右移动吗？

示例代码：

<VictoryChart padding={{top: 50, bottom: 0, left: 35, right: 125}} height={200}>
  <VictoryBar
    animate={{
      duration: 2000,
      onLoad: {duration: 1000},
    }}
    data={this.renderData()}
    barRatio={1}
    labels={['<30', '30-60', '60-90', '>90']}
    style={{
      parent: {border: '2px solid black'},
      data: {fill: '#000', fillOpacity: 0.1},
      labels: {fill: 'white'},
    }}
    labelComponent={<VictoryLabel y={200} />}
  />
  <VictoryAxis
    dependentAxis
    style={{
      axis: {stroke: 'transparent'},
      ticks: {stroke: 'transparent'},
      tickLabels: {fill: '#FFF'},
    }}
  />
  <VictoryAxis
    crossAxis
    style={{
      axis: {stroke: 'transparent'},
      ticks: {stroke: 'transparent'},
      tickLabels: {fill: 'transparent'},
    }}
  />
</VictoryChart>

Answer 1

您可以在 VictoryAxis 上设置 offsetX 道具。

例如：

// ...
<VictoryAxis
  dependentAxis
  offsetX={70}
  style={{
    axis: {stroke: 'transparent'},
    ticks: {stroke: 'transparent'},
    tickLabels: {fill: 'black'},
  }}
/>
// ...

来源：https://formidable.com/open-source/victory/docs/victory-axis#offsetx.

您可能需要尝试使用 offsetX 的值，因为我无法完全复制您的布局，因为您没有共享图表周围的容器。

在我的胜利条形图中，条形图穿过我的轴

Bars are going through my axis in my Victory Bar chart

javascript

reactjs

react-native

victory-charts