How to retrieval name data for a tooltip - highcharts

Question

I can not find how to retrieve the name of the data in the series to display it in the tooltip, with this.x it works but not this.series.data.name
at the hover over the line, the name remains always 'undefined'
I looked in the documentation but I did not find the solution, that's why I post for the first time a message here, I'm a regular reader and for the first time I can not find .. thank you very much to all
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Affectation des véhicules'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 7, 15),
max: Date.UTC(2019, 7, 30)
},
yAxis: {
title: {
text: ''
},
categories: ['VITO 5 places blanc','VITO 5 places bleu','VITO 9 places gris','VITO 5 places gris','20 M3','SPRINTER'],
reversed: true
},
tooltip: {
formatter () {
const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
const chantier = this.series.data.name
const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`
const body = `<tr>
<td style="color:${this.series.color};padding:0">Chantier: </td>
<td style="padding:0"><b>${chantier}</b></td>
</tr>`
const footer = '</table>'
return header + body + footer
},
useHTML: true
},
series: [{
data: [{
name: 'aze',
x: Date.UTC(2019, 7, 20),
x2: Date.UTC(2019, 7, 22),
y: 5
},
{
name: 'azer',
x: Date.UTC(2019, 7, 24),
x2: Date.UTC(2019, 7, 25),
y: 2
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Can you help me please ?

Answer 1

For series name, use: this.series.name, but for point name use: this.point.name:
tooltip: {
formatter() {
const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
const chantier = this.point.name
const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`
const body = `<tr>
<td style="color:${this.series.color};padding:0">Chantier: </td>
<td style="padding:0"><b>${chantier}</b></td>
</tr>`
const footer = '</table>'
return header + body + footer
},
useHTML: true
}
Live demo: http://jsfiddle.net/BlackLabel/u2ekp4wz/