html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // create line chart

  var chart = anychart.area();

​

  var crosshair = chart.crosshair();

  crosshair.enabled(true);

  // set the indexes of the axes used

  var crossXLabels = chart.crosshair().xLabel();

  crossXLabels.axisIndex(0);

  var crossYLabels = chart.crosshair().yLabel();

  crossYLabels.axisIndex(1);

  // set formatter for crosshair y labels

  crossYLabels.format(function(){

    return this.value+"%";

  });

​

  // adding and adjusting extra Y scale

  var extraYScale = anychart.scales.linear();

  extraYScale.minimum(0);

  extraYScale.maximum(100);

  var extraTicks = extraYScale.ticks();

  extraTicks.interval(10);

​

  // adding and adjusting extra X axis

  var extraYAxis = chart.yAxis(1);

  extraYAxis.orientation("right");

  extraYAxis.scale(extraYScale);

  var extraLabels = extraYAxis.labels();

  extraLabels.format(function(){

    return this.value+"%";

  });

​

  // set chart title text settings

  chart.title("Area Chart with a crosshair");

​

  // create first series with mapped data

  chart.area([

    ["P1", 3.6],

    ["P2", 7.1],

    ["P3", 8.5],

    ["P4", 9.2],

    ["P5", 10.1],

    ["P6", 11.6],

    ["P7", 16.4],

    ["P8", 18.0],

    ["P9", 13.2],

    ["P10", 12.0],

    ["P11", 3.2],

    ["P12", 4.1],

    ["P13", 6.3],

    ["P14", 9.4],

    ["P15", 11.5],

    ["P16", 13.5],

    ["P17", 14.8],

    ["P18", 16.6],

    ["P19", 18.1],

    ["P20", 17.0]

  ]);

  // set container id for the chart

  chart.container("container");

  // initiate chart drawing

  chart.draw();

});