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/7.14.3/Maps/Map_Projections

​

var dataSet = anychart.data.set([

  {'id': 'AU.WA', 'value': 300},  // Western Australia

  {'id': 'AU.JB', 'value': 270},  // Jervis Bay Territory

  {'id': 'AU.NS', 'value': 240},  // New South Wales

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

  {'id': 'AU.NT', 'value': 130},  // Northern Territory

  {'id': 'AU.TS', 'value': 190},  // Tasmania

  {'id': 'AU.CT', 'value': 100}, // Australian Capital Territory

  {'id': 'AU.SA', 'value': 280},  // South Australia

  {'id': 'AU.QL', 'value': 220}   // Queensland

]);

​

// create map

var map = anychart.map();

map.geoData(anychart.maps.australia);

​

// set the title and its preferences

map.title("Single Hue Progression - Ordinal Scale");

​

// set the series

var series = map.choropleth(dataSet);

series.geoIdField('code_hasc');

​

// set the stroke

series.stroke("2 white 0");

​

// disable the labels

series.labels(false);

​

// set the colors and ranges for the scale

series.colorScale(anychart.scales.ordinalColor([{less:200},{from:200, to:250},{greater:250}]));

​

//set the single hue progression

var colors = anychart.color.singleHueProgression('#0068BC');

​

// define the colors 

series.colorScale().colors(colors);

​

// enable the colorRange

map.colorRange(true);

​

// set the container

map.container('container');

map.draw();

});