I am using MUI mini variant drawer, I have set the main div content where the outlet is at to be padded by 100px when the drawer is closed partially and 300px when the drawer is opened, it's working fine on all components except react apexcharts they don't get resized until I refresh the page, I have tried the following 1 - Changing the chart options when the drawer is toggled in order for it to re-render but yet I am still facing the same issue
export const ChartComponent = ({options, series, type}) => {
return (
<Chart options={options} series={series} width='100%' height='300'
type={type}/>
)
}
That's my chart component
const [stockSummary, setStockSummary] = useState({
series: [{
name: '',
type: 'column',
data: [75, 85, 72, 100, 50, 100, 80, 75, 95, 35, 75, 100]
}, {
name: '',
type: 'area',
data: [44, 65, 55, 75, 45, 55, 40, 60, 75, 45, 50, 42]
}, {
name: '',
type: 'line',
data: [30, 25, 45, 30, 25, 35, 20, 45, 35, 20, 35, 20]
}],
options: {
chart: {
height: 300,
type: 'line',
stacked: false,
toolbar: {
show: false,
},
},
stroke: {
width: [0, 1, 1],
curve: 'straight',
dashArray: [0, 0, 5]
},
legend: {
fontSize: '13px',
fontFamily: 'poppins',
labels: {
colors: '#888888',
}
},
plotOptions: {
bar: {
columnWidth: '18%',
borderRadius: 6,
}
},
fill: {
type: 'gradient',
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
colorStops: [
[
{
offset: 0,
color: '#1C2E9E',
opacity: 1
},
{
offset: 100,
color: '#1C2E9E',
opacity: 1
}
],
[
{
offset: 0,
color: '#3AC977',
opacity: 1
},
{
offset: 0.4,
color: '#3AC977',
opacity: .15
},
{
offset: 100,
color: '#3AC977',
opacity: 0
}
],
[
{
offset: 0,
color: '#FF5E5E',
opacity: 1
},
{
offset: 100,
color: '#FF5E5E',
opacity: 1
}
],
],
stops: [0, 100, 100, 100]
}
},
colors: ["#1C2E9E", "#3AC977", "#FF5E5E"],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
markers: {
size: 0
},
xaxis: {
type: 'month',
labels: {
style: {
fontSize: '13px',
colors: '#888888',
},
},
},
yaxis: {
min: 0,
opposite: true,
tickAmount: 4,
labels: {
style: {
fontSize: '13px',
colors: '#888888',
},
},
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
},
}
})
const [barChart, setBarChart] = useState({
series: [
{
name: '',
data: [31, 40, 28, 31, 40, 28, 31, 40, 28, 31, 40, 28]
},
],
options: {
chart: {
type: 'bar',
height: 300,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
columnWidth: '45%',
borderRadius: 5,
},
},
colors: ['#', '#77248B'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 30,
height: 30,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 35,
}
},
stroke: {
show: true,
width: 6,
colors: ['transparent']
},
grid: {
borderColor: 'rgba(252, 252, 252,0.2)',
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Agu', 'Sep', 'Oct', 'Nev', 'Dec'],
labels: {
style: {
colors: '#000',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX: -16,
style: {
colors: '#000',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
opacity: 1,
colors: ['#1C2E9E', '#FFD125'],
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
},
responsive: [{
breakpoint: 575,
options: {
plotOptions: {
bar: {
columnWidth: '1%',
borderRadius: -1,
},
},
chart: {
height: 250,
},
series: [
{
name: 'Projects',
data: [31, 40, 28, 31, 40, 28, 31, 40]
},
{
name: 'Projects',
data: [11, 32, 45, 31, 40, 28, 31, 40]
},
],
}
}]
}
})
```
and those are the options
