html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create column chart

    var chart = anychart.column();

​

    // set series data

    var series = chart.column([

        {x:"John", value: 10000},

        {x:"Jake", value: 12000},

        {x:"Peter", value: 18000},

        {x:"James", value: 11000},

        {x:"Mary", value: 9000}

    ]);

    var palette = anychart.palettes.distinctColors();

​

    for (var i=0; series.getPoint(i).exists();i++)

        series.getPoint(i).set("fill", palette.itemAt(i));

​

    series.selected().fill("#444");

    series.stroke(null);

    series.name("Sales 2004");

​

    var legend = chart.legend();

    // enable legend

    legend.enabled(true);

    // set source of legend items

    legend.itemsSourceMode("categories");

​

    legend.itemsFormatter(function (items){

        for (var i=0;i<items.length;i++){

            items[i].iconType = "square";

            items[i].iconFill = palette.itemAt([i]);

            items[i].iconEnabled = true;

        }

        return items;

    });

​

    legend.listen("legendItemMouseOver", function(event) {

        // get item's index

        var index = event["itemIndex"];

        // enable the hover state of the series

        series.getPoint(index).hovered(true);

    });

    legend.listen("legendItemMouseOut", function(event) {

        // get item's index

        var index = event["itemIndex"];

        // disable the hover state of the series

        series.getPoint(index).hovered(false);

    });

​

    legend.listen("legendItemClick", function(event) {

        // get item's index

        var index = event["itemIndex"];

        // disable the hover state of the series

        series.getPoint(index).selected(!series.getPoint(index).selected());

        legend.itemsFormatter(function (items){

            for (var i=0;i<items.length;i++){

                items[i].iconType = "square";

                if (series.getPoint(i).selected())

                    items[i].iconFill = "#444";

                else

                    items[i].iconFill = palette.itemAt([i]);

                items[i].iconEnabled = true;

            }

            return items;

        });

    });

​

    chart.listen("pointsSelect", function() {

        legend.itemsFormatter(function (items){

            for (var i=0;i<items.length;i++){

                items[i].iconType = "square";

                if (series.getPoint(i).selected())

                    items[i].iconFill = "#444";

                else

                    items[i].iconFill = palette.itemAt([i]);

                items[i].iconEnabled = true;

            }

            return items;

        });

    });

​

    chart.interactivity("by-x");

​

    chart.title("Legend Controls Points");

​

    // set container id for the chart

    chart.container("container");

​

    // initiate chart drawing

    chart.draw();

});