I've been struggling to figure out why I keep encountering an infinite recursion issue within the Vue's Vue-charts legendCallback, and I haven't been able to find a solution. Any help would be greatly appreciated.
Within my Vue component, the `options` are defined in the following way:
options() {
var self = this;
return {
legend: {
display: false,
position: 'top',
},
legendCallback: chart=> {
return this.generateLegendData(chart)
},
tooltips: {
mode: 'single',
callbacks: {
label: function (tooltipItems) {
return "text"
}
},
}
}
},The method I have for generating the legend data looks like this:
generateLegendData(chart) {
var labels = ["SolarCity", "Einstein", "SpaceX", "Mars", "Tesla"];
var backgroundColor = [
"rgba(242,58,48, 0.1)",
"rgba(110,75,63,1)",
"rgba(55,72,172,1)",
"rgba(0,39,39,1)",
"rgba(166,176,69,1)"
];
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < labels.length; i++) {
text.push(
'<li><span style="background-color:' + backgroundColor[i] + '">'
);
if (labels[i]) {
text.push(labels[i]);
console.log(labels[i]);
}
text.push("</span></li>");
}
text.push("</ul>");
return text.join("");
}When I remove the for loop and simply return the expected string, everything functions correctly.