html,

    body,

    #container {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

    }

// prevent premature chart script execution

anychart.onDocumentReady(function () {

  // load data into the chart from a JSON file

  anychart.data.loadJsonFile(

    "https://raw.githubusercontent.com/Bepely/JsonExampleData/main/calendar2023.json",

    // callback function to set chart data

    (data) => chart.data(data)

  );

​

  // create a calendar chart

  const chart = anychart.calendar();

​

  // set green color to elements

  chart.colorScale().colors(["green"]);

​

  // disable color range

  chart.colorRange(false);

​

  // customize months

  const months = chart.months();

  // set stroke for months

  months.stroke("black", 1);

  // set no data stroke for months

  months.noDataStroke("black", 1);

​

  // customize years

  const years = chart.years();

  // access years' title properties

  const yearsTitle = years.title();

  // set font color for years' title

  yearsTitle.fontColor("darkgray");

  // set font size for years' title

  yearsTitle.fontSize(23);

  // set font weight for years' title

  yearsTitle.fontWeight(400);

  // set padding for years' title

  yearsTitle.padding(0, "25%", 0, 0);

​

  // set tooltip format function

  chart.tooltip().format(function () {

    // get pointed article name

    const articleName = this.getData("name");

    // return article name or default text

    return articleName ? articleName : "No Article Name!";

  });

​

  // set the container id

  chart.container("container");

​

  // adjust the chart's height after drawing

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

    document.getElementById("container").style.height =

      chart.getActualHeight() + 5 + "px";

  });

​

  // set the chart title

  chart.title("JavaScript Charting Tutorials on AnyChart Blog, 2020–2023");

​

  // draw the chart

  chart.draw();

});