html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-tooltip {

  padding: 15px;

  background: white;

  color: #333;

  box-shadow: 2px 2px 5px #333;

  border-radius: 0;

}

​

.anychart-tooltip-title .userpic {

  float: left;

  width: 40px;

  margin-right: 15px;

}

​

.anychart-tooltip-title .userpic img {

  max-width: 100%;

}

​

.anychart-tooltip-title .userinfo {

  min-width: 210px;

  text-align: right;

  vertical-align: middle;

}

​

.anychart-tooltip-title h4,

.anychart-tooltip-title h5 {

  margin: 0 0 5px;

}

​

.anychart-tooltip table {

  width: 100%;

  min-width: 150px;

}

​

.anychart-tooltip table tr td:last-child {

  text-align: right;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples-data/gantt-general-features/html-tooltip/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples-data/gantt-general-features/html-tooltip/data.json',

    function (data) {

      // create ganttResource chart

      var chart = anychart.ganttResource();

​

      // create data tree on raw data

      var treeData = anychart.data.tree(data, 'as-table');

​

      // set data for the chart

      chart.data(treeData);

​

      // set the spliter position

      chart.splitterPosition(200);

​

      // getting chart's data grid

      var dataGrid = chart.dataGrid();

​

      // getting data grid's tooltip

      var dgTooltip = dataGrid.tooltip();

​

      // setup formatters for the title and content of the tooltip using HTML

      dgTooltip.useHtml(true);

      dgTooltip.titleFormat(function () {

        return (

          '<div class="userpic"><img src="' +

          this.item.get('userpic') +

          '" alt=""/></div>' +

          '<div class="userinfo"><h4>' +

          this.name +

          '</h4>Age: ' +

          this.item.get('age') +

          '</div>'

        );

      });

      dgTooltip.format(function () {

        // context object contains total min date (auto calculated for all periods of data item)

        var startDate = this.minPeriodDate;

​

        // context object contains total max date (auto calculated for all periods of data item)

        var endDate = this.maxPeriodDate;

​

        // Duration in days

        var duration = Math.round(

          (endDate - startDate) / (1000 * 60 * 60 * 24)

        );

​

        return (

          '<table><tr><td>Total duration: </td><td>~' +

          duration +

          ' days</td></tr></table>'

        );

      });

​

      // getting chart's timeline

      var timeline = chart.getTimeline();

​

      // getting timeline's tooltip

      var tlTooltip = timeline.tooltip();

​

      // setup formatters for the title and content of the tooltip using HTML

      tlTooltip.useHtml(true);

      tlTooltip.titleFormat(function () {

        var hoveredPeriodIndex = this.periodIndex + 1;

        return '<h5>Period #' + hoveredPeriodIndex + '</h5>';

      });

      tlTooltip.format(function () {

        var hoveredPeriod = this.period;

​

        if (hoveredPeriod) {

          tlTooltip.onContentChanged(function () {

            var tooltip = document.querySelector('.anychart-tooltip');

            if (tooltip) tooltip.style.visibility = 'visible';

          });

​

          // Getting period object's fields.

          var startDate = hoveredPeriod.start;

​

          // Getting period object's field.

          var endDate = hoveredPeriod.end;

​

          // Duration in hours

          var duration = Math.round(

            (endDate - startDate) / (1000 * 60 * 60)

          );

​

          return (

            '<table><tr><td>id:</td><td>' +

            hoveredPeriod.id +

            '</td></tr>' +

            '<tr><td>duration, hours:</td><td>' +

            duration +

            '</td></tr></table>'

          );

        }

        tlTooltip.onContentChanged(function () {

          var tooltip = document.querySelector('.anychart-tooltip');

          if (tooltip) tooltip.style.visibility = 'hidden';

        });

        return '';

      });

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});