React VictoryBar 样式困难

Question

所以我正在尝试使用 Victory 图表制作一个图表来显示一些构建数据。但是我遇到了一些非常烦人的问题。 IMO 的文档非常糟糕......他们正试图尽可能笼统地涵盖更多领域。

看上面的截图，蓝框是因为我在Chrome的开发工具中高亮了它。

红色框内的区域。我不明白他们为什么在那里。再往下看，没有什么是填充它或使用它 space，我该如何摆脱它？
如何将字体大小缩小到可读的水平？

下面是我现在所在的位置

    <VictoryChart
      theme={VictoryTheme.material}
      height={200}
      domainPadding={{ x: 20 }}
    >
      <VictoryBar
        barWidth={30}
        style={{
          data: { fill: f => f.fill }
        }}
        height={10}
        data={this.state.dataParsed}
      />
    </VictoryChart>

我试过直接编辑素材主题来调整字体大小，没有用。我也尝试过创建自己的主题，但我无法理解它...

Answer 1

我的最终结果如下。可以在某个时候做更多的工作，但这是目前正在做的。文本大小更合理，填充已排序

        <VictoryChart
          padding={{ top: 20, bottom: 30, left: 40, right: 20 }}
          theme={VictoryTheme.material}
          height={120}
          domainPadding={{ x: 20 }}
        >
          <VictoryAxis
            style={{
              tickLabels: {
                fontSize: 7
              }
            }}
          />
          <VictoryAxis
            dependentAxis
            orientation="left"
            style={{ tickLabels: { fontSize: 10 } }}
          />
          <VictoryBar
            barWidth={30}
            style={{
              data: { fill: f => f.fill }
            }}
            data={this.state.dataParsed}
          />
        </VictoryChart>

React VictoryBar 样式困难

React VictoryBar style difficulties

javascript

node.js

reactjs

victory-charts