Estoy tratando de mostrar un gráfico semi donut usando Apexcharts. Quiero que responda, así que configuré su alto y ancho en automático, pero aún ocupa mucho espacio adicional después de la dona y está afectando todo mi tablero. ¿Alguna idea de cómo eliminar este espacio adicional?
Aquí está mi configuración de gráfico actual.
const options: ApexOptions = { chart: { type: "donut", height: "auto", width: "auto", parentHeightOffset: 0, sparkline: { enabled: true, }, redrawOnWindowResize: true, redrawOnParentResize: true, events: { mounted: chart => { chart.windowResizeHandler() }, }, }, stroke: { width: 0, }, labels: labels, plotOptions: { pie: { startAngle: -90, endAngle: 90, donut: { size: "65%", background: "transparent", labels: { show: true, name: { show: false, }, }, }, }, }, grid: { padding: { left: 0, right: 0, bottom: 0, }, }, dataLabels: { enabled: false, }, legend: { show: false, }, } return ( <div className="chart" style={{ height: "auto", width: "auto" }}> <ReactApexChart options={options} series={series} type="donut" /> </div> )Creo que especificar la altura y el ancho en el contenedor principal lo ayudará en su caso como este.
<div className="chart" style={{ height: "50px", width: "50px" }}> <ReactApexChart options={options} series={series} type="donut" height="100%" width="100%" /> </div>y elimine la altura y el ancho de su gráfico Opciones
chart: { type: "donut", parentHeightOffset: 0, sparkline: { enabled: true, }, ... }