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[i][0] === label) {
return allGapData[i][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