keep my duplicate label names in anychart

how to keep my duplicated labels names in anychart this is my data [ [ "Self", null, null ], [ "Barbara Pertschy", 43.75, 53.25 ], [ "Alisa Haufler", 40.75, 53.25 ], [ "Cooperation", null, null ], [ "Barbara Pertschy", 62.5, 47 ], [ "Alisa Haufler", 59.5, 47 ], [ "Empathy", null, null ], [ "Alisa Haufler", 37.5, 53.25 ], [ "Barbara Pertschy", 31.25, 53.25 ], [ "Communication", null, null ], [ "Alisa Haufler", 72, 40.75 ], [ "Barbara Pertschy", 59.5, 40.75 ], [ "Ownership", null, null ], [ "Alisa Haufler", 62.5, 37.5 ], [ "Barbara Pertschy", 59.5, 37.5 ], [ "Growth Mindset", null, null ], [ "Barbara Pertschy", 47, 28.25 ], [ "Alisa Haufler", 34.5, 28.25 ], [ "Integrity", null, null ], [ "Barbara Pertschy", 56.25, 34.5 ], [ "Alisa Haufler", 28.25, 34.5 ], [ "Resilience", null, null ], [ "Barbara Pertschy", 56.25, 56.25 ], [ "Alisa Haufler", 43.75, 56.25 ], [ "Holism", null, null ], [ "Barbara Pertschy", 59.5, 65.75 ], [ "Alisa Haufler", 53.25, 65.75 ] ] And this is my chart let allGapChart const allGapData = [];

this.allGaps.forEach(element => {
if (element.SelfAssessmentPercentageScore != null) {
allGapData.push([
element.CompetencyName,
null,
null,
]);
}
element.EvaluatorGapList.forEach(subElement => {
if (subElement.EvaluatorcompetencyPercentage != null) {
allGapData.push([
subElement.EvaluatorFullName,
subElement.EvaluatorcompetencyPercentage,
element.SelfAssessmentPercentageScore,
]);
}
});
});

console.log(allGapData);

console.log(allGapData);
console.log("allGapDataallGapDataallGapDataallGapData", allGapData);
if (allGapData.length > 0) {
allGapChart = () => {

function getValuesByLabel(label) {
for (var i = 0; i < allGapData.length; i++) {
if (allGapData[0] === label) {
return allGapData[1];
}
}
return null;
}
function GetLabelName(label) {
console.log("Label object:", label);
var labelText = label.xb ? label.xb.kc : 'No text found';

console.log("Label Text:", labelText);

return labelText;
}
// create a chart
var chart = anychart.bar();
var series = chart.rangeBar(allGapData).color("#7CA53F");;
chart.xAxis().labels(true);
chart.xAxis().ticks(false);
chart.xAxis().title(false);
chart.xAxis().stroke({
color: "white",
thickness: 1,
dash: "0"
});
chart.yAxis()
.orientation("top") // Set y-axis orientation to the top
.stroke({
color: "white",
thickness: 1,
dash: "0"
})
.ticks(false) // Hide major ticks
.title(false) // Hide y-axis title
.labels()
.format(function () {
var value = this.value;
value = Math.round(value);
if (value === 0) {
return ""
} else {
}
return value + '%'; // Format labels as percentage
});

chart.yScale()
.minimum(0) // Set minimum value of y-scale
.maximum(100) // Set maximum value of y-scale
.ticks({ interval: 20 }); // Set interval for major ticks
var markers = series.markers();
markers.enabled(true);
markers.size(10);
markers.fill("white");
markers.positionFormatter(function () {
var min = this['low'];
var max = this['high'];
if (min - max > 0) {
return { x: this.value.x + 0, y: this.value.y + 0 };
} else {
return { x: this.value.x + 0, y: this.value.y - 0 };
}
});
chart.container("containerss");
chart.barGroupsPadding(0); // Reduces space between bars
chart.pointWidth(20);

// initiate drawing the chart
chart.draw();
// wait until chart display
chart.listen('chartDraw', function () {
// get the number of labels
var count = chart.xAxis().labels().getLabelsCount();
// loop through labels
for (var i = 0; i < count; i++) {
// choose color
// color the label
var label = chart.xAxis().labels().getLabel(i);
if (label) {
let m = GetLabelName(label)
console.log("Label object:", m);

if (getValuesByLabel(m) == null) {
label.fontColor("red");
label.fontSize(14);
label.fontWeight("bold")
label.draw()

}
}
}
});
return chart;
}
await renderChart('GapChaallGapChartrt', allGapChart, 600, 900)
.then((base64String) => {
console.log('allGapChart:', base64String);
this.allGapsChart = base64String;
})
} else {
this.GapChart = "empty"
}


cant find nothing about this topic

Continue reading...