title: Highcharts Highmap world - color all countries within a continent
body: <p>I cannot get the world map to work by coloring in country iso codes supplied by a back end app.</p>
  
  <p><a href="http://jsfiddle.net/TheRealPapa/q3bgw4nu/" rel="nofollow noreferrer">I have a fiddle here.</a></p>
  
  <p>My code is:</p>
  
  <pre><code>var chartData = [{
    "name": "Africa",
    "data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
  }, {
    "name": "Asia",
    "data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
  }, {
    "name": "Europe",
    "data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
  }, {
    "name": "North America",
    "data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
  }, {
    "name": "South America",
    "data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
  }, {
    "name": "Oceania",
    "data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
  }];
  
  // Instantiate the map
  Highcharts.mapChart('container', {
  
    credits: {
      enabled: false
    },
  
    chart: {
      map: 'custom/world-highres',
      spacingTop: 20,
      spacingBottom: 20,
      backgroundColor: '#DEEFF5'
    },
  
    title: {
      text: 'Continents'
    },
  
    legend: {
      enabled: true
    },
  
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
  
    plotOptions: {
      map: {
        // joinBy: 'hc-key',
        dataLabels: {
          enabled: true,
          color: '#FFFFFF',
          style: {
            fontWeight: 'bold'
          },
          states: {
            hover: {
              color: Highcharts.getOptions().colors[2]
            }
          },
        },
        tooltip: {
          headerFormat: '',
          pointFormat: '{point.name}: &lt;b&gt;{series.name}&lt;/b&gt;'
        }
      }
    },
  
    series: chartData
  
  });
  </code></pre>
  
  <p>What have I missed? Thanks!</p>