javascript - append 3rd `<td>` value in highchart's tool tip -

the snippet below displays tooltip colin cockram : 601118.076 currency symbol. how can append 3rd <td> values in tooltip ?

need tooltip colin cockram : 601118.076 - survey : 891.

how can achieve ?

$(function () {          $('#container').highcharts({              data: {                  table: 'datatable'              },              chart: {                  type: 'column'              },              title: {                  text: 'survey reports chart'              },              subtitle: {                  text: ''              },              yaxis: {                  allowdecimals: true,                  min: 0,                  title: {                      text: 'amount'                  }              },              tooltip: {                  formatter: function() {                      return '<b>'+ this.point.name +'</b>: \u00a3'+highcharts.numberformat(this.point.y, 2);                  }              },              plotoptions: {column: {colorbypoint: true}},              legend: {                  enabled: false              },              credits: {                  enabled: false              },          });      });

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>  <script src="https://code.highcharts.com/highcharts.js"></script>  <script src="https://code.highcharts.com/modules/data.js"></script>  <script src="https://code.highcharts.com/modules/exporting.js"></script>  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>    <table id="datatable" style="display:none;">      <thead>          <tr>              <th></th>              <th> test </th>          </tr>      </thead>      <tbody>          <tr>              <td>gavin leney</td>              <td>13592.400</td>              <td>39</td>          </tr>          <tr>              <td>colin cockram</td>              <td>601118.076</td>              <td>891</td>          </tr>          <tr>              <td>alan alker</td>              <td>152274.000</td>              <td>235</td>          </tr>        </tbody>  </table>

there better way making data source json objects rather datatable

get data chart using series

series: [{ data: [{ name: 'gavin leney', y: 13592.400, z: '39' },{ name: 'colin cockram', y: 601118.076, z: '891' },{ name: 'alan alker', y: 152274.000, z: '235' }] }],

and can rid of data

data: { table: 'datatable' }, //this no longer needed feeding data series. also, can rid of entire html data table.

see working code below: [note: have not added data in series.]

    $(function () {              $('#container').highcharts({                                    chart: {                      type: 'column'                  },                  title: {                      text: 'survey reports chart'                  },                  subtitle: {                      text: ''                  },                  yaxis: {                      allowdecimals: true,                      min: 0,                      title: {                          text: 'amount'                      }                  },                  tooltip: {                      formatter: function() {                          return '<b>'+ this.point.name +'</b>: \u00a3'+highcharts.numberformat(this.point.y, 2) +' - <b>survey</b>: '+ this.point.z;                      }                  },                  series: [{                        data: [{                           name: 'gavin leney',                           y: 13592.400,                           z: '39'                       },{                       name: 'colin cockram',                       y: 601118.076,                       z: '891'                   },{                       name: 'alan alker',                       y: 152274.000,                       z: '235'                       }]                   }],                  plotoptions: {column: {colorbypoint: true}},                  legend: {                      enabled: false                  },                  credits: {                      enabled: false                  },              });          });

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>      <script src="https://code.highcharts.com/highcharts.js"></script>      <script src="https://code.highcharts.com/modules/data.js"></script>      <script src="https://code.highcharts.com/modules/exporting.js"></script>      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>