I am using HighCharts 9.2.2 and Highcharts-react-official 3.0.0
I am trying to render multiple Highstock charts on the same page. For that I created a component that uses Highcharts. Code for that component looks like below:
Code: Select all
import React from 'react'
import HighchartsReact from 'highcharts-react-official'
import Highcharts from 'highcharts/highstock'
export default function CompareCardChart({data}) {
console.log(data.length)
const chartOptions = {
xAxis: {
},
yAxis: {},
series: {data: data}
}
return (
<React.Fragment>
<HighchartsReact options={chartOptions} highcharts={Highcharts} constructorType={'stockChart'} oneToOne={true} />
</React.Fragment>
)
}
Code: Select all
let resultCards
if (resultsData.length) {
resultCards = resultsData.map(el => {
return (
<div className="compare__card" key={el.key}>
<h5>{el.instrument}</h5>
<div className="compare__chart">
<CompareCardChart data={el.chartData} />
</div>
<p>{defaultType}</p>
</div>
)
})
} else {
resultCards = (<p>Nothing here</p>)
}
I am not sure what is causing this problem. I have even tried setting static data set in chartOptions but the problem persists.
Thank you very much for your help!
Best regards,
Mikhail