Реагировать на трудности стиля VictoryBar

Question

Поэтому я пытаюсь заставить диаграмму показывать некоторые данные сборки, используя диаграммы Победы. Однако я получаю некоторые довольно раздражающие проблемы. Документирование довольно плохое ИМО... они пытаются охватить как можно больше общих вопросов.

Скриншот находится здесь

Посмотрите на приведенный выше снимок экрана, синее поле потому, что оно выделено в инструментах разработчика Chrome.

• Области в штучной упаковке красного цвета. Я не понимаю, почему они там. Идя дальше, ничто не мешает и не использует это пространство, как мне от него избавиться?
• Как мне уменьшить размер шрифта до читабельного уровня?

Ниже я сейчас нахожусь

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