html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data

    var data = [

      {name: "Total Market", value: 232000, custom_field: "info 1"},

      {name: "Prospects", value: 94480, custom_field: "info 2"},

      {name: "Leads", value: 47390, custom_field: "info 3"},

      {name: "Sales", value: 22181, custom_field: "info 4"}

    ];

​

    // create a chart and set the data

    var chart = anychart.funnel(data);

​

    // 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 > 50)

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

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

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

    });

​

    // configure tooltips

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

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

      if (percentOfTotal > 50)

        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");

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});