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': 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("Bi-polar progression with Ordinal Color Scale");

​

    // set the series

    var series = map.choropleth(data);

​

    // 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.bipolarHueProgression('#EC6E07', '#64B5F6', 3);

​

    // series disable

    series.stroke("2 gray 0.41");

    // define the colors 

    series.colorScale().colors(colors); 

    // create, enable and stroke the colorRange

    var colorRange = map.colorRange();

    colorRange.enabled(true).stroke('#BBB');

​

    // set the container

    map.container('container');

    map.draw();

});