PieChart overlapping legend

[OmerSec]

I am using ng-apexcharts for my angular project and encapsulated a piechart inside a certain component. For some reason sometimes when refreshing the page the piechart is overlapping the legend after data is loaded to the chart (screenshot). The chart is only rendered when the data is not null using ngIf.

Below is the chart config that is used. The bug only appears on screens width larger than 1100 when the legend is configured to be to the right of the piechart.

{
    "chart": {
        "width": "480",
        "height": "300",
        "type": "pie",
        "events": {}
    },
    "stroke": {
        "width": 1
    },
    "legend": {
        "show": true,
        "position": "right",
        "itemMargin": {
            "horizontal": 0,
            "vertical": 6
        },
        "floating": false
    },
    "dataLabels": {
        "enabled": false
    },
    "responsive": [
        {
            "breakpoint": 2600,
            "options": {
                "chart": {
                    "width": "480",
                    "height": "300",
                    "type": "pie",
                    "events": {}
                },
                "stroke": {
                    "width": 1
                },
                "legend": {
                    "show": true,
                    "position": "right",
                    "itemMargin": {
                        "horizontal": 0,
                        "vertical": 6
                    },
                    "floating": false
                },
                "dataLabels": {
                    "enabled": false
                }
            }
        },
        {
            "breakpoint": 1100,
            "options": {
                "chart": {
                    "width": "100%",
                    "height": "300",
                    "type": "pie",
                    "events": {}
                },
                "stroke": {
                    "width": 1
                },
                "legend": {
                    "show": true,
                    "position": "bottom",
                    "itemMargin": {
                        "horizontal": 2,
                        "vertical": 4
                    },
                    "floating": false
                },
                "dataLabels": {
                    "enabled": false
                }
            }
        }
    ],
    "series": [
        564,
        8,
        6,
        194
    ],
    "labels": [
        "Streaming",
        "Messaging",
        "Social Media",
        "Other"
    ],
    "colors": [
        "#6635CD",
        "#0085FF",
        "#4ACDD1",
        "#CCC3D5"
    ]
}

[github-actions]

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.