New Zealand - Highmaps

Highmaps demo

by Aaron Morgan

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/nz/nz-all.js"></script>

<div class="chart-div">


  <div class="widgettitle">
    <label class="chart-label">Simple Chart</label>
  </div>
  <div id="container"></div>
</div>
<script>
  /**
   * Dark theme for Highcharts JS
   * @author Torstein Honsi
   */

  // Load the fonts
  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
  }, null, document.getElementsByTagName('head')[0]);

  Highcharts.theme = {
    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
      "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
    ],
    chart: {
      backgroundColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 1
        },
        stops: [
          [0, '#2a2a2b'],
          [1, '#3e3e40']
        ]
      },
      style: {
        fontFamily: "'Unica One', sans-serif"
      },
      plotBorderColor: '#606063'
    },
    title: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase',
        fontSize: '20px'
      }
    },
    subtitle: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase'
      }
    },
    xAxis: {
      gridLineColor: '#707073',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      title: {
        style: {
          color: '#A0A0A3'

        }
      }
    },
    yAxis: {
      gridLineColor: '#707073',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      tickWidth: 1,
      title: {
       ...

CSS

#container {
  height: 500px;
  min-width: 310px;
  max-width: 650px;
  margin: 0 auto;
}

.chart-div {
  max-width: 650px;
  border: 1px solid #0866c6;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

.widgettitle {
  background: #0866c6;
  color: #fff;
  font-size: 14px;
  min-width: 310px;
  max-width: 650px;
  margin: 0 auto;
  padding: 7px 0;
}

.chart-label {
  margin: 0px 12px;
  font-size: 1.5em;
}

JavaScript

$(function() {

  // Prepare demo data
  var data = [{
    "hc-key": "nz-au",
    "value": 0
  }, {
    "hc-key": "nz-ma",
    "value": 9
  }, {
    "hc-key": "nz-so",
    "value": 2
  }, {
    "hc-key": "nz-wk",
    "value": 3
  }, {
    "hc-key": "nz-wg",
    "value": 4
  }, {
    "hc-key": "nz-4680",
    "value": 5
  }, {
    "hc-key": "nz-6943",
    "value": 6
  }, {
    "hc-key": "nz-6947",
    "value": 7
  }, {
    "hc-key": "nz-ca",
    "value": 8
  }, {
    "hc-key": "nz-ot",
    "value": 9
  }, {
    "hc-key": "nz-mw",
    "value": 10
  }, {
    "hc-key": "nz-gi",
    "value": 11
  }, {
    "hc-key": "nz-hb",
    "value": 12
  }, {
    "hc-key": "nz-bp",
    "value": 13
  }, {
    "hc-key": "nz-3315",
    "value": 14
  }, {
    "hc-key": "nz-3316",
    "value": 15
  }, {
    "hc-key": "nz-no",
    "value": 16
  }, {
    "hc-key": "nz-tk",
    "value": 17
  }, {
    "hc-key": "nz-wc",
    "value": 18
  }];

  // Initiate the chart
  $('#container').highcharts('Map', {

    title: {
      text: '',
      useHTML: true,
      style: {
        'background-color': 'transparent'
      }
    },

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

    colorAxis: {
      min: 0
    },

    series: [{
      data: data,
      mapData: Highcharts.maps['countries/nz/nz-all'],
      joinBy: 'hc-key',
      name: 'Random data',
      states: {
        hover: {
          color: '#BADA55'
        }
      },
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }]
  });
});