I am new to using Highcharts and I am trying to utilize the xAxis.labels.formatter function to generate labels. However, I am facing an issue where the formatter function is running with empty data. Interestingly, when I click on the legend, the data gets loaded and the labels are generated correctly. I have attempted to use the charts.events.load to trigger the labelFormatter function, but unfortunately, without success. My main goal is to generate the labels after the series data is loaded and the chart is fully rendered.
chart: {
type: 'line',
backgroundColor: '#eee',
events: {
load: function () {
console.log(this);
this.xAxis[0].labelFormatter();
}
}
},
xAxis: {
categories: [],
labels: {
formatter: formatVehicleConversionLabels,
useHTML: true
}
},
...
function formatVehicleConversionLabels() {
//console.log(this);
var month = this.value;
var totalConnectedVehiclesValue = null;
var notificationsValue = null;
var downloadsValue = null;
var installationsValue = null;
for(var i = 0; i < this.chart.series.length; i++) {
var currentSeries = this.chart.series[i];
if(currentSeries.name === "Total Connected Vehicles") {
if(currentSeries.data.length > 0) {
for(var j = 0; j < currentSeries.data.length; j++) {
var currentData = currentSeries.data[j];
if(currentData.category === month) {
totalConnectedVehiclesValue = currentData.y;
}
}
}
}
if(currentSeries.name === "Notifications") {
if(currentSeries.data.length > 0) {
for(var j = 0; j < currentSeries.data.length; j++) {
var currentData = currentSeries.data[j];
if(currentData.category === month) {
notificationsValue = currentData.y;
}
}
}
}
if(currentSeries.name === "Downloads") {
if(currentSeries.data.length > 0) {
for(var j = 0; j < currentSeries.data.length; j++) {
var currentData = currentSeries.data[j];
if(currentData.category === month) {
downloadsValue = currentData.y;
}
}
}
}
if(currentSeries.name === "Installations") {
if(currentSeries.data.length > 0) {
for(var j = 0; j < currentSeries.data.length; j++) {
var currentData = currentSeries.data[j];
if(currentData.category === month) {
installationsValue = currentData.y;
}
}
}
}
}
return '<table class="x-axis"><tr><th>' + this.value + '</th></tr>' +
'<tr><td>' + totalConnectedVehiclesValue + '</td></tr>' +
'<tr><td>' + notificationsValue + '</td></tr>' +
'<tr><td>' + downloadsValue + '</td></tr>' +
'<tr><td>' + installationsValue + '</td></tr></table';
}
// FIX
To resolve this issue, I added an array to the options property and used it as the data for the label formatter function.
options:{
labelData: [],
...
angular.forEach(vm.downloadAndInstallationRateChartConfig.options.xAxis.categories, function(d, i) {
vm.downloadAndInstallationRateChartConfig.options.labelData.push({
col: d,
successfulDownloads: successfulDownloadsData[i],
successfulInstallations: successfulInstallationsData[i]
});
});
function formatDownloadAndInstallationRateLabels() {
var labelData = null;
for(var i = 0; i < this.chart.options.labelData.length; i++) {
if(this.chart.options.labelData[i].col === this.value) {
labelData = this.chart.options.labelData[i];
}
}
return '<span style="margin-bottom: 20px; display: inline-block; font-size: 12px;">'+this.value+'</span><br />'+
'<span style="margin-top: 1px; display: inline-block; font-size: 12px;">'+labelData.successfulDownloads+'</span><br />'+
'<span style="margin-top: 1px; display: inline-block; font-size: 12px;">'+labelData.successfulInstallations+'</span>';
}