Highmaps call JavaScript function when region is clicked

Question

I have a Highmaps mostly working the way I want it to. The code below from my project displays the US Counties map, and displays some data when the mouse hovers over an active county.

I would like to add a click event handler that calls a jQuery function outside the map area (but still on the same HTML page). When the user clicks on a county (after hovering over it), the function should be called, and the same tooltip information from the hover state should be put into the external div via the function call. Below is the code that I'm using.

I've looked at many Highmaps and Highcharts questions online showing how to do similar things, but when I try to integrate the code examples, I end up with an empty map or some other issue (probably syntax issue). Here is what's working:

        var tableResult = "[]";
        data = JSON.parse(tableResult);

        var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
        var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");

        var options = {
            chart: {
                borderWidth: 1,
                marginRight: 50 // for the legend
            },

            exporting: {
                enabled: false
            },

            mapNavigation: {
                enabled: false
            },

            plotOptions: {
                mapline: {
                    showInLegend: false,
                    enableMouseTracking: false
                }
            },

            series: [{
                mapData: countiesMap,
                data: data,
                joinBy: ["hc-key", "code"],
                borderWidth: 1,
                states: {
                    hover: {
                        color: "#331900"
                    }
                }
            }, {
                type: "mapline",
                name: "State borders",
                data: [lines[0]],
                color: "black"
            }]
        };

        // Instanciate the map
        $("#map-container").highcharts("Map", options);

Any suggestions are appreciated!

Answer 1

Thanks to the the fiddle link that was posted, I figured out exactly what to do in the code. Here is the updated plotOptions:

plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    countyClickFunction(this.name,this.value);
                }
            }
        }
    },
    mapline: {
        showInLegend: false,
        enableMouseTracking: false
    }
},

And the countyClickFunction can function outside the actual map, displaying data outside the map area.