[SOLVED] How to retrieval name data for a tooltip

How to retrieval name data for a tooltip

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 ?

Solution

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/