indiespirit / react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)
https://expo.io/@indiespirit/react-native-chart-kit
MIT License
2.86k stars 661 forks source link

BarChart gradient vertical #38

Open alanribeirodsantos opened 6 years ago

alanribeirodsantos commented 6 years ago

I'm new using this lib, there's a way to set gradient orientation to vertical? Thx

Hermanya commented 6 years ago

Thank you for your interest. There isn't an easy way to do this, you would have to modify the library.

koo27 commented 5 years ago

Basically you should fork it and change renderDefs in abstract-chart.js as follows:

renderDefs = config => {
    const { width, height, backgroundGradientFrom, backgroundGradientTo } = config
    return (
      <Defs>
        <LinearGradient id="backgroundGradient" x1={width} y1={0} x2={width} y2={height}>
          <Stop offset="0" stopColor={backgroundGradientFrom}/>
          <Stop offset="1" stopColor={backgroundGradientTo}/>
        </LinearGradient>
        <LinearGradient id="fillShadowGradient" x1={0} y1={0} x2={0} y2={height}>
          <Stop offset="0" stopColor={this.props.chartConfig.color()} stopOpacity="0.1"/>
          <Stop offset="1" stopColor={this.props.chartConfig.color()} stopOpacity="0"/>
        </LinearGradient>
      </Defs>
    )
  }

but it could be useful to have a chartConfig parameter to edit the orientation :)