html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var chartData = {

    title: 'Company Profit Dynamic in Regions by Year',

    header: ['#', 'Florida', 'Texas', 'Nevada', 'Arizona'],

    rows: [

      ['2001', 128.14, -90.54, -43.76, -122.56],

      ['2002', 112.61, 104.19, 61.34, -87.12],

      ['2003', -123.21, 135.12, -34.17, 54.32]

    ]

  };

​

  // create column chart

  var chart = anychart.column();

​

  // set chart data

  chart.data(chartData);

​

  // turn on chart animation

  chart.animation(true);

​

  // set chart title text settings

  chart.interactivity().hoverMode('single');

​

  // set axis settings

  chart.xAxis().value(0).labels(false);

  chart.xAxis(1).stroke(null).orientation('top');

  chart.xAxis(2).stroke(null).orientation('bottom');

  chart.yAxis().title('Profit in $');

  chart.yAxis().labels().format('{%Value}k.');

​

  chart.labels(true);

  chart

    .tooltip()

    .title(false)

    .separator(false)

    .format('{%Name} {%Value}{decimalSeparator:\\,}k.');

​

  // turn on legend

  chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);

​

  // turn on grids

  chart.xGrid().stroke('#ddd').drawLastLine(false);

​

  // tune column paddings

  // chart.barsPadding(0.1).barGroupsPadding(0.9);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});