html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples-data/general-features/axis-labels-position/data.json

​

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples-data/general-features/axis-labels-position/data.json',

    function (data) {

      var view = anychart.data.set(data).mapAs();

​

      // create column chart

      var chart = anychart.bar();

​

      // set total value for every year

      for (var i = 0; i < view.getRowsCount(); i++) {

        view.set(i, 'value', sumOf(view.get(i, 'data')));

      }

​

      // set chart settings

      chart.padding(25);

      chart.title(

        'Top destinations out of Dublin Airport by years.\nSelect year:'

      );

​

      // create and setup column series

      var series = chart.bar(view);

      series.fill('gold').stroke('gold', 1);

​

      // set xAxis labels settings

      chart.xAxis().labels().position('inside').fontColor('#000');

​

      chart

        .labels()

        .enabled(true)

        .anchor('right-center')

        .fontColor('#000');

​

      chart.yAxis().enabled(false);

      chart.xAxis().stroke('#fff').ticks().stroke('#fff');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

​

      // create label

      var label = chart.label(0);

      label

        .enabled(false)

        .text('Back')

        .fontColor('#fff')

        .padding(5)

        .position('left-top')

        .offsetX(32)

        .offsetY(25)

        .background('#9E9E9E');

​

      label.listen('click', function () {

        label.enabled(false);

        series.unselect();

        series.selectionMode('drill-down');

        addPointEvent(chart, series, label);

        series.data(view);

        chart.title(

          'Top destinations out of Dublin Airport by years.\nSelect year:'

        );

      });

​

      label.listen('mouseOver', function () {

        this.background(anychart.color.darken('#9E9E9E', 0.35));

      });

​

      label.listen('mouseOut', function () {

        this.background('#9E9E9E');

      });

​

      addPointEvent(chart, series, label);

    }

  );

});

​

function sumOf(arr) {

  var sum = 0;

  for (var i = 0; i < arr.length; i++) {

    sum += arr[i].value;

  }

  return sum;

}

​

function addPointEvent(chart, series, label) {

  // event for point select

  chart.listenOnce('pointClick', function (event) {

    this.title(

      'Top destinations out of Dublin Airport in ' +

      event.iterator.get('x')

    );

    if (!label.enabled()) {

      var monthsData = anychart.data

        .set(event.point.get('data'))

        .mapAs()

        .sort('value', 'desc');

​

      label.enabled(true);

      series.unselect();

      series.selectionMode('none');

      series.data(monthsData);

    }

  });

}