Highmaps Map Scale

Question

How can I adjust the size of the map shape within a give chart div container? I do not see any method to set scale. I am trying to do something similar to the demo but using only a few states (that are bordered to each other). When I remove the unused states the remaining states still appear small within the given chart area. Upon drilling down to a state you can see a zoomed-in version that fits the container size. Now, when you click the "drill up" button you see the map paths now fill the chart container. Here is a rough example. Here is the div container:

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

Here is the code used to generate the chart (see jsfiddle for test data):

    // Set drilldown pointers
    $.each(Highcharts.maps['US-FL'], function () {
        this.drilldown = this.id;
    });

    // Add some real data
    $.each(Highcharts.maps['US-FL'], function () {
        //this.value = Math.round(Math.random() * 100);
        var theID = this.id.toString();
            var theData;
            data1.some(function (arrayItem) {
                var x = arrayItem[0];
                console.log(x);
                if (x == theID) {
                    theData = arrayItem[1];
                    return theData;
                }
            });
            this.value = theData;
    });

    $.each(drilldownSeries, function () {
        $.each(this.data, function () {
            var theID = this.id.toString();
            var theData;
            data1.some(function (arrayItem) {
                var x = arrayItem[0];
                //console.log(x);
                if (x == theID) {
                    theData = arrayItem[1];
                    return theData;
                }
            });
            this.value = theData;
        });
    });

    // Some responsiveness
    var small = $('#container').width() < 400;

    // Instanciate the map
    $('#container').highcharts('Map', {
        chart: {
            events: {
                drilldown: function (e) {
                    this.setTitle(null, {
                        text: e.point.name
                    });
                    e.seriesOptions.name = e.point.name;
                },
                drillup: function (e) {
                    this.setTitle(null, {
                        text: 'Florida'
                    });
                }
            }
        },

        title: {
            text: 'Highcharts Map Drilldown'
        },

        subtitle: {
            text: 'Florida',
            floating: true,
            align: 'right',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },

        legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        colorAxis: {
            min: 0
            //max: yMaxVal,
            //minColor: '#E6E7E8',
            //maxColor: '#005645'
        },

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

        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            }
        },

        series: [{
            data: Highcharts.maps['US-FL'],
            name: 'State of Florida',
            dataLabels: {
                //enabled: true,
                formatter: function () {
                    return this.point.id.substr(3, 2);
                },
                format: null
            }
        }],

        drilldown: {
            series: drilldownSeries,
            activeDataLabelStyle: {
                color: 'white'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    });
});

Answer 1

Indeed it looks like a possibly bug, reported here https://github.com/highslide-software/highcharts.com/issues/2750 At this moment it is beta version, so can contains a few bugs.