Geomap + Invert font color data labels

by amrutaJgtp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

var H = Highcharts,
  map = H.maps['countries/us/us-all'],
  chart;

// Add series with state capital bubbles
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-capitals.json', function(json) {
  var data = [];
  json.forEach(function(p) {
    p.z = p.population;
    data.push(p);
  });

  chart = Highcharts.mapChart('container', {
    chart: {
      "backgroundColor": "rgba(0,0,0,1)",
      "plotBackgroundColor": "rgba(255,255,255,0)",
    },
    title: {
      text: 'Highcharts Maps lat/lon demo'
    },

    tooltip: {
      pointFormat: '{point.capital}, {point.parentState}<br>' +
        'Lat: {point.lat}<br>' +
        'Lon: {point.lon}<br>' +
        'Population: {point.population}'
    },

    xAxis: {
      crosshair: {
        zIndex: 5,
        dashStyle: 'dot',
        snap: false,
        color: 'gray'
      }
    },

    yAxis: {
      crosshair: {
        zIndex: 5,
        dashStyle: 'dot',
        snap: false,
        color: 'gray'
      }
    },

    series: [{
      name: 'Basemap',
      mapData: map,
      borderColor: '#606060',
      nullColor: 'rgba(200, 200, 200, 0.2)',
      showInLegend: false
    }, {
      name: 'Separators',
      type: 'mapline',
      data: H.geojson(map, 'mapline'),
      color: '#101010',
      enableMouseTracking: false,
      showInLegend: false
    }, {
      type: 'mapbubble',
      dataLabels: {
        enabled: true,
        format: '{point.capital}'
      },
      name: 'Cities',
      data: data,
      maxSize: '12%',
      color: H.getOptions().colors[0],
      "dataLabels": {
        "align": "center",
        "borderWidth": 0,
        "enabled": true,
        "inside": true,
        "rotation": 0,
        "style": {
          "fontFamily": "Open Sans",
          "fontSize": "1rem",
          "fontStyle": "normal",
          "fontWeight": "normal",
          "textDecoration": "none",
          "textOutline": "0px"
        },
        "verticalAlign": "middle"
    ...