html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create the data 

  var data = [

    { x: "2010", y: "Arab States", heat: 0.676 },

    { x: "2010", y: "East Asia and the Pacific", heat: 0.691 },

    { x: "2010", y: "Europe and Central Asia", heat: 0.735 },

    { x: "2010", y: "Latin America and the Caribbean", heat: 0.731 },

    { x: "2010", y: "South Asia", heat: 0.585 },

    { x: "2010", y: "Sub-Saharan Africa", heat: 0.498 },

    { x: "2011", y: "Arab States", heat: 0.681 },

    { x: "2011", y: "East Asia and the Pacific", heat: 0.700 },

    { x: "2011", y: "Europe and Central Asia", heat: 0.744 },

    { x: "2011", y: "Latin America and the Caribbean", heat: 0.737 },

    { x: "2011", y: "South Asia", heat: 0.593 },

    { x: "2011", y: "Sub-Saharan Africa", heat: 0.505 },

    { x: "2012", y: "Arab States", heat: 0.687 },

    { x: "2012", y: "East Asia and the Pacific", heat: 0.707 },

    { x: "2012", y: "Europe and Central Asia", heat: 0.750 },

    { x: "2012", y: "Latin America and the Caribbean", heat: 0.740 },

    { x: "2012", y: "South Asia", heat: 0.601 },

    { x: "2012", y: "Sub-Saharan Africa", heat: 0.512 },

    { x: "2013", y: "Arab States", heat: 0.688 },

    { x: "2013", y: "East Asia and the Pacific", heat: 0.714 },

    { x: "2013", y: "Europe and Central Asia", heat: 0.759 },

    { x: "2013", y: "Latin America and the Caribbean", heat: 0.748 },

    { x: "2013", y: "South Asia", heat: 0.607 },

    { x: "2013", y: "Sub-Saharan Africa", heat: 0.521 },

    { x: "2014", y: "Arab States", heat: 0.691 },

    { x: "2014", y: "East Asia and the Pacific", heat: 0.721 },

    { x: "2014", y: "Europe and Central Asia", heat: 0.766 },

    { x: "2014", y: "Latin America and the Caribbean", heat: 0.752 },

    { x: "2014", y: "South Asia", heat: 0.617 },

    { x: "2014", y: "Sub-Saharan Africa", heat: 0.527 },

    { x: "2015", y: "Arab States", heat: 0.695 },

    { x: "2015", y: "East Asia and the Pacific", heat: 0.727 },

    { x: "2015", y: "Europe and Central Asia", heat: 0.770 },

    { x: "2015", y: "Latin America and the Caribbean", heat: 0.754 },

    { x: "2015", y: "South Asia", heat: 0.624 },

    { x: "2015", y: "Sub-Saharan Africa", heat: 0.532 },

    { x: "2016", y: "Arab States", heat: 0.699 },

    { x: "2016", y: "East Asia and the Pacific", heat: 0.733 },

    { x: "2016", y: "Europe and Central Asia", heat: 0.772 },

    { x: "2016", y: "Latin America and the Caribbean", heat: 0.756 },

    { x: "2016", y: "South Asia", heat: 0.634 },

    { x: "2016", y: "Sub-Saharan Africa", heat: 0.535 },

    { x: "2017", y: "Arab States", heat: 0.699 },

    { x: "2017", y: "East Asia and the Pacific", heat: 0.733 },

    { x: "2017", y: "Europe and Central Asia", heat: 0.771 },

    { x: "2017", y: "Latin America and the Caribbean", heat: 0.758 },

    { x: "2017", y: "South Asia", heat: 0.638 },

    { x: "2017", y: "Sub-Saharan Africa", heat: 0.537 },

    { x: "2018", y: "Arab States", heat: 0.703 },

    { x: "2018", y: "East Asia and the Pacific", heat: 0.741 },

    { x: "2018", y: "Europe and Central Asia", heat: 0.779 },

    { x: "2018", y: "Latin America and the Caribbean", heat: 0.759 },

    { x: "2018", y: "South Asia", heat: 0.642 },

    { x: "2018", y: "Sub-Saharan Africa", heat: 0.541 },

  ];        

  // create the chart and set the data

  chart = anychart.heatMap(data);

  // set the chart title

  chart.title("Human Development Index by region (2010-2018)");

  // create and configure the color scale

  var customColorScale = anychart.scales.ordinalColor();

  customColorScale.ranges([

    { less: 0.549, name: 'Low: <= 0.549', color: '#CF7A78' },

    { from: 0.550, to: 0.699, name: 'Medium: 0.55 - 0.699', color: '#E69645' },

    { from: 0.700, to: 0.799, name: 'High: 0.7 - 0.799', color: '#69A231' },

    { greater: 0.800, name: 'Very High: >=0.8', color: '#4D7623' }

  ]);

  // set the colors for each range, from smaller to bigger

  customColorScale.colors(["#CF7A78", "#E69645", "#69A231", "#4D7623"]);

  // set the color scale as the color scale of the chart

  chart.colorScale(customColorScale);

  // enable the legend

  chart.legend(true);

  // hide cell labels

  chart.labels().enabled(false)

  // create categories

  var categoryNames = ["Low", "Medium", "High", "Very High"]

  // configure the tooltip

  var tooltip = chart.tooltip();

  tooltip.fontWeight(600);

  tooltip.positionMode("point");

  tooltip.format(function () {

    if (this.heat <= 0.549) {

      return ("Value: " + this.heat + "\n Category: " + categoryNames[0]);

    }

    if (this.heat >= 0.55 && this.heat <= 0.699) {

      return ("Value: " + this.heat + "\n Category: " + categoryNames[1]);

    }

    if (this.heat >= 0.7 && this.heat <= 0.799) {

      return ("Value: " + this.heat + "\n Category: " + categoryNames[2]);

    }

  });

  // set the container id

  chart.container("container");

  // initiate drawing the chart

  chart.draw();

});