CODEWITHSUNDEEP
react-nativevictory-charts
student96
student96

Reputation: 345

Remove Axis from VictoryChart

I'm using victory-native and have a VictoryChart with a VictoryLine and VictoryArea as children and want to remove the axis of the chart. Is there any way to access it through props? Probably the color can be set to transparent then.

Here is some code: 

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
</VictoryChart>

Upvotes: 15

Views: 14432

Answers (3)

Faisal Mulya
Faisal Mulya

Reputation: 711

Add VictoryAxis with transparent stroke and fill:

<VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
}} />

Then the result becomes:

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
  }} />
</VictoryChart>

Upvotes: 19

timbo
timbo

Reputation: 14334

VictoryChart uses default axes. If you want to plot data without using any axes, use VictoryGroup instead.

See the FAQ

Upvotes: 10

QuảngPB
QuảngPB

Reputation: 141

Maybe you can try to add VictoryAxis with axis stroke none to after your chart

<VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ axis: {stroke: "none"} }} />
</VictoryChart>

Upvotes: 10

Related Questions