Estoy trazando un gráfico de velas con líneas de soporte en tiempo real usando gráficos de vértice y gráficos de vértice de reacción. De todo lo que he leído en los documentos, el color de mi línea trazada no debería ser el color que se muestra, que actualmente es el mismo color que las líneas de cuadrícula predeterminadas, lo que hace que sea casi imposible distinguir mi línea trazada de la cuadrícula. (Debería usar la propiedad "colores" que actualmente se ignora por completo)
Este es mi objeto de opciones:
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'] },Mi componente:
<ReactApexChart options={this.state.options} series={this.state.series} type="candlestick" height={650} />¿Alguna idea de por qué sucede esto y cómo solucionarlo?
Lo arreglé. Aparentemente, si desea que la propiedad de colors se aplique en las líneas, no solo las propiedades chart.type , series.type deben establecerse en line sino también las propiedades de type en el componente ReactApexChart .
Entonces, en mi caso:
<ReactApexChart options={this.options} series={this.state.series} type="line" height={650} />