html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-tooltip {

  font-size: 0.6em;

  background: #fff;

  color: #333;

  box-shadow: 0 0 5px #333;

  padding: 20px;

}

​

.anychart-tooltip h5 {

  margin: 0 0 5px;

}

​

.anychart-tooltip ul {

  margin: 0 0 5px;

}

anychart.onDocumentReady(function () {

  // create sankey chart

  var chart = anychart.sankey();

​

  // set title for chart

  chart.title('Energy Flows (TWh/y)');

​

  // set chart's data

  chart.data(getData()); // eslint-disable-line no-undef

​

  // set chart's padding

  chart.padding(20, 80, 20, 40);

​

  // set chart's flows curvature

  chart.curveFactor(0.2);

​

  // set chart's node width

  chart.nodeWidth(50);

​

  // set chart's node padding

  chart.nodePadding(30);

​

  // set node's label position

  chart

    .node()

    .normal()

    .labels()

    .anchor('center-bottom')

    .position('center-top');

​

  // set tooltips position for node

  chart.node().tooltip().anchor('center-bottom');

​

  // disable tooltips for flows and dropoffs

  chart.flow().tooltip().enabled(false);

  chart.dropoff().tooltip().enabled(false);

​

  // enable HTML-mode for node's tooltip and set formatter for it

  chart

    .node()

    .tooltip()

    .useHtml(true)

    .format(function () {

      var tooltip = '';

      var i;

      var ul;

      var income;

      var outcome;

      var conflict;

      if (this.income.length) {

        income = 0;

        ul = '<ul>';

        for (i = 0; i < this.income.length; i++) {

          ul +=

            '<li>' +

            this.income[i].name +

            ': ' +

            this.income[i].value +

            '</li>';

          income += this.income[i].value;

        }

        ul += '</ul>';

        tooltip += '<h5>Income(' + income + '):</h5>' + ul;

      }

      if (this.outcome.length) {

        outcome = 0;

        ul = '<ul>';

        for (i = 0; i < this.outcome.length; i++) {

          ul +=

            '<li>' +

            this.outcome[i].name +

            ': ' +

            this.outcome[i].value +

            '</li>';

          outcome += this.outcome[i].value;

        }

        ul += '</ul>';

        tooltip += '<h5>Outcome(' + outcome + '):</h5>' + ul;

      }

      if (this.dropoff > 0) {

        tooltip += '<h5>Dropoff: ' + this.dropoff + '</h5>';

      }

      if (this.isConflict) {

        if (income > outcome + this.dropoff) {

          conflict = income - (outcome + this.dropoff);

          tooltip +=

            '<h5>Conflict:</h5><ul><li> income is greater than outcome by ' +

            conflict +

            '</li></ul>';

        } else {

          conflict = outcome + this.dropoff - income;

          tooltip +=

            '<h5>Conflict:</h5><ul><li>outcome is greater than income by ' +

            conflict +

            '</li></ul>';

        }

      }

      return tooltip;

    });

​

  // set node's label formatter

  chart

    .node()

    .labels()

    .useHtml(true)

    .format(function () {

      if (this.isConflict) {

        return '<b style="color: red">' + this.name + '</b>';

      }

      return this.name;

    });

​

  // Set flow's normal and hovered fill

  chart.flow({

    normal: {

      fill: function () {

        return anychart.color.lighten(this.sourceColor, 0.5) + ' ' + 0.3;

      }

    },

    hovered: {

      fill: function () {

        return this.sourceColor + ' ' + 0.9;

      }

    }

  });

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});