CODEWITHSUNDEEP
react-nativevictory-charts
Robin
Robin

Reputation: 5427

How to remove vertical dotted line in Victory Charts

I'm using Victory Chart in React Native. Everything works fine but can't remove/hide the vertical dotted line as you see in the given picture. How can I remove this y-axis vertical dotted line? Here is my code

<VictoryChart
  theme={VictoryTheme.material}
  animate={{
    duration: 2000,
    onLoad: { duration: 1000 },
  }}
>
  <VictoryPie
    colorScale={['#008FFB', '#82C9FF']}
    data={graphData}
    innerRadius={60}
    labels={[]}
  />

  {/*--- some code for Victory Label ---*/}

  <VictoryAxis
    style={{
      axis: { stroke: 'none' },
      ticks: { stroke: 'none' },
      tickLabels: { fill: 'none' },
    }}
    standalone={false}
  />
</VictoryChart>

victory pie chart example

Upvotes: 2

Views: 2748

Answers (1)

Robin
Robin

Reputation: 5427

Just found the answer from the doc, so I'm writing here. Hope anyone will be helped.

Add the grid property in the VictoryAxis's style and set the stroke transparent.

<VictoryAxis
  style={{
    axis: { stroke: 'none' },
    ticks: { stroke: 'none' },
    tickLabels: { fill: 'none' },
    grid: { stroke: 'transparent' }
  }}
  standalone={false}
/>

Official Documentation

Upvotes: 3

Related Questions