search

TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
256 stars 158 forks source link

Line chart is not correct size when using the chart component in a loop #29

Closed maltz closed 7 years ago

maltz commented 7 years ago

Code

const items = [  
  {id: 1,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
  {id: 2,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
  {id: 3,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
]  

const ChartCard = ( {data} ) => {
  var Highcharts = 'Highcharts'
  const conf = {...} //Quoted from readme sample. but changed line color and point color 
  return <ChartView style={{height:80}} config={conf}></ChartView>
}

<View>
  {
    items.map(item => <ChartCard key={item.id} data={item.chartData} />)
  }
</View>

Result

2017-05-23 1 42 07 Line chart is not correct size when using the chart component in a loop. First chart size is too big. (or Is it only the first graph correct?) Can I use this chart component correctly in a loop? Please give me addvice.

salujaharkirat commented 7 years ago

@maltz did u find a solution to this?

drc37 commented 6 years ago

I'm having the same problem.