html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    dataTable = anychart.data.table();

    dataTable.addData([

        ["2016-01-05",  -2.0],

        ["2016-01-07",  -9.4],

        ["2016-01-08",  -4.5],

        ["2016-01-11",  -3.1],

        ["2016-01-12",  -7.9]

    ]); 

​

    // map the data

    var mapping = dataTable.mapAs({value: 1});

​

    // create a stock chart

    chart = anychart.stock();

​

    // create a plot on the chart

    plot = chart.plot(0);

​

    // create a line series

    var series = plot.line(mapping);

​

    // add event markers

    plot.eventMarkers({"groups": [

      {

        "data": [

          {

            "date": "2016-01-06",

            "description": "Event 1"

          },

          {

            "date": "2016-01-09",

            "description": "Event 2"

          },

          {

            "date": "2016-01-10",

            "description": "Event 3"

          },

        ]

      }

    ]});

​

    // set the chart title

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

      chart.title("Event Markers: Sticking to Left (Enabled = "

              + plot.eventMarkers().stickToLeft() + ")");

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// enable / disable sticking to the left point

function stickToLeftEnabled(enabled) {

  plot.eventMarkers().stickToLeft(enabled);

  // update the chart title

  chart.title("Event Markers: Sticking to Left (Enabled = "

              + plot.eventMarkers().stickToLeft() + ")");

}