html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  chart = anychart.column([

    {x: "Waffle Bowl",          value: 1000},

    {x: "Kids Cone",            value: 1300},

    {x: "Cake Cup",             value: 1400},

    {x: "Color Cup",            value: 1100},

    {x: "Jumbo Cup",            value: 9000},

    {x: "Jacketed Waffle Cone", value: 1000},

    {x: "Sugar Cone",           value: 5000}

  ]);

​

  chart.getSeries(0).selected().labels({enabled: true, format: "{%x}"});

​

  // create a label

  var label = chart.label();

​

  label.padding(10, 10);

  label.position("right-top");

  label.anchor("right-top");

  label.offsetY(15);

  label.offsetX(25);

  label.width(200);

  label.hAlign("center");

  label.text("Ice cream cones types");

​

  // another way of setting everything is JSON

  label.background({

    "enabled": true,

    "fill": "White",

    "stroke": "2 gold",

    "cornerType": "round-inner",

    "corners": 5});

​

  // cycle counter

  var i = 0;

​

  // listen for a click and select the next point

  label.listen("click", function() {

    chart.getSeries(0).getPoint(i).selected(true);

    i++;

    if (i==chart.getSeries(0).data().getRowsCount()) i=0;

  });

​

  // change cursor and label color on mouse hover

  label.listen("mouseOver", function() {

    this.background().fill("Gray 0.2");

    document.body.style.cursor = "hand";

  });

​

  // reset cursor and color on mouse out

  label.listen("mouseOut", function() {

    this.background().fill("White");

    document.body.style.cursor = "auto";    

  });

​

  // draw a chart

  chart.container("container");

  chart.draw();

});