reactjs - VictoryChart / VictoryLine ignores padding setting

Question

Given I have this chart configuration:

const data = [
  { x: 1, y: 13000 },
  { x: 2, y: 16500 },
  { x: 3, y: 14250 },
  { x: 4, y: 19000 },
  { x: 5, y: 19302 }
];


  <VictoryChart padding={0} height={200} style={{ display: "block" }}>

    <VictoryAxis
      style={{
        axis: { display: "none" },
        grid: {
          stroke: lineColor,
          display: x => {
            return x == 1 || x == data.length ? "none" : "";
          }
        },
        ticks: { display: "none" },
        tickLabels: { display: "none" }
      }}
    />

    <VictoryLine
      interpolation="monotoneX"
      data={data}
      style={{
        data: { stroke: "#fff", opacity: 1.0, strokeWidth: "5px" },
        labels: { fontSize: 12 },
        parent: { border: "1px solid #ccc" }
      }}
    />
    <VictoryLabel
      x={30}
      y={30}
      style={{
        stroke: "#fff",
        fill: "#fff",
        fontSize: "25px",
        fontFamily: "Roboto",
        fontWeight: "bold"
      }}
      text={number}
    />
  </VictoryChart>

Then I can see a result like this:

However, I really need to add a small padding from line chart to top/bottom. I tried both domainPadding and/or padding itself.

What is the correct way to add padding from the white line to the bottom/top? The axis lines need to stay intact, of course.

Answer 1

Works by adjusting the domain setting on the VictoryAxis itself:

domain={{ x: [0.8, 5.2], y: [10000, 20000] }}