I was working on a personal project, and I was thinking of using apexcharts, but this error shown in the image started to appear, it disappears if I set the width and height properties in the Chart ponent, it also disappears if I put the site in production, but at the moment I'm working on the responsiveness of the layout
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've already tried to define the width in the ponent and style it over it in the css, but the ponent's styling prevails, I'm a beginner in the area of frameworks, and I can't even read English, I just hope that this error disappears without me having to define the width and height properties in the chart ponent
I was working on a personal project, and I was thinking of using apexcharts, but this error shown in the image started to appear, it disappears if I set the width and height properties in the Chart ponent, it also disappears if I put the site in production, but at the moment I'm working on the responsiveness of the layout
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've already tried to define the width in the ponent and style it over it in the css, but the ponent's styling prevails, I'm a beginner in the area of frameworks, and I can't even read English, I just hope that this error disappears without me having to define the width and height properties in the chart ponent
Share Improve this question edited Jan 13, 2023 at 8:13 vimuth 5,63248 gold badges91 silver badges124 bronze badges asked Jan 13, 2023 at 1:29 Uilian ComimUilian Comim 431 silver badge3 bronze badges4 Answers
Reset to default 14give width like this in your chart ponent.
<Chart
options={options}
series={options.series}
type="bar"
width={"100%"}
height={150}
/>
Try to dynamically import your whole ponent, not only the apex-chart library.
I mean, go down in the tree:
Root|
|
|Page.js| <- use next/dynamic here to import "Component.js"
|
|Component.js| <- instead of use next/dynamic here.
|
|apex-chart ponent
import dynamic from 'next/dynamic';
import { Props } from 'react-apexcharts';
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false })
const state: Props = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69]
}],
options: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat',],
}
},
};
export function DashboardChartComponent() {
return <ReactApexChart options={state.options} series={state.series} type="line" width={"100%"} height={350} />
}
Specifying both height and width at the same time worked for me.
<ApexChart
options={chartOptions}
series={seriesData}
type="bar"
height={150}
width={"100%"}
/>