highcharts tool tip extra data

working

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="extra"></div>

CSS

/*
 * solution here 
 * https://stackoverflow.com/questions/38892014/format-highcharts-tooltip
 */

JavaScript

const json =[{"heightP":"1.43","dirP":"174","dir2":"20","h2":"1.21","h3":"0.98","dayP":"16","monthP":"1"},{"heightP":"1.18","dirP":"175","dir2":"25","h2":"0.92","h3":"1.06","dayP":"17","monthP":"1"},{"heightP":"0.84","dirP":"174","dir2":"18","h2":"0.81","h3":"1.07","dayP":"18","monthP":"1"},{"heightP":"1.44","dirP":"177","dir2":"7","h2":"0.65","h3":"0.86","dayP":"19","monthP":"1"},{"heightP":"1.20","dirP":"177","dir2":"15","h2":"0.26","h3":"0.36","dayP":"20","monthP":"1"},{"heightP":"0.74","dirP":"175","dir2":"213","h2":"0.35","h3":"0.69","dayP":"21","monthP":"1"},{"heightP":"0.47","dirP":"177","dir2":"211","h2":"0.40","h3":"0.50","dayP":"22","monthP":"1"},{"heightP":"0.34","dirP":"175","dir2":"212","h2":"0.31","h3":"0.53","dayP":"23","monthP":"1"}];
console.log(json);

//var year = parseInt(dateString);  

    var categories = [],
      heightP = [],
      dirP = [],
      monthP = [],
      dayP = [],
      h2 = [],
      dir2 = [],
      h3 = [];
    for (var i in json) {
      categories.push(json[i].dayP);
      heightP.push(parseFloat(json[i].heightP));
      dayP.push(parseInt(json[i].dayP));
      dirP.push(parseInt(json[i].dirP));
      h2.push(parseFloat(json[i].h2));
      dir2.push(parseFloat(json[i].dir2));
      h3.push(parseFloat(json[i].h3));
      monthP.push(parseInt(json[i].monthP));
      
    }

    //Draw chart

    Highcharts.chart('extra', {
      chart: {
        type: 'spline'
      },

      title: {
        text: 'extra tooltip data from json'
      },
      subtitle: {
        text: 'Highcharts'
      },
      xAxis: {
        categories: dayP,
        crosshair: true
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Swell'
        },
        
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top'
    },
    tooltip: {    
    formatter: function() {
       var point = this.point;
       point.xtra = this.series.options.myData[point.index];
       return...