html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // create a chart and set the data

  var chart = anychart.pyramid([

    {name: "Fantasy", value: 637166, custom_field: "info 1"},

    {name: "Science Fiction", value: 721630, custom_field: "info 2"},

    {name: "Detective", value: 148662, custom_field: "info 3"},

    {name: "Classics", value: 78662, custom_field: "info 4"},

    {name: "Textbooks", value: 90000, custom_field: "info 5"}

  ]);

​

  // enable HTML for labels and tooltips

  chart.labels().useHtml(true);

  chart.tooltip().useHtml(true);

​

  // configure labels

  chart.labels().format(function() {

    var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");

    if (percentOfTotal > 40)

        return "<span style='color:#dd2c00;font-weight:bold'>" +

               this.name + ": " + percentOfTotal.toFixed(1) + "%</span>";

    return this.name + ": " +percentOfTotal.toFixed(1) + "%";

  });

​

  // configure tooltips

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

    var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");

    if (percentOfTotal > 40)

        return "<span style='font-size:18'>" +

               percentOfTotal.toFixed(1) + "% (" +

               this.value + ")</span><br><br>" +

               this.getData("custom_field");

    return percentOfTotal.toFixed(1) + "% (" + this.value +

           ")<br><br>" + this.getData("custom_field");

  });

​

  // draw chart

  chart.container("container");

  chart.draw();

});