javascript - React VictoryBar style difficulties

Question

So I'm trying to make a chart show some build data using Victory charts. However I'm getting some pretty annoying issues. The documentaion is pretty bad IMO... they're trying to cover to much ground as generically as possible.

Screenshot located here

Look at the above screenshot, the blue box is because I've got it highlighted in Chrome's dev tools.

• The areas in boxed red. I can't see why they're there. Going further down, nothing is padding it out or using that space, how do I get rid of it?
• How do I get the font size down to a readable level?

The below is where I'm at right now

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

I've tried editing the material theme directly to adjust the font size, to no avail. I've also tried creating my own theme but I can't get my head around that...

Answer 1

My final result as below. Could do with more work at some point but this is doing for now. Text is more sanely sized and the padding has been sorted

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