reactjs - VictoryChart 没有填满整个 div

Question

我试图让 VictoryChart 填满整个容器，但它在右侧留下了大量空白。这就是我想要做的:

<VictoryChart domainPadding={{ x: 25 }}>
    <VictoryAxis
      tickValues={categories ? categories.x : undefined}
    />
    <VictoryAxis
      tickValues={categories ? categories.y : undefined}
      domain={yAxisDomain}
      dependentAxis
      crossAxis
    />
    <VictoryBar
      cornerRadius={{ topLeft: 5, topRight: 5 }}
      data={data}
      labels={labels}
    />
  </VictoryChart>

这是正在呈现的内容:

<div class="VictoryContainer" style="height: 100%; width: 100%; user-select: none; pointer-events: none; touch-action: none; position: relative;">
   <svg width="450" height="300" role="img" aria-labelledby="victory-container-2-title victory-container-2-desc" viewBox="0 0 450 300" style="pointer-events: all; width: 100%; height: auto;">
      ...
   </svg>
   <div style="z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: auto;">
      <svg width="450" height="300" viewBox="0 0 450 300" style="overflow: visible; width: 100%; height: auto;"></svg>
   </div>
</div>

Answer 1

通过在 VictoryChart 组件上设置填充解决了这个问题:

<VictoryChart
    domainPadding={{ x: 25 }}
    padding={{ top: 50, bottom: 50, right: 0, left: 50 }}
  >