Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 262
student96 Avatar asked Nov 14 '17 10:11

student96


Video Answer


3 Answers

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>
like image 101
Faisal Mulya Avatar answered Sep 21 '22 18:09

Faisal Mulya


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>
like image 22
QuảngPB Avatar answered Sep 20 '22 18:09

QuảngPB


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

See the FAQ

like image 37
timbo Avatar answered Sep 20 '22 18:09

timbo