react-apexcharts: Charts is not fit to parent until screen is resized

I have the same problem. In the meantime I used the mounted event as a work-around the issue.

  const chartOptions = {
    chart: {
      events: {
        mounted: (chart) => {
          chart.windowResizeHandler();
        }
      }
    }
  };

setTimeout(() => {
  var chart = new ApexCharts(
    document.querySelector('#chart'),
    this.options
  );
  chart.render();
}, 0);

I have the same problem. In the meantime I used the mounted event as a work-around the issue.

  const chartOptions = {
    chart: {
      events: {
        mounted: (chart) => {
          chart.windowResizeHandler();
        }
      }
    }
  };

This entry solved the issue for me.

I have the same problem. In the meantime I used the mounted event as a work-around the issue.

  const chartOptions = {
    chart: {
      events: {
        mounted: (chart) => {
          chart.windowResizeHandler();
        }
      }
    }
  };

This is a nice solution but really messes up the animation when loading in. Is there another fix found?

Just had same issue using Angular “ng-apexcharts”: “~1.8.0”. The solution was to set display: block to apx-chart

can you please share the context where you added this code snippet?

i have a sidebar that when i open the width of the content change, when that happens the charts dont resize, just overflow the parent div.

But every time a resize event happens, the width is adjusted, so I made it so that when the sidebar opens this event occurs and arranges the charts.

this problem only happens when there is data in the chart.

Is there any solution for this?

don’t know if it helps but try adding a setTimeout when calling the chart.windowResizeHandler(); of say 800 after the mounted is called.

“apexcharts”: “^3.37.0”

Still in issue in this latest version. Sidebar will randomly cause resizing issues with my “line” chart. current resolution seems to be utilizing the useEffect hook to force rerender.

  useEffect(() => {
    const timeOut = setTimeout(() => {
      const chartInstance = ApexCharts.getChartByID("visits-chart")
      if (chartInstance) chartInstance.updateSeries(series, true)
    }, 500)
    return () => clearTimeout(timeOut)
  }, [sidebarIsOpen])

chartInstance.updateSeries() takes two parameters, the chart data, and a boolean value forcing a new animation. Hope this helps. By the way this issue only seems to occur with the line chart. Let me know if anyone else is still experiencing this issue.

Here is the solution for react.js I faced the same issue: when I close sidebar the chart not changing its width and when sidebar is open chart width overflows to parent. On resizing window it works fine, but if we don’t resize window it only changes its width according to parent when reRender. I am using react and I fixed this issue by reRender chart component when sidebar is open or close.

useEffect(() => { const timeOut = setTimeout(() => { setRender(isOpen); }, 500); return () => clearTimeout(timeOut); }, [isOpen]);

In this updated code, the useEffect hook now depends on the isOpen state variable. Whenever the value of isOpen changes, the hook sets the render state variable to the value of isOpen. This causes the chart component to rerender whenever the sidebar is opened or closed.

By doing this, the chart component’s width is now correctly updated whenever the sidebar is opened or closed.

I had the same problem when my sidebar has been expanded, chart was hidden outside window. That’s weird but I’ve added min-width: 0 to parent div and chart resizes right now.

<div style="min-width:0">
      <apexchart />
</div>

Hi, I have the same problem. Any solution? The issue #180 that @francoiscabrol comments blocks the animations.