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', },