html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // chart type

  var chart = anychart.cartesian();

​

  // all data

  var data1 = anychart.data.set([

    {"x": 2000, value: 1100},

    {"x": 2001, value: 800},

    {"x": 2002, value: 1100},

    {"x": 2003, value: 1500},

    {"x": 2004, value: 921},

    {"x": 2005, value: 1000},

    {"x": 2006, value: 1400}

  ]);

​

  var data2 = anychart.data.set([

    {"x": 2000, value: 900},

    {"x": 2001, value: 950},

    {"x": 2002, value: 800},

    {"x": 2003, value: 1000},

    {"x": 2004, value: 800},

    {"x": 2005, value: 790},

    {"x": 2006, value: 800}

  ]);

​

  // set data for each series

  series1 = chart.marker(data1);

  series2 = chart.marker(data2);

​

  // set colors

  series1.fill("#00cc99", 0.5);

  series1.stroke("#00cc99", 1, "10 5", "round");

  series1.hoverFill("#00cc99", 0.2);

  series1.hoverStroke("#00cc99", 2, "10 5", "round");

  series1.selectFill("#00cc99", 0.8);

  series1.selectStroke("#00cc99", 4, "10 5", "round");

​

  series2.fill("none");

  series2.hoverFill("none");

  series2.selectFill("none");

  series2.hatchFill("percent10");

  series2.hoverHatchFill("percent30");

  series2.selectHatchFill("percent50");

​

  // Sets settings for interactivity.

  chart.interactivity({hoverMode: "byX"});

​

  // set marker size

  series1.size(10);

  series2.size(15);

  series1.hoverSize(15);

  series2.hoverSize(20);

  series1.selectSize(15);

  series2.selectSize(20);

  // chart title

  chart.title("Multi-Series Marker Chart with appearance settings configured");

​

  // set axes titles 

  chart.xAxis().title("Years");

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

  // draw

  chart.container("container");

  chart.draw();

});