html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

#container {

    position: absolute;

    width: 100%;

    top: 25px;

    bottom: 0;

}

#backButton {

    visibility: hidden;

    cursor: pointer;

    background: #7bc0f7;

    border: 1px solid #64b5f6;

    color: #fff;

    padding: 10px;

    position: absolute;

    top: 15px;

    right: 20px;

    z-index: 100;

}

anychart.onDocumentReady(function () {

  var data = [

    {"x": 2015, "value": 2195081, "drillDown": [

      {"x": "Q1", "value": 792026},

      {"x": "Q2", "value": 610501},

      {"x": "Q3", "value": 441843},

      {"x": "Q4", "value": 350711}

    ]},

    {"x": 2016, "value": 3257447, "drillDown": [

      {"x": "Q1", "value": 1378786},

      {"x": "Q2", "value": 571063},

      {"x": "Q3", "value": 510493},

      {"x": "Q4", "value": 797105}

    ]},

    {"x": 2017, "value": 1963407, "drillDown": [

      {"x": "Q1", "value": 499299},

      {"x": "Q2", "value": 649963},

      {"x": "Q3", "value": 571176},

      {"x": "Q4", "value": 242969}

    ]}

  ];

​

  // create column chart

  var chart = anychart.column(data);

​

  // configure axis labels

  chart.yAxis().labels().format("${%Value}{scale:(1000)(1000)|(k)(m)}");

  // tune tooltips format

  chart.tooltip().format("${%Value}");

  // tune interactivity selection mode

  chart.interactivity().selectionMode("none");

​

  // configire drilldown on point click

  chart.listen("pointClick", function (e) {

    if (e.point.get("drillDown")) {

      chart.getSeries(0).data(e.point.get("drillDown"));

      $("#backButton").css("visibility", "visible");

    }

  });

​

  // load initial data on click

  $("#backButton").on("click", function () {

    chart.getSeries(0).data(data);

    $("#backButton").css("visibility", "hidden");

  });

​

  // set container id and display chart

  chart.container("container").draw();

});