'apexcharts - candlestick chart with extra line - how to change line color?
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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
