html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // This sample uses 3rd party proj4 component

  // that makes it possible to set coordinates

  // for the points and labels on the map and

  // required for custom projections and grid labels formatting.

  // See https://docs.anychart.com/Maps/Map_Projections

​

  var data = [

    {'id': 'AU.WA', 'value': 170},

    {'id': 'AU.NS', 'value': 260},

    {'id': 'AU.VI', 'value': 75}, 

    {'id': 'AU.NT', 'value': 130},

    {'id': 'AU.TS', 'value': 210},

    {'id': 'AU.CT'}

  ];

​

  var map = anychart.map();

  map.geoData(anychart.maps.australia);

​

  // stroke the undefined regions

  map.unboundRegions().stroke('green');

​

  map.title().useHtml(true).hAlign('center');

  map.title('<span style="font-size: 18px;">Ordinal Color Scale <br> Single Hue Color Progression');

​

  // set the colorRange preferences

  var cr = map.colorRange();

  cr.colorLineSize(15);

  cr.align('center');

  cr.stroke(null);

  cr.ticks().stroke('rgb(216,216,216)');

  cr.ticks().position('center').length(15);

​

  series = map.choropleth(data);

  series.stroke('#000 .3');

  series.labels().fontColor('black');

​

  // define the color of the hovered district

  series.selected().fill('#5588ff');

​

  // making of the ordinal colorRange

  ocs = anychart.scales.ordinalColor([

    {less: 100},

    {from: 100, to: 150},

    {from: 150, to: 200},

    {from: 200, to: 350},

    {greater: 250}

  ]);

  ocs.colors(['rgb(253,225,86)', 'rgb(248,196,57)', 'rgb(244,168,19)', 'rgb(198,109,1)', 'rgb(152,58,0)']);

​

  // tell the series what to use as a colorRange (colorScale)

  series.colorScale(ocs);

​

  map.container('container');

  map.draw();

});