Diagramme überlappen die Legende nach dem Aktualisieren der Daten ⇐ CSS

[Guest]

Ich erstelle Kreisdiagramme in Apex Charts mit HTML/CSS/JS. Wenn ich zum ersten Mal Daten von der API abrufe und die Diagramme fülle, funktioniert alles gut. Wenn ich jedoch auf die Schaltfläche „Daten aktualisieren“ klicke und die Diagramme aktualisiere, wird das Kreisdiagramm zur Seite verschoben und überlappt die Legende. Sehen Sie sich die Screenshots unten zur Veranschaulichung an:
Erstmaliger Datenabruf:
[img]https://i. sstatic.net/Jyaq3L2C.png[/img]

Code: Select all

// Example data
[{
"count": 11,
"percent": 0.9166666666666666,
"profanity": "none"
},
{
"count": 0,
"percent": 0,
"profanity": "mild"
},
{
"count": 0,
"percent": 0,
"profanity": "medium"
},
{
"count": 0,
"percent": 0,
"profanity": "strong"
},
{
"count": 1,
"percent": 0.08333333333333333,
"profanity": "extreme"
}
]

// Function to create empty chart.  This only gets called on initial query, if the data is just filtered or refreshed, code will go right to updating the alreayd existing chart.
const createEmptyProfanityChart = () => {
var options = {
series: [],
chart: {
width: 380,
height: 265,
type: "pie",
id: "profanity-chart",
},
labels: [],
redrawOnParentResize: false,
redrawOnWindowResize: false,
};

var chart = new ApexCharts(
document.querySelector("#profanity-chart"),
options
);
chart.render();
};

// Function to update chart with new data
const updateProfanityChart = (data) => {
let extremeCount;
let strongCount;
let mediumCount;
let mildCount;
let noneCount;

// loop through profanity data and push counts into array
data.profanity_list.forEach((item) => {
switch (item.profanity) {
case "none":
noneCount = item.count;
break;
case "mild":
mildCount = item.count;
break;
case "medium":
mediumCount = item.count;
break;
case "strong":
strongCount = item.count;
break;
case "extreme":
extremeCount = item.count;
break;
}
});

let countsArr = [
extremeCount,
strongCount,
mediumCount,
mildCount,
noneCount,
];

let labelsArr = ["Extreme", "Strong", "Medium", "Mild", "None"];

ApexCharts.exec("profanity-chart", "updateSeries", countsArr, true);

ApexCharts.exec(
"profanity-chart",
"updateOptions", {
labels: labelsArr,
},
false,
true
);
};

// Create empty chart if first time populating data
if (initialFetch === false) {
createEmptyChart()
}

// Function to update the chart with  data
populateChart(data)

Code: Select all

.stats-card-container {
width: 400px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
position: relative;
border-radius: 0.8rem;
overflow: clip;
}

.stats-cards-row {
display: flex;
justify-content: space-evenly;
margin-bottom: 3rem;
margin-top: 1rem;
column-gap: 1rem;
}

.stats-card-header {
height: 40px;
background-color: var(--main-orange-th-color);
padding: 8px;
display: flex;
align-items: center;
font-weight: 600;
}

.stats-chart-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}

#no-data__stats {
text-align: center;
margin-top: 2rem;

Code: Select all

Philosophical Bent








Profanity

Alle folgenden Diagrammaktualisierungen mit neuen Daten


Ich kann das Problem auf einem nicht reproduzieren codepen, da ich eine private API verwende. Nachfolgend finden Sie Beispieldaten sowie meinen Code zum Ausfüllen des Diagramms.