html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set

  var data = anychart.data.set([

    [2012, 707, 157, 286],

    [2013, 669, 145, 367],

    [2014, 632, 389, 404],

    [2015, 655, 193, 389],

    [2016, 574, 164, 354],

    [2017, 931, 114, 411]

  ]);

​

  // create cartesian chart

  var chart = anychart.cartesian();

​

  // set chart title

  chart.title('Orders to Vacate: 2012-2017');

​

  // create first series with mapped data and set it's name

  chart

    .column(

      data.mapAs({

        x: 0,

        value: 1

      })

    )

    .name('Fire Damage');

​

  // create second series with mapped data and set it's name

  chart

    .column(

      data.mapAs({

        x: 0,

        value: 2

      })

    )

    .name('Habitability');

​

  // create third series with mapped data and set it's name

  chart

    .column(

      data.mapAs({

        x: 0,

        value: 3

      })

    )

    .name('Illegal Occupancy');

​

  // enable categorizedBySeries mode

  chart.categorizedBySeries(true);

​

  // enable chart legend

  chart.legend(true);

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});