html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var data = preprocessData([

    ['2016', 'Rel 04', 18],

    ['2016', 'Rel 06', 13],

    ['2016', 'Rel 10', 17],

    ['2017', 'Rel 02', 4],

    ['2017', 'Rel 04', 13],

    ['2017', 'Rel 06', 12],

    ['2017', 'Rel 08', 6],

    ['2017', 'Rel 10', 17],

    ['2018', 'Rel 02', 12],

    ['2018', 'Rel 06', 9],

    ['2018', 'Rel 10', 15]

  ]);

​

  var chart = anychart.column();

​

  // configure global settings for series labels

  chart.labels({position:'top'});

​

  // add subcategory names to the meta of one of the series

  chart.column(data.mapAs({'year': 0, 'value': 2, 'sub-category': 1}));

​

  // use subcategory names as names of X-axis ticks

  chart.xScale().names('sub-category');

​

  chart.xAxis().labels().rotation(90);

  chart.xAxis().labels().anchor("center");

  chart.xAxis().overlapMode('allow-overlap');

​

  // set a container and draw the chart

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

​

  // calculate extra axes

  createTwoLevelAxis(chart, data);

});

​

function preprocessData(data){

  // to make beautiful spacing between categories, add

  // several empty lines with the same category names to the data

  if (data.length > 0) {

    // add one to the beginning of the array

    data.unshift([data[0][0]]);

    // add one more to the end of the data

    data.push([data[data.length - 1][0]]);

    // add two empty items every time the category name changes,

    // to each category

    for (var i = 2; i < data.length - 1; i++) {

      var previous = data[i-1][0];

      var current = data[i][0];

      if (current!=previous) {

        data.splice(i, 0, [previous], [current]);

        i = i+2;

      } 

      else {

        data.splice(i, 0, [previous]);

        i += 1;

      }

    }

  }

  return anychart.data.set(data);

}

​

function createTwoLevelAxis(chart, data, padding){

  // subcategory names

  var names = [];

  // ticks for axes based on on main categories

  var ticks = [];

  // weights of ticks (to make spacing between categories by using

  // the empty lines created in preprocessData)

  var weights = [];

  // the iterator feature allows us to go over data, so

  // create an iterator for the new breakdown

  var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator();

  while(iter.advance()) {

    var name = iter.get('category');

    var value = iter.get('sub-category');

    // store category names

    names.push(name);

    // when the border between categories is identified, create a tick

    if (name && names[names.length - 1] != names[names.length - 2])                     {

      ticks.push(iter.getIndex());

    }

    // assign weight to the tick

    weights.push(value?0.5:0.2);

  }

​

  // create a custom scale

  var customScale = anychart.scales.ordinal();

  // supply values from the chart to the scale

  customScale.values(chart.xScale().values());

  // names and ticks of main categories only

  customScale.names(names);

  customScale.ticks(ticks);

​

  // synchronize weights with the chart scale

  chart.xScale().weights(weights);

​

  // disable ticks along the main axis

  chart.xAxis(0).ticks(false);

​

  // create an extra chart axis

  chart.xAxis(1)

    .scale(customScale)

    .orientation('top')

    .ticks(true);

​

  chart.xAxis(1).ticks().length(60).position('center');

  chart.xAxis(1).labels().offsetY(30);

​

  chart.xGrid(0).scale(customScale);

​

  chart.title('Year / Release');

​

  //format tooltip title

  chart.tooltip().titleFormat("{%year}");

​

  //format tooltip body

  chart.tooltip().format("{%sub-category}: {%value}");

}