Highcharts data label on last point of series not displayed - highcharts

Question

I want to display a data label on the last point of a series in a line chart and added this code:
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
Unfortunately the data label is not dislayed. See fiddle

Answer 1

Your series contains 63 points, but only 23 of them have defined y property and are displayed. You need to filter the visible points and get the last of them, for example by:
dataLabels: {
enabled: true,
formatter: function() {
var visiblePoints = this.series.points.filter(p => typeof p.y === 'number');
if (this.x == visiblePoints[visiblePoints.length - 1].x) {
return 'Test';
} else {
return null;
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e50jspxu/

Answer 2

You can look this =>
working example
Highcharts.chart('container', {
chart: {
height: 800,
style: {
color: '#2e4964',
},
events: {
load() {
let chart = this;
chart.series.forEach(s => {
s.setState('inactive')
})
}
}
},
title: {
text: 'Corona',
align: 'left',
y: 20,
margin: 0,
style: {
color: '#292929',
fontWeight: '700',
fontWeight: '600',
fontSize: '22px',
fontFamily: 'Fira Sans,sans-serif'
}
},
subtitle: {
text: 'Verlauf der Pandemie in den Ländern',
align: 'left',
useHTML: true,
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
xAxis: [{
type: 'linear',
min: 1,
max: 40,
tickInterval: 5,
tickLength: 5,
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
title: {
text: ''
}
}],
yAxis: [{
type: 'logarithmic',
max: 40000,
// minorTickInterval: 1,
min: 100,
title: {
text: null
},
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
}
}],
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
enabled: true,
reversed: false,
title: {
text: 'Länder an- und abwählen:',
style: {
fontFamily: 'Poppins',
fontWeight: '600',
color: '#373737',
fontSize: "14px"
}
},
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
width: 300,
maxHeight: 200,
x: -8,
padding: 10,
floating: false,
borderWidth: 0,
shadow: false,
itemMarginTop: 1,
itemStyle: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
// tooltip: {
// shared: false,
// useHTML: true,
// headerFormat: '<span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif">Tag {point.x}</span><br>',
// pointFormat: '<span style="color:{point.color};">● </span><span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif;margin-top: 50px;">{series.name} : </span><span style="white-space:normal;font-size: 14px;font-weight: 800;min-width: 200px;color: black;font-family:Poppins,sans-serif">{point.y:,.0f}<br/></b></span>',
// },
tooltip: {
useHTML: true,
enabled: true,
outside: true,
formatter: function() {
return '<div style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 120px;color: #373737;font-family:Poppins">' + 'Tag ' + this.x + '<br>' + this.series.name + ': <b>' + Highcharts.numberFormat(this.point.y, 0) + '</b>';
}
},
credits: {
href: '',
position: {
align: 'right',
y: -35,
},
text: 'Quellen: JHU CSSE, WHO CDC, NHC, Dingxiangyua',
style: {
cursor: 'arrow',
fontFamily: 'Poppins',
fontWeight: 'normal',
fontSize: "12px"
}
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
enabled: true,
allowOverlap: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return '<span style="color: #373737;font-weight: normal">' + Highcharts.dateFormat("%e. %B", this.x) + '</span>:<br>' + '<span style="color: #003f6e;font-weight: bold">' + Highcharts.numberFormat(this.y, 0) + '</span>';
} else {
return null;
}
},
style: {
textOutline: 0,
fontFamily: 'Poppins',
fontWeight: '400',
color: '#000',
fontSize: "12px"
}
},
marker: {
symbol: 'circle',
enabled: false
}
}
},
data: {
googleSpreadsheetKey: '13gjvlHhCZKlNcC1DV3nStGeWLBLWx3gxTO3SN9F3GQc',
complete: function(options) {
options.series[0].data.forEach(point => {
if (point[1] === 0) {
point[1] = null;
}
});
}
},
series: [{
color: '#8ebfd7',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: 'rgb(70, 151, 190)',
opacity: 0.5,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#266f9a',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#1c2b54',
opacity: 1,
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
states: {
hover: {
opacity: 1
}
}
},
{
color: '#780081',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#9c00b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b3007b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b30012',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b36d00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b39c00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#a3b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#59b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#12b36b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00b394',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00a8b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#0091b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#373737',
name: 'Verdopplung alle 3 Tage',
clip: false,
dashStyle: 'dot',
showInLegend: false,
states: {
inactive: {
opacity: 1
}
},
}
]
});