VictoryChart / VictoryLine 忽略填充设置

Question

假设我有这个图表配置：

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>

然后我可以看到这样的结果：

但是，我真的需要在折线图中添加一个小填充到 top/bottom。 domainPadding and/or padding 我都试过了。

从白线到 bottom/top 添加填充的正确方法是什么？当然，轴线需要保持完整。

Answer 1

通过调整 VictoryAxis 本身的 domain 设置来工作：

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

VictoryChart / VictoryLine 忽略填充设置

VictoryChart / VictoryLine ignores padding setting

reactjs

victory-charts