html, body, #container {

  width: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-tooltip {

  background: #fff;

  color: #333;

  box-shadow: 0 0 3px #333;

}

​

.anychart-tooltip div {

  font-size: 10px;

  min-width: 350px;

}

​

.anychart-tooltip td {

  padding: 0 5px;

}

function tooltipFormatter(ctx) {

  var events = ctx.getData('events');

  var tooltip = document.createElement('div');

  var table = document.createElement('table');

  var thead = table.createTHead();

  thead.style.fontWeight = 'bold';

  var tr = thead.insertRow();

  var cell = tr.insertCell();

  cell.textContent = 'Time';

  cell = tr.insertCell();

  cell.textContent = 'Event';

  cell = tr.insertCell();

  cell.textContent = 'Volatility Level';

  var tbody = table.createTBody();

  for (var i = 0; i < events.length; i++) {

    var row = tbody.insertRow();

    Object.values(events[i]).forEach(function(value) {

      cell = row.insertCell();

      cell.textContent = value;

    });

  }

  tooltip.appendChild(table);

  return tooltip.innerHTML;

}

​

anychart.onDocumentReady(function() {

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/calendar-chart/economic-calendar/data.json',

    function(data) {

      var dataset = anychart.data.set(data);

      var mapping = dataset.mapAs({

        x: 'timestamp',

        value: 'averageVolatility'

      });

      var chart = anychart.calendar(mapping);

​

      var customColorScale = anychart.scales.linearColor();

      customColorScale.colors(['#f1ad37', '#db340a']);

​

      // Set color scale.

      chart.colorScale(customColorScale);

​

      chart.tooltip()

        .useHtml(true)

        .hideDelay(3000)

        .format(tooltipFormatter);

​

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

        document.getElementById('container').style.height = chart.getActualHeight() + 'px';

      });

​

      chart.container('container');

      chart.draw();

    }

  );

});