html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

label {

    display: inline-block;

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {x: "2010", y: "A", heat: 15},

      {x: "2011", y: "A", heat: 17},

      {x: "2012", y: "A", heat: 21},

      {x: "2013", y: "A", heat: 23},

      {x: "2010", y: "B", heat: 34},

      {x: "2011", y: "B", heat: 33},

      {x: "2012", y: "B", heat: 32},

      {x: "2013", y: "B", heat: 30},

      {x: "2010", y: "C", heat: 43},

      {x: "2011", y: "C", heat: 42},

      {x: "2012", y: "C", heat: 40},

      {x: "2013", y: "C", heat: 38},

      {x: "2010", y: "D", heat: 8},

      {x: "2011", y: "D", heat: 8},

      {x: "2012", y: "D", heat: 7},

      {x: "2013", y: "D", heat: 8}

    ];

​

    // create a chart and set the data

    chart = anychart.heatMap(data);

​

    // enable HTML for labels

    chart.labels().useHtml(true);

​

    // configure labels

    chart.labels().format(function() {

      var heat = (this.heat);

      if (heat < 20)

        return "<span style='font-size:22'>Low</span>";

      if (heat < 40)

        return "<span style='font-size:22'>Medium</span>";

      if (heat >= 40)

        return "<span style='font-weight:bold;font-size:22'>High</span>";

    });

​

    // set the chart size and title

    chart.width(320);

    chart.height(320);

    chart.listen("chartDraw", function () {

      chart.title("Heat Map: Labels\n(Display Mode = " +

                  chart.labelsDisplayMode() + ")");

    });

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

// set the display mode of labels

function displayMode(mode) {

  chart.labelsDisplayMode(mode);

}