I'm plotting a candlestick chart with support lines in realtime using apexcharts and react-apexcharts. From everything that I've read in the docs, my plotted line color should not be the color that is being displayed, which is currently the same color as the default grid lines, making it almost impossible to distinguish my plotted line from the grid. (It should use the "colors" property which is currently being completely ignored)
This is my options object:
options: {
chart: {
id: "realtime",
type: 'line',
height: 450,
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 150
}
},
zoom: {
enabled: false,
autoScaleYaxis: false,
}
},
title: {
text: 'Prices',
align: 'center'
},
xaxis: {
type: 'datetime',
},
yaxis: {
opposite: true,
tickAmount: 25,
tooltip: {enabled:true}
},
grid: {
row: {
colors: ['black'],
opacity: 1
},
column: {
colors: ['black'],
opacity: 1
},
},
plotOptions: {
candlestick: {
colors: {
upward: 'rgb(0,255,0)',
downward: 'rgb(255,0,0)'
}
},
},
colors: ['#546E7A', '#E91E63']
},
My component:
<ReactApexChart options={this.state.options} series={this.state.series} type="candlestick" height={650} />
Any ideas why this is happening and how to fix it?
I fixed it. Apparently if you want the colors property to be applied on the lines, not only the chart.type, series.type properties must be set to line but also the type props in the ReactApexChart component.
So, in my case:
<ReactApexChart options={this.options} series={this.state.series} type="line" height={650} />