I have a chart with multiple series, Candlestick, lines, scatter etc.
I would like the X and Y to be focused on the candlesticks and not as the image above were we see the 200sma from another timeframe.
This should only be visible if inside candlestick range if that makes sens?
I've also noticed that the react component crash after few minutes without any errors, Is this the correct way of updating the data?
Here is my code.
Code: Select all
const WorkerChart = (props) => {
const chartComponent = useRef(null);
const [chartOptions, setChartOptions] = useState({
credits: { enabled: false },
accessibility: { enabled: false },
navigator: { enabled: false },
scrollbar: { enabled: false },
rangeSelector: { enabled: false },
tooltip: { enabled: false },
chart: {
animation: false,
backgroundColor: 'transparent',
margin: [40, 40, 40, 0]
},
plotOptions: {
series: {
animation: false,
states: { enabled: false, inactive: { opacity: 1 } },
dataGrouping: { enabled: false },
}
},
yAxis: [
{
labels: {
enabled: false,
align: 'left',
style: {
fontSize: 7
}
},
height: "100%",
gridLineWidth: 0
}
],
xAxis: {
visible: false,
labels: { enabled: false },
tickWidth: 0,
tickLength: 0
}
})
const isEmpty = (obj) => {
return Object.keys(obj).length === 0;
}
useEffect(() => {
try {
if (!isEmpty(props.worker)) {
var ohlc = []
var volume = []
var indicators = []
var positions = []
var position_history = {
open: [],
close: []
}
var i = 0;
for (i; i < props.worker.stf.length; i += 1) {
ohlc.push([
Number(props.worker.stf[i][0]), // the date
Number(props.worker.stf[i][1]), // open
Number(props.worker.stf[i][2]), // high
Number(props.worker.stf[i][3]), // low
Number(props.worker.stf[i][4]) // close
]);
volume.push([
Number(props.worker.stf[i][0]), // the date
Number(props.worker.stf[i][6]) // the volume
]);
}
if (!isEmpty(props.worker.positions_history)) {
props.worker.positions_history.forEach(position => {
if (position.ccy === props.worker.ccy && Number(position.cTime) >= ohlc[ohlc.length - 1][0]) {
position_history.open.push([Number(position.cTime), Number(position.openAvgPx)])
position_history.close.push([Number(position.uTime), Number(position.closeAvgPx)])
}
})
}
if (!isEmpty(props.worker.positions)) {
props.worker.positions.forEach(position => {
if (Number(position.avgPx)) {
positions.push([Number(position.cTime), Number(position.avgPx)])
}
})
}
if (!isEmpty(props.worker.indicators)) {
indicators = props.worker.indicators
}
}
let themeColors = {}
if (props.theme === 'dark') {
themeColors = {
candlestick: {
lineColor: 'rgba(255, 255, 255, 0.25)',
color: '#FFFFFF',
upColor: '#FFFFFF'
},
line: {
lineColor: 'rgba(255, 255, 255, 0.6)',
lineWidth: 0.4
}
}
}
if (props.theme === 'light') {
themeColors = {
candlestick: {
lineColor: 'rgba(0,0,0,0.2)',
color: 'rgba(0,0,0,0.8)',
upColor: 'rgba(0,0,0,0.6)'
},
line: {
lineColor: 'rgba(0,0,0,0.2)',
lineWidth: 1
}
}
}
setChartOptions({
plotOptions: {
...themeColors
},
xAxis: { min: Number(props.worker.stf[props.worker.stf.length - 1][0]) },
series: [
{
type: "candlestick",
name: "main",
zIndex: 10,
data: ohlc.reverse()
},
{
type: "scatter",
linkedTo: 'main',
name: "positions",
zIndex: 15,
marker: {
symbol: 'circle',
},
data: positions.reverse()
},
{
type: "scatter",
linkedTo: 'main',
name: "Open",
color: '#00FF00',
zIndex: 15,
marker: {
symbol: 'circle',
},
data: position_history.open.reverse()
},
{
type: "scatter",
linkedTo: 'main',
name: "Close",
color: '#FF0000',
zIndex: 15,
marker: {
symbol: 'circle',
},
data: position_history.close.reverse()
},
...indicators
]
})
} catch (error) {
}
}, [props])
useEffect(() => {
try {
chartComponent.current.chart.reflow();
} catch (error) {
console.log(error)
}
}, [])
return (
<HighchartsReact
ref={chartComponent}
highcharts={Highcharts}
constructorType={"stockChart"}
options={chartOptions}
updateArgs = { [true, true, false] }
containerProps={{ style: { width: "100%", height: '100%' } }}
/>
)
}
export default WorkerChart;