html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // setting data

  var data = [

    ["P1", 16, 20],

    ["P2", 12, 18],

    ["P3", 9, 14]

  ];

​

  var stage = anychart.graphics.create("container");

​

  // setting basic title

  var mainTitle = anychart.standalones.title();

  mainTitle.parentBounds(0, 0, "100%", "10%");

  mainTitle.text("Ticks Position");

  mainTitle.container(stage);

  mainTitle.draw();

​

  // first chart

  var columnChart = anychart.column();

  columnChart.data(data);

​

  columnChart.title("Tickmarks Outside");

​

  // setting chart's size and position

  columnChart.bounds(0, "10%", "48%", "85%");

​

  columnChart.background().stroke("#CCCCCC");

​

  // set x ticks position

  columnChart.xAxis().ticks().enabled(true);

  columnChart.xAxis().ticks().position("outside");

​

  // set y ticks position

  columnChart.yAxis().minorTicks().enabled(true);

  columnChart.yAxis().minorTicks().position("outside");

  columnChart.yAxis().ticks().position("outside");

​

  // setting major ticks interval on y scale

  columnChart.yScale().ticks().interval(5);

​

  // display chart

  columnChart.container(stage);

  columnChart.draw();

​

  // second chart

  var lineChart = anychart.line();

  lineChart.data(data);

  lineChart.title("Tickmarks Inside");

​

  // setting chart's size and position

  lineChart.bounds("52%", "10%", "48%", "85%");

​

  lineChart.background().stroke("#CCCCCC");

​

  // adjusting x axis

  lineChart.xAxis().ticks().enabled(true);

  lineChart.xAxis().ticks().position("inside");

​

  // adjusting y axis

  lineChart.yAxis().title().enabled(false);

  lineChart.yAxis().minorTicks().position("inside");

  lineChart.yAxis().ticks().position("inside");

​

  // setting major ticks interval on y scale

  lineChart.yScale().ticks().interval(5);

​

  // display chart

  lineChart.container(stage);

  lineChart.draw();

});