While working on a personal project, I considered using apexcharts. However, an error shown in the image kept popping up. It seemed to disappear when I set the width and height properties in the Chart component or when the site was in production. Currently, I am focused on making the layout responsive.
export function Chart() {
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const options: ApexOptions = {
chart: {
id: "chart",
background: "#030a4d8d",
fontFamily: "Roboto",
width: "auto",
height: "auto",
redrawOnWindowResize: true,
selection: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
background: {
borderRadius: 10,
},
style: {
colors: ["#142085"],
},
},
colors: ["#7e838c", "#474d59", "#363b47"],
grid: {
show: false,
},
legend: {
fontFamily: "Roboto",
},
noData: {
text: "Nenhum dado encontrado",
style: {
fontFamily: "Roboto",
},
},
xaxis: {
categories: ["Sistemas", "Comandos", "Servidores"],
labels: {
style: {
colors: "#f5f7fa",
fontFamily: "Roboto",
},
},
},
yaxis: {
show: false,
},
series: [
{
data: [100, 200, 300],
},
],
tooltip: {
enabled: false,
},
};
return (
<div className="chart-container">
<Chart
options={options}
series={options.series}
type="bar"
width={300}
height={150}
/>
</div>
);
}
I have attempted to define the width in the component and override it with CSS styles, but the component's styling takes precedence. As a beginner in frameworks and unable to read English well, I hope this error will be resolved without requiring me to explicitly set the width and height properties in the chart component.