CODEWITHSUNDEEP
react-nativecharts
Weronika
Weronika

Reputation: 11

React-native area chart

Is it possible to achieve something like this in react-native using any of the existing charts libraries?

enter image description here

I've tried looking at the documentatios for react-native-gifted-charts, react-native-chart-kit and react-native-echarts but with no luck. Echarts seems to be the most customizable but I still couldn't get that result

Upvotes: 0

Views: 237

Answers (1)

Abhinandan Kushwaha
Abhinandan Kushwaha

Reputation: 754

This can be easily achieved with the react-native-gifted-charts library. To render the above chart, you can follow these steps-

  1. Render the <LineChart> component and add the areaChart prop to make it an area chart. You can make it curved (instead of straight lines) using the curved prop.
  2. Pass the data for the two lines using data and data2 props.
  3. Add the color to the lines using color and color2 props. Fill the areas in red and green using startFillColor and startFillColor2 props.
  4. Finally add the prop intersectionAreaConfig to color the intersection between the 2 charts in such a color that matches the background color of the chart, making the intersection area invisible.

Here's an example-

Demo

The code for the above chart is-

<LineChart
  areaChart
  curved
  data={data}
  data2={data2}
  color="red"
  color2="green"
  startFillColor="orange"
  startFillColor2="cyan"
  intersectionAreaConfig={{fillColor: '#fafafa'}}
  hideDataPoints
  spacing={30}
/>

Upvotes: 0

Related Questions