Multiple data series and multiple data tooltip with HighMaps

Question

I would like to display multiple data for the same state in the tool tip. how should i define the data and format the tool tip accordingly?

In the example the defined data is

var data = [['in-tn', 1], ['in-ap', 2]]

and the tooltip is

Random data
Tamilnadu : 1

I would like to define my data as

  var data = [['in-tn', Rank1 , Value1 , 'Station ID1', Value2],
              ['in-tn', Rank2 , Value2 , 'Station ID2', Value3],
              ['in-ap', Rank3 , Value3 , 'Station ID3', Value5],
              ['in-ap', Rank4 , Value4 , 'Station ID4', Value6]]

and get the tool tip when hoverd on 'in-tn' as

TamiNadu
Station 1 , Rank = 1, Value1 = 13, Value 2 = 189.76<br>
Station 10, Rank = 2, Value1 = 23, Value 2 = 156.45<br>

My fiddle with data series but without tooltip

//data for which the Highmaps to be generated with all data in tooltip which matches the state code
var data = [['in-tn', 1 , 13 , 'Station 1', 189.76], 
            ['in-tn', 2 , 23 , 'Station 10', 156.45],

Answer 1

First you need to define the structure of your data for that the Highcharts would "know" how to parse it, so to do that please use the series.keys parameter, just like that:

series: [{
    data: data,
    name: 'Random data',
    keys: ['hc-key', 'rank', 'value', 'stationId', 'value2'],
    states: {
        hover: {
            color: '#FFC300'
        }
    },
    dataLabels: {
        enabled: true,
        format: '{point.name}'
    }
}]

Then you have to define your own tooltip format. You can achieve it using tooltip.pointFormat: tooltip: {

pointFormat: '<span>{point.stationId}, Rank: <b>{point.rank}</b>, Value 1: <b>{point.value}</b>, Value 2: <b>{point.value2}</b></span>'
    }

Live example: https://jsfiddle.net/BlackLabel/1oudhgq3/

API Reference:

https://api.highcharts.com/highmaps/tooltip.pointFormat

https://api.highcharts.com/highcharts/series.line.keys