I manage to use HighchartsReact to plot some values from a grid to the Market Depth chart. The problem is that the array that has the values for the bids and asks updates continuously and currently I don't reflect this in my chart unless I refresh the page.
My code looks like this:
class MarketDepth extends React.Component<Props, State> {
...
chart = null;
state = {
selectedBid: null,
selectedAsk: null,
};
chartOptions = {
chart: {
type: 'area',
zoomType: 'xy',
},
title: {
text: 'Market Depth Chart',
style: {
color: '#FFFFFF',
fontSize: '20px',
lineHeight: '120%',
fontWeight: '600',
},
},
xAxis: {
minPadding: 0,
maxPadding: 0,
crosshair: true,
lineWidth: 0,
gridLineWidth: 0,
tickLength: 4,
plotLines: [
{
color: '#FFFFFF',
width: 1,
value: this.getAverageLine(), // set the actual price line value
label: {
text: 'Actual price',
rotation: 90,
align: 'right',
style: {
fonstStyle: 'italic',
},
},
},
],
title: {
text: 'Price',
},
},
yAxis: [
{
crosshair: true,
lineWidth: 0,
gridLineWidth: 0,
title: {
text: 'Acc',
},
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'left',
x: 8,
},
},
{
opposite: true,
linkedTo: 0,
lineWidth: 0,
gridLineWidth: 0,
title: {
text: 'Acc',
},
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'right',
x: -8,
},
},
],
legend: {
enabled: false,
},
plotOptions: {
area: {
states: {
hover: {
enabled: false,
lineWidthPlus: 0,
},
inactive: {
opacity: 1,
},
},
marker: { enabled: false },
fillOpacity: 0.2,
lineWidth: 1,
step: 'center',
},
},
tooltip: {
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
valueDecimals: 2,
},
series: [
{
name: 'Bids',
data: this.getBidOrders(),
step: 'left',
},
{
name: 'Asks',
data: this.getAskOrders(),
color: '#fc5857',
step: 'right',
},
],
};
getBidOrders() {
...
}
getAskOrders() {
...
}
...
render() {
return {
<div id='chartContainer'>
<HighchartsReact
highcharts={Highcharts}
options={this.chartOptions}
allowChartUpdate
/>
</div>
}
}
getAskOrders() and getBidOrder() methods return array that look like for example , could be larger or smaller depending on what needs to be ploted:
[
[
2179.25,
30
],
[
2179,
70
],
[
2178.75,
113
],
[
2178.5,
159
],
[
2178.25,
206
]
]
Highcharts library : https://www.highcharts.com/docs/stock/depth-chart
Looks something like this: https://codepen.io/pen
Some things that I tried and might be worth looking :
useStatehook to manage the state of the chartOptions.events property in chartOptions to update the chart valuesYou should keep the chart settings in a state and update it with new options, in your case passing new dates for the series:
updateSeries = () => {
this.setState({
chartOptions: {
series: [
{ data: [Math.random() * 5, 2, 1]}
]
}
});
}
Demo: https://stackblitz.com/edit/react-hketvd?file=index.js