Annotations and hot reload error when chart is placed on dialog (#top-layer)

[tratteo]

I am using DaisyUI to style my application. I have an apexchart placed inside a dialog tag styled with the DaisyUI modal. The problem I am facing is with chart hot reload capabilities in general and more specifically, the annotations labels. My annotations options are the following.

{
  annotations = {
    yaxis: [
      {
        y: 0,
        y2: 20,
        fillColor: daisyUiColorHex("--su"),
        opacity: 0.15,
        label: {
          borderColor: daisyUiColorHex("--su"),
          style: {
            fontSize: "12px",
            fontFamily: "Poppins",
            color: daisyUiColorHex("--suc"),
            background: daisyUiColorHex("--su"),
          },
          text: "Average Surface Air Consumption rate",
        },
      },
    ],
  };
}

The chart is not rendered correctly, basically the label is not correctly placed and the text is not rendered. There are no errors in the console.

---

As I stated, the chart also has problem hot reloading. Whenever I change the code i need to completely refresh the page.

• Is this related to the fact that the dialog is in a #top-layer?
• Is there a way to fix this for the moment?

Thanks

[tratteo]

For the moment I fixed the issue by using a MutationObserver to listen to changes in the status of the dialog element and then forcing re-rendering whenever the dialog is opened.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.