title: Changing background color for countries based on data
body: <p>I have a json list of countries, that each has a status <em>not updated</em>, or <em>updated</em>.</p>
  
  <p>I want to show different background colors for the countries, based on their status.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { 
  
  var criticalStatusData=[{"Country":"Australia","Criticality_High":40,"Criticality_Medium":294,"Criticality_Low":62,"LocationLiveStatus":"Live"}]; 
  
  
  var mapData = Highcharts.maps['custom/world']; 
  
  $('#container').highcharts('Map', { 
  chart: { 
  events: { 
  load: function() { 
  this.series[0].data = this.series[0].data.map((el) =&gt; { 
  if (el['LocationLiveStatus'] == "Live") { 
  el.color = "#ff0000"; 
  return el; 
  } 
  return el 
  }) 
  
  this.update({ 
  series: [{ 
  data: this.series[0].data 
  }] 
  }) 
  } 
  } 
  }, 
  series: [{ 
  name: 'Countries', 
  mapData: mapData, 
  data: criticalStatusData 
  }], 
  legend: { 
  enabled: false 
  }, 
  title: { 
  text: 'World map' 
  } 
  }); 
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/highmaps.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/modules/data.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/maps/modules/offline-exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/mapdata/custom/world.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is appreciated.</p>