Why is there an empty space on the right? (Victory-Native)

567 Views Asked by At

Why is there an empty space on the right?

How can I get rid of this empty space on the right?

Can someone help me?

Here is my code

<VictoryChart domainPadding={10} width={width}>
  <Defs>
    <LinearGradient id="gradientStroke" x1="0%" y1="0%" x2="0%" y2="100%">
      <Stop offset="0%" stopColor="#ff0974" />
      <Stop offset="100%" stopColor="#ff5d00" />
    </LinearGradient>
  </Defs>
  <VictoryAxis
    tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
    tickFormat={(x) => `${x}월`}
    style={{
      ticks: { stroke: "none" },
      grid: { stroke: "transparent" },
    }}
  />
  <VictoryAxis
    dependentAxis
    tickValues={[0, 10000, 20000, 30000, 40000]}
    tickFormat={(x: number) => `${x.toLocaleString()}`}
    style={{
      axis: { stroke: "none" },
      ticks: { stroke: "none" },
      grid: { stroke: "#ddd" },
    }}
  />
  <VictoryBar
    data={sampleData}
    x="month"
    y="amount"
    barWidth={5}
    cornerRadius={{ top: 2.5, bottom: 2.5 }}
    style={{ data: { fill: "url(#gradientStroke)" } }}
  />

resultImage

1

There are 1 best solutions below

0
On

Play around with the padding prop.

The padding prop specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components

https://formidable.com/open-source/victory/docs/common-props#padding