html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {x: "1", y: "A", fill: "#ffcc00"},

      {x: "1", y: "B", fill: "#ffcc00"},

      {x: "1", y: "C", fill: "#ff9933"},

      {x: "1", y: "D", fill: "#ff9933"},

      {x: "2", y: "A", fill: "#ffcc00"},

      {x: "2", y: "B", fill: "#ff9933"},

      {x: "2", y: "C", fill: "#ff9933"},

      {x: "2", y: "D", fill: "#ff9933"},

      {x: "3", y: "A", fill: "#ff9933"},

      {x: "3", y: "B", fill: "#ff9933"},

      {x: "3", y: "C", fill: "#ff6600"},

      {x: "3", y: "D", fill: "#ff6600"},

      {x: "4", y: "A", fill: "#ff9933"},

      {x: "4", y: "B", fill: "#ff9933"},

      {x: "4", y: "C", fill: "#ff6600"},

      {x: "4", y: "D",

       normal:   {

           fill: "#ff0000",

           stroke: "4 #b30059"

         },

       hovered:  {

           fill: "#ff0000",

           stroke: "5 white"

         },

       selected: {

           fill: "#b30059",

           stroke: "5 white"

         }

      }

    ];

​

  // create a chart and set the data

  var chart = anychart.heatMap(data);

​

  // disable tooltips

  chart.tooltip(false);

​

  // set the chart title

  chart.title("Heat Map: Appearance (Individual Points)");

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

});