Display last label value only

[ajacinto]

Is there a way to just display the last label value in a Highcharts cloud chart? I've been looking for means to do it, but annotations seem to be the only way I've seen from Googling around. Thanks!

[rafalS]

Hi,

Welcome to our forum and thanks for contacting us with your question.

What do you mean by saying "the last label value"? What type of series you are using? Is it a series label? xAxis label? dataLabel?
Could you provide an image of how should it look like? Then I will be able to provide the best solution for you.

Best regards!

[ajacinto]

Thanks for the welcome. and apologies for the delayed reply as I got sick over the week. I meant the last data label in a chart. Attaching a sample for reference.

chart (5).jpeg (67.91 KiB) Viewed 8892 times

Thanks!

Highcharts Cloud is really great! Hope to see it incorporate mapping at some point.

[rafalS]

Hi,

Thank you for providing the image.

It's impossible through API options, but you can implement this through custom code.
Please, go to Customize -> Custom Code, remove the whole contect and paste this code:

Code: Select all

Highcharts.merge(true, options, {
	chart: {
    	events: {
        	load: function() {
              	this.series.forEach(function(series) {
                	series.points[series.points.length - 1].update({
                    	dataLabels: {
                        	enabled: true
                        }
                    });
                });
            }	
        }
    }
});

Here is a sample chart showing this: https://cloud.highcharts.com/show/H252O-Kz

Let me know if it worked or you have any further questions.

Best regards!

[ajacinto]

This worked! Thanks so much for your help!

[ajacinto]

How can I make the data label appear for this data point in the chart using custom code? Thanks!

[rafalS]

Hi,

In my code above, you can find this line:

Code: Select all

series.points[series.points.length - 1].update({

In short, the code above loops through all series and turn on dataLabels for the last point in series.

If you want to turn on dataLabel for a specific point, you can specify the series and point like this:

Code: Select all

chart.series[0].points[3].update({

This will turn on dataLabel for the first series and 4th points from left


chart.series[2].points[5] is a reference to the 3rd series and 6th point

series[n] is a reference to "n+1" series etc.


So you just need to find out which point that is in your data.

Best regards!

[ajacinto]

Got it. Thanks!

[rafalS]

You're welcome

[ajacinto]

Sorry, it looks like I jumped the gun. I replaced that line of code, and adjusted the array numbers to any series and point that might return a value, and the chart wouldn't render. No errors were returned. Hope you can help. Thanks!

[rafalS]

Hi,

I would like to help you, but for this moment I do not have any specific information about your issue. Could you provide me a link to your chart? Or your data and some basic options so I can reproduce your chart? Maybe some screenshot of your Custom Code?

Best regards!

[ajacinto]

Here's the link to a chart that I need help with:
https://cloud.highcharts.com/show/5_yF4HW_

The sample custom code I have is:

----

Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Arial'
}
}
});


Highcharts.merge(true, options, {
chart: {
events: {
load: function() {
this.series.forEach(function(series) {
series.points[series.points.length - 1].update({
dataLabels: {
enabled: true
}
});
}),
this.update({
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
}
}
}
})
}
}
}
});

----

I've also included my sample data in the zip attachment.
Thank you for your help! Let me know if there's more info I can provide.

[rafalS]

Hi,

Could you try this code and let me know if it worked?

Code: Select all

Highcharts.setOptions({
  chart: {
    style: {
      fontFamily: 'Arial'
    }
  }
});


Highcharts.merge(true, options, {
  exporting: {
    buttons: {
      contextButton: {
        menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
      }
    }
  },
  chart: {
    events: {
      load: function() {
        this.series.forEach(function(series) {
          series.points[series.points.length - 1].update({
            dataLabels: {
              enabled: true
            }
          });
        });
        this.series[0].points[13].update({
          dataLabels: {
            enabled: true
          }
        });
      }
    }
  }
});

Best regards!

[ajacinto]

It worked! I just changed the array number values to reflect the chart I'm using it on. Thanks a lot!