Estoy usando react-apexcharts para crear un gráfico circular. Tengo éxito en la representación de la serie = [] porque es nativa del componente apexcharts.
Pero estoy tratando de representar también las etiquetas, que es una matriz simple.
Si ejecuto el archivo console.log:
console.log(this.props.total.map(a=>a.name))
prestar
["label 1","label 2","label 3"]
¿Cómo puedo actualizar la label: [],
con los valores de this.props.total.map(a=>a.name)
?
El código completo está abajo
import React from 'react' import { Card, CardHeader} from 'reactstrap' import Chart from 'react-apexcharts' class PieChart extends React.Component { constructor(props) { super(props); this.state = { series: [], options: { chart: { width: 380, type: 'pie', }, labels: [], theme: { mode: 'light', palette: 'palette2', }, legend: { show: true, position: 'bottom', horizontalAlign: 'center', floating: false, } }, }; } componentDidMount() { this.setState({ label: this.props.total.map(a=>a.name), }) } render() { return ( <> <Card color="gray" className="mb-3"> <CardHeader className="bg-gray-lighter">PieChart</CardHeader> <Card body> <div id="chart3"> <Chart options={this.state.options} series={this.props.total.map(a=>a.total_today_brl)} type="pie" height={450} /> </div> </Card> </Card> </> ); } } export default PieChart;
Intenté sin éxito:
<Chart options={this.state.options} series={this.props.total.map(a=>a.total_today_brl)} labels={this.props.total.map(a=>a.name)} type="pie" height={450} />
Y probé también:
options: { chart: { width: 380, type: 'pie', }, labels: this.props.total.map(a=>a.name), theme: { mode: 'light', palette: 'palette2', },
labels
están debajo de options
entonces, para actualizar la etiqueta en el estado, debe hacer
this.setState((prevState)=> ({ ...prevState, options:{ ...prevState.options, labels: this.props.total.map(a=>a.name) } }))