html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  // variable of additional information in labeles

  var customAttributes = {

      Men: "<br><i>For every 100<br/>girls, 105 boys are<br/>born, but males<br/>have a higher risk<br/>of dying than<br/>females, both in<br/>childhood and at<br/>adult ages.</i>",

      Women: "<br>The number of<br/>men and women<br/>in the world is<br/>roughly equal,<br/>though men hold<br/>a slight lead with<br/>101 men for 100<br/>women."

  };

  // data

  var data = anychart.data.set([

    {x: "Men", value: 50.3},

    {x: "Women", value: 49.7}

  ]);

  // set data

  var chart = anychart.pie(data);

  // set chart labels

  var labels = chart.labels();

  labels.enabled(true);

  labels.fontColor("black");

  labels.fontWeight(400);

  labels.width(140);

  labels.hAlign("center");

  labels.position("outside");

  labels.useHtml(true);

  labels.format(function() {

    return "<a style='text-decoration: underline; font-weight: 900;'>" + this.x + " ? " + this.value + "%</a>" + customAttributes[this.x];

  });

  // set title

  chart.title("HTML Text Formatting Sample");

  // draw

  chart.container("container");

  chart.draw();

});