html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

label {

    display: inline-block;

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create a data table

    var dataTable = anychart.data.table();

    dataTable.addData([

      ['2016-12-24', 19.87],

      ['2016-12-25', 20.08],

      ['2016-12-26', 19.95],

      ['2016-12-27', 20.1],

      ['2016-12-28', 19.91],

      ['2016-12-29', 20.1],

      ['2016-12-30', 19.91],

      ['2016-12-31', 19.36],

      ['2017-01-01', 19.08],

      ['2017-01-02', 19.2],

      ['2017-01-03', 18.99],

      ['2017-01-04', 18.92],

      ['2017-01-05', 18.41],

      ['2017-01-06', 18.57],

      ['2017-01-07', 18.61],

      ['2017-01-08', 19.03],

      ['2017-01-09', 18.91],

      ['2017-01-10', 18.99],

      ['2017-01-11', 18.65]  

      ]);

​

    // map the data

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

​

    // create a stock chart

    chart = anychart.stock();

​

    // create a plot and a line series

    chart.plot(0).line(mapping);

​

    // set the chart title

    chart.title("Crosshair: Display Mode = " +

                chart.crosshair().displayMode());

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// set the display mode of the crosshair

function displayMode(mode) {

  chart.crosshair().displayMode(mode);

  // update the chart title

  chart.title("Crosshair: Display Mode = " +

              chart.crosshair().displayMode());

}