search

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.84k stars 656 forks source link

Style multiple line charts differently #377

Open Billmike opened 4 years ago

Billmike commented 4 years ago

Hi there! This is an awesome library. I would like to know if it's possible to style multiple line charts differently. Please find below a screenshot of what I have currently vs what I am trying to achieve. I am able to render multiple data sets using a line graph for projection. I would like to know if it is possible to style the line graphs to look different from each other? Thanks!

What I have curently

Screenshot 2020-07-20 at 11 48 27

What I am trying to achieve. Note how the line graphs have different gradients an stroke colors Screenshot 2020-07-20 at 11 48 40

aboveyunhai commented 4 years ago

please check the doc for details, you can pass your own color under each data

    {
      data: [20, 45, 28, 80, 99, 43],
      color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
      strokeWidth: 2 // optional
    }
warm--tape commented 3 years ago

@Billmike how did you get the stroke to be fully opaque?