html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // data

  var data = anychart.data.set([

    ["John", 10000, 12000],

    ["Jake", 12000, 15000],

    ["Peter", 18000, 16000],

    ["James", 11000, 13000],

    ["Mary", 9000, 19000]

  ]);

​

  // map data for the each series

  var Sales2003 = data.mapAs({x: 0, value: 1});

  var Sales2004 = data.mapAs({x: 0, value: 2});

​

  // chart type

  var chart = anychart.column();

​

  // switching the select mode to multi

  var interactivity = chart.interactivity();

  interactivity.selectionMode("multi-select");  

​

  // set data

  var series_1 = chart.column(Sales2003); 

  series_1.name("Sales in 2013");

  series_1.xPointPosition(0.5); 

​

  var series_2 = chart.column(Sales2004);

  series_2.name("Sales in 2014"); 

​

  series_1.fill("#E0F08F");

  series_2.fill("#29ADC2");

  series_1.selected().hatchFill("vertical-brick");

  series_2.selected().hatchFill("vertical-brick");   

  series_1.stroke("none");

  series_2.stroke("none");

​

  // chart title

  chart.title("Multi-select");

​

  chart.xAxis().title("Retail Channel");

  chart.yAxis().title("Sales");

​

  // enable legend

  chart.legend(true);

​

  // draw

  chart.container("container");

  chart.draw();

});