html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a funnel chart

        var chart = anychart.funnel([

        {x: "Qualified", value: 45},

        {x: "Proposal", value: 32},

        {x: "Negotiation", value: 11},

        {x: "Review", value: 15},

        {x: "Signed", value: 20},

        {x: "Payed", value: 22}

    ]);

    // go through all points of the end to the beginning

    for (var i = chart.getStat("count") - 1;i > 0; i--){

        // get the point and the point before it

        currentPoint = chart.getPoint(i);

        previousPoint = chart.getPoint(i - 1);

​

        // calculate the difference of values

        diff = currentPoint.get("value") - previousPoint.get("value");

​

        // and put it into the data

        currentPoint.set("diff", diff);

​

        // color the columns depending on the difference

        if (diff > 0) {

            currentPoint.set("fill", "#31C45D");

            currentPoint.set("stroke", {color: anychart.color.darken("#31C45D", 0.05)});

        } else

        {

            currentPoint.set("fill", "#F39232");

            currentPoint.set("stroke", {color: anychart.color.darken("#F39232", 0.05)});

        }

    }

​

    // display the diff in tooltip

    // the diff wasn't in the original dataset, but we've added it

    var tooltip = chart.tooltip();

    tooltip.format("Change: {%diff}");

​

    chart.neckHeight(0);

​

    chart.title("Points Customization");

    chart.container("container");

    chart.draw();

});