css - 複数の頂点円グラフを横に並べる方法

Question

反応アプリで円グラフを表示するためにReactApexChartを使用しています。4 つの円グラフを 1 つの円グラフ内で水平方向に配置したいのですdivが、デフォルトでは、div毎回新しい円グラフを垂直方向に配置してチャートを作成します。ドキュメントは何の助けにもなりません。

render() {
        const { isLoading } = this.state;

        const options = {
            labels: ['Dynatrace', 'Splunk', 'Status cake', 'Datadog'],
            responsive: [{
              breakpoint: 480,
              options: {
                chart: {
                  width: 200
                },
                legend: {
                  position: 'bottom'
                }
              },
            }]
          };

        const series = [44, 55, 13, 43];

        return(
            <Fragment>
                {
                    isLoading && <Loader />
                }
                <div>
                 <ReactApexChart options={options} series={series} type="pie" width="380" />
                 <ReactApexChart options={options} series={series} type="pie" width="380" />
                 <ReactApexChart options={options} series={series} type="pie" width="380" />
                 <ReactApexChart options={options} series={series} type="pie" width="380" />
                </div>
            </Fragment>
        )
    }
}