search

apexcharts / ng-apexcharts

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
310 stars 78 forks source link

PieChart overlapping legend #320

Open OmerSec opened 2 months ago

OmerSec commented 2 months ago

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.

Screenshot 2024-04-10 at 11 40 45

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"
    ]
}