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
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.
Code
Result