CODEWITHSUNDEEP
highcharts
praveen
praveen

Reputation: 105

Highchart maps show some states as selected with feasibility to select other states

I want to show highchart map with all US states and I will send a list of few states and those states should be selected. If the user wants to select additional states then he can click and select them. I have no idea how to proceed.

I tried to pass in states data that should be shown as selected. It is showing as selected but I am not able to select other states.

this.Data = [{"StateAbbr": "AZ", "StateName":"Arizona"},
               {"StateAbbr": "FL", "StateName":"Florida"}];


            this.chartOptions = function () {
                return {
                    chart: { renderTo: 'geographySection', borderWidth: 0 
                     },                        
                    mapNavigation: { enabled: false },
                    series: this.series(),
                    credits: { enabled: false }                      
                };
            };

            this.series = function () {
                return [{
                    animation: { duration: 1000 },
                    showInLegend: false,
                    data: this.Data,
                    mapData: Highcharts.maps['countries/us/us-all'],
                    joinBy: ['postal-code', 'StateAbbr'],
                    dataLabels: { enabled: true, format: '{point.StateAbbr}' },
                    tooltip: {  headerFormat: '', pointFormat: '{point.StateName}' }

                }];
            };

            new Highcharts.Map(this.chartOptions());

Upvotes: 0

Views: 267

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can add to your data selected property, for example by using keys option:

var data = [
    ['us-ma', 0],
    ['us-wa', 1, true],
    ['us-ca', 2, true],
    ['us-or', 3],
    ['us-wi', 4],
    ...
];

// Create the chart
Highcharts.mapChart('container', {
    ...,

    series: [{
        keys: ['hc-key', 'value', 'selected'],
        data: data,
        ...
    }, ...]
});

Live demo: http://jsfiddle.net/BlackLabel/2ag6woe4/

API Reference: https://api.highcharts.com/highmaps/series.mappoint.keys

Upvotes: 1

Related Questions