html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // setting data

  var data = anychart.data.set([

    ["P1", 16, 20],

    ["P2", 12, 18],

    ["P3", 9, 14]

  ]);

​

  // remapping data

  var Sales2003 = data.mapAs({x: [0], value: [1]});

  var Sales2004 = data.mapAs({x: [0], value: [2]});

  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.title("Tickmarks Outside");

​

  // setting chart's size and position

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

​

  var columnBackground = columnChart.background();

  columnBackground.stroke("#CCCCCC");

​

  // set x ticks position

  var xAxisTicks = columnChart.xAxis().ticks();

  xAxisTicks.position("outside");

  xAxisTicks.enabled(true);

​

  // set y ticks position

  var yAxisMinorTicks = columnChart.yAxis().minorTicks();

  yAxisMinorTicks.position("outside");

  yAxisMinorTicks.enabled(true);

  var yAxisTicks = columnChart.yAxis().ticks();

  yAxisTicks.position("outside");

​

  // setting major ticks interval on y scale

  var yScaleTicks = columnChart.yScale().ticks();

  yScaleTicks.interval(5);

​

  // series data

  columnChart.column(Sales2003);

  columnChart.column(Sales2004);

​

  columnChart.container(stage);

  columnChart.draw();

​

  // second chart

  var lineChart = anychart.line(data);

​

  lineChart.title("Tickmarks Inside");

​

  // setting chart's size and position

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

​

  var lineBackground = lineChart.background();

  lineBackground.stroke("#CCCCCC");

​

  // adjusting x axis

  var lineXTicks = lineChart.xAxis().ticks();

  lineXTicks.position("inside");

  lineXTicks.enabled(true);

​

  // adjusting y axis

  var lineYTitle = lineChart.yAxis().title();

  lineYTitle.enabled(false);

  var lineYMinorTicks = lineChart.yAxis().minorTicks();

  lineYMinorTicks.position("inside");

  var lineYTicks = lineChart.yAxis().ticks();

  lineYTicks.position("inside");

​

  // setting major ticks interval on y scale

  var lineYScaleTicks = lineChart.yScale().ticks();

  lineYScaleTicks.interval(5);

​

  // series data

  lineChart.spline(Sales2003);

  lineChart.spline(Sales2004);

​

  lineChart.container(stage);

  lineChart.draw();

});