html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {x: "2020-01-12", value: "6", custom_field: "info 1" },

      {x: "2020-01-15", value: "2", custom_field: "info 2" },

      {x: "2020-01-18", value: "2", custom_field: "info 3" },

      {x: "2020-01-19", value: "5", custom_field: "info 4" },

      {x: "2020-02-03", value: "1", custom_field: "info 5" },

      {x: "2020-02-19", value: "9", custom_field: "info 6" },

      {x: "2020-03-19", value: "2", custom_field: "info 7" },

      {x: "2020-04-13", value: "3", custom_field: "info 8" },

      {x: "2020-04-15", value: "3", custom_field: "info 9" },

      {x: "2020-04-20", value: "4", custom_field: "info 10"},

      {x: "2020-04-21", value: "1", custom_field: "info 11"},

      {x: "2020-05-10", value: "3", custom_field: "info 12"},

      {x: "2020-05-11", value: "1", custom_field: "info 13"},

      {x: "2020-05-14", value: "1", custom_field: "info 14"},

      {x: "2021-01-12", value: "2", custom_field: "info 15"}

    ];

​

    // create a chart and set the data

    var chart = anychart.calendar(data);

​

    // configure tooltips

    chart.tooltip().format(

      "contributions: {%value}\n\n{%custom_field}"

    );

​

    // configure years

    chart.years().title().fontSize(30);

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Calendar Chart: Tooltips (Tokens)<br><br>" +

                "<span style='font-size:12; font-style:italic'>" +

                "GitHub Contributions</span>");

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});