Highmaps - how i can have a seperate legend by different report?

Question

I have two (or more) reports, i want to combine this two reports and show in one map by a separate legend.

Please see example .

Also the result shared in tooltip when legends are visible.

    $(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {
        plotOptions : {
                map : {
                    mapData: Highcharts.maps['countries/ir/ir-all'],
                joinBy: 'hc-key',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        title : {
            text : 'Highmaps basic demo'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series : [{
          name : 'Report 1',
          data : [{
            'hc-key' : "ir-ea",
            value : 1000,
          },{
            'hc-key' : "ir-kv",
            value : 1000,
          },{
            'hc-key' : "ir-kd",
            value : 1000,
          },{
            'hc-key' : "ir-wa",
            value : 1000,
          }],
          mapData: Highcharts.maps['countries/ir/ir-all'],
          joinBy: 'hc-key',
          states: {
            hover: {
              color: '#BADA55'
            }
          },
          dataLabels: {
            enabled: true,
            style : {
              textShadow : '',
            },
            format: '<span style="color:black">{point.name}</span>',
          }
        },{
          name : 'Report 2',
          data : [{
            'hc-key' : "ir-wa",
            value : '3000',
          },{
            'hc-key' : "ir-ea",
            value : '3000',
          }],
          mapData: Highcharts.maps['countries/ir/ir-all'],
          joinBy: 'hc-key',
          states: {
            hover: {
              color: '#BADA55'
            }
          },
          dataLabels: {
            enabled: true,
            style : {
              textShadow : '',
            },
            format: '<span style="color:black">{point.name}</span>',
          }
        }]
    });
});

Answer 1

this is not end answer, only a better solution.

i added legendItemClick event for better view.

Please see example .

            events : {
              legendItemClick : function(){
                  for(i=0; i < this.chart.series.length; i++) {
                      this.chart.series[i].hide();
                  }

            },
        },

but i want share same province data. for example, i have value = 1 in Golestan province in report 1 and i have value = 3 in Golestan province in report 2. sum of result tooltip is :

Report 1
 Golestan : 1
Report 2
 Golestan : 3
Sum
 Goelstan : 4

Answer 2

Try this. What I have missed so far is to make the tooltip appear even if there is no value for the currently selected report.

This code in jsfiddle. Is this what you are trying to establish?

$(function() {

    // Initiate the chart
    $('#container').highcharts('Map', {
        plotOptions: {
            map: {
                mapData: Highcharts.maps['countries/ir/ir-all'],
                joinBy: 'hc-key',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                },
                events: {
                    legendItemClick: function() {
                        for (i = 0; i < this.chart.series.length; i++) {
                            this.chart.series[i].hide();
                        }

                    },
                },
            }
        },
        title: {
            text: 'Highmaps basic demo'
        },
        tooltip: {
            formatter: function() {
                var pointName = this.point.name;

                function filterByName(value) {
                    return (value.hasOwnProperty("name") && typeof value.name !== "undefined" && value.name === pointName);
                }

                var result = "<b>" + this.point.name + "</b><br>";
                var allSeries = this.series.chart.series;
                var curSeries, curValue;
                for (var i = 0; i < allSeries.length; i++) {
                    curSeries = allSeries[i];
                    curValue = curSeries.points.filter(filterByName);
                    if (curValue.length === 0 || (curValue[0].hasOwnProperty("value") && curValue[0].value == null)) {
                        return result;
                    }
                    curValue = curValue[0].value;
                    result += '<br><b>' + curSeries.name + '</b> ' + curValue;
                }
                return result;
            }
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [{
            name: 'Report 1',
            visible: false,
            data: [{
                'hc-key': "ir-ea",
                value: 1000,
            }, {
                'hc-key': "ir-kv",
                value: 1000,
            }, {
                'hc-key': "ir-kd",
                value: 1000,
            }, {
                'hc-key': "ir-wa",
                value: 1000,
            }],
            mapData: Highcharts.maps['countries/ir/ir-all'],
            joinBy: 'hc-key',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                style: {
                    textShadow: '',
                },
                format: '<span style="color:black">{point.name}</span>',
            }
        }, {
            name: 'Report 2',
            data: [{
                'hc-key': "ir-wa",
                value: '3000',
            }, {
                'hc-key': "ir-ea",
                value: '3000',
            }],
            mapData: Highcharts.maps['countries/ir/ir-all'],
            joinBy: 'hc-key',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                style: {
                    textShadow: '',
                },
                format: '<span style="color:black">{point.name}</span>',
            }
        }]
    });
});