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

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