html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

#container {

    position: absolute;

    width: 100%;

    top: 25px;

    bottom: 0;

}

​

button {

    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 () {

  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

  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'));

      document.getElementById("backButton").style.visibility = "visible";

    }

  });

​

  // set container id and display chart

  chart.container('container').draw();

});

​

// load initial data on button click

function back() {

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

  document.getElementById("backButton").style.visibility = "hidden";

}