reactjs - Highcharts no se renderiza: React+Typescript+Highcharts

Intentando mostrar un highchart usando React. Tengo múltiples llamadas a la API fetch (para ilustración, he agregado solo 2) cuyos datos usaré para renderizar algo en la interfaz de usuario.

En este ejemplo, data1 se utiliza para renderizar una tabla, data2 se utiliza para renderizar un highchart.

Estoy almacenando los resultados de estas llamadas en un objeto de estado. Cuando llamo a estas API, obtengo los datos pero no puedo asignarlos a la propiedad "series" de highcharts para renderizar, como resultado no se renderiza nada.

Estructura de los datos que estoy obteniendo

"api2" : [ { "name" : "Test1", "value" : 12 }, { "name" : "Test2", "value" : 9 } ]

¿Alguien puede ayudarme con esto? ¿Dónde estoy equivocándome?

Estoy usando highcharts-react-official para esto

Código

import * as React from 'react';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official';

interface IState {
  data1: [];
  data2: [];
}

interface IProps {}

class Example extends React.Component<IProps,IState> {
  constructor(props:any)
  {
    super(props);
    this.state = {
       data1: [],
       data2: []
    }
  }

  componentDidMount()
  {
      Promise.all([
        fetch('http://localhost:3001/api1'),
        fetch('http://localhost:3001/api2')
      ])
      .then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
       .then(([data1, data2]) => this.setState({
         data1: data1, 
         data2: data2
      }));
  }

  render() {    
    let options:any;
    options = {
         chart: {
            type: 'column'
         },
      credits: false,
      exporting: {enabled: false},
      title: {
        text: ''
      },
      legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'bottom'
            },
      xAxis: {
        visible:false
      },
      yAxis: {
        visible:false
      },
      plotOptions: {
        column: {
          dataLabels: {
                        enabled: true                         }
        }
      },
      series: this.state.data2
     };

    return(
      <div className="an-content">
          //some table rendering will happen here
          <HighchartsReact
                 highcharts={Highcharts}
                 options={options} 
          />
      </div>
    )
  }
} 
export default Example;

Respuesta #1

Necesita proporcionar el formato de datos requerido por Highcharts:

  this.setState({
      data2: data2.map(x => ({ name: x.name, data: [x.value] }))
  });

Demostración en vivo: https://codesandbox.io/s/7w2pw4p900

Referencia de API: https://api.highcharts.com/highcharts/series.column.data