ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Display last label value only

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
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

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!
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

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
chart (5).jpeg (67.91 KiB) Viewed 11765 times
Thanks!

Highcharts Cloud is really great! Hope to see it incorporate mapping at some point. :)
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

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!
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

This worked! Thanks so much for your help!
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

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

Image
Attachments
chart-sample.png
chart-sample.png (60.47 KiB) Viewed 11744 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

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!
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

Got it. Thanks! :)
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

You're welcome ;)
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

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
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

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!
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

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.
Attachments
data-sample.xlsx.zip
(8.14 KiB) Downloaded 270 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Display last label value only

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!
Rafal Sebestjanski,
Highcharts Team Lead
ajacinto
Posts: 11
Joined: Mon Oct 21, 2019 12:03 pm

Re: Display last label value only

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

Return to “Highcharts Cloud”