highmap : not able to display tooltip

Question

Can someone please guide me on below queries please:

1) How can i achieve tootltip onhover on state as per the json. I did tried and created a fiddle.

submissionDate:05/20/2017, submissionResponseDate:06/20/2017, stateResponse:Approved

2) I want to show color of state on basis of Json data (Approved/Approval Pending).

3) Do i need o pass json for all states for "hc-key" as allAreas proper is not showing all states

http://fiddle.jshell.net/a65yufqf/

US Map

Answer 1

Solution For each point

1>For tooltip you have to use formatter

tooltip: {
  formatter: function() {
    return 'submissionDate: <b>' + this.point.submissionDate + '</b><br/>' +
      'submissionResponseDate: <b>' + this.point.submissionResponseDate + '</b><br/>' +
      'stateResponse: <b>' + this.point.stateResponse + '</b><br/>'

  }
},

2>Prepare JSON data containing color

  var data = [{
    "hc-key": "us-ca",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "06/20/2017",
    "stateResponse": "Approved",
    "color": "#C40401",
  }, {
    "hc-key": "us-or",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "",
    "stateResponse": "Approval Pending",
    "color": "#0200D0"
  }];

3>As you show in sample image , you want default color which are not in JSON.So for this you have to use nullColor: 'grey', in series.

series: [{
allAreas: true,
  data: data,
  mapData: Highcharts.maps['countries/us/us-all'],
  joinBy: 'hc-key',
  //name: 'Random data',
  nullColor: 'grey', //add this to color default area
  states: {
    hover: {
      color: '#BADA55'
    }
  },
  dataLabels: {
    enabled: true,
    format: '{point.name}'
  }
}, {
  name: 'Separators',
  type: 'mapline',
  data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
  color: 'black',
  showInLegend: false,
  enableMouseTracking: false
}]

Fiddle demonstration