I am currently utilizing ReactApexChart to display pie charts in a React application. I am trying to have four pie charts aligned horizontally within a single div, but by default, the charts are displayed vertically with each chart in its own separate div. Unfortunately, the documentation has not been helpful in resolving this issue.
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>
)
}
}