html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var chartData = {

    title: 'Flux 0min',

    header: ['#', 'Portal', 'Colon', 'Liver', 'Spleen', 'Head', 'Leg', 'Heart', 'Lung', 'Kidney', 'Skin'],

    rows: [

      ['Glucose', -8065, -10773, 670, -10553, -11737, -15671, 62134, -56035, 14177, -1972],

      ['Lactate', 1244, -1482, 3375, 9119, 17360, -15717, -36256, 4600, -3481, 11360],

      ['3-Hydroxybutyrate', -65, -143, 89, -101, -48, -429, -600, -788, -161, 25],

      ['Valine', 408, 259, -12, 46, 279, 41, 1837, -2107, 250, -42],

      ['Leucine', 276, -6, -10, 317, 299, 744, -1065, 422, 84],

      ['Isoleucine', 79, 99, -56, -4, -26, -83, 650, -610, 51, -73],

      ['Histidine', 43, 19, 29, 29, -1, 51, 132, -64, 36, -4],

      ['Methionine', 92, 54, -30, 63, 40, 151, 330, -214, 90, -16],

      ['Threonine', 573, 1439, -251, 262, 274, 1473, 5218, -3049, 909, -184],

      ['Phenylalanine', 212, 290, -63, -39, 307, 472, 942, -581, 314, 118]

      ['Tryptophan',81, 74, 2, 4, 11, 58, 85, -83, 21, -8]

      ['Tyrosine', 23, 71, 22, -44, 1, 78, 97, -39, 68, 5]

      ['Arginine', 253, 494, -78, 168, -77, 302, 950, -983, 336, 63]

      ['Proline', 509, 526, -11, 139, 215, 374, 2756, -2184, 422, -153]

      ['Cystine', 11, 67, 28, 25, 25, 97, 340, -182, 57, 15]

      ['Glycine', 1309, 919, -105, 419, 723, 1118, 5837, -5941, 412, 139]

      ['Alanine', 703, 270, 137, -54, 605, 423, 2129, -1737, 311, -190]

      ['Glutamine', 5, 27, -2, 167, 154, 274, 1654, -650, -39, -2]

      ['Serine', 66, 21, 15, 59, 57, 181, 348, -233, 338, -12]

      ['Glutamate', 223, 624, 50, -5, 58, -1373, 1088, -1237, -89, -199]

      ['Asparagine', 9, 7, -1, 0, 5, 6, 32, -31, 9, -1]

      ['Aspartate', 14, 17, -4, 0, 7, -2, 37, -22, -1, 1]

      ['C16.0', 460, 234, 70, 239, 156, 618, -1655, 844, 91, 117]

      ['C18.0', 324, 741, 20, 191, -24, 100, -2000, -249, 254, 102]

      ['C18.1', 347, 357, 74, 232, 417, 1533, -3019, 3173, 226, 204]

      ['C18.2', 148, 87, 14, 133, 86, 298, -523, 1084, 22, 54]

      ['C20.4', 32, 42, 1, 60, 14, 49, 48, 105, 19, 12]

    ]

  };

​

  // create column chart

  var chart = anychart.column();

​

  // set chart data

  chart.data(chartData);

​

  // turn on chart animation

  chart.animation(true);

​

  // force chart to stack values by Y scale.

  chart.yScale().stackMode('value');

​

  // chart padding

  chart.padding([10, 20, 5, 20]);

​

  chart.xAxis(0).title('Products').stroke(null);

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

  chart.yAxis(0).title('Profit');

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

​

  // zero marker line

  var zeroMarker = chart.lineMarker(0);

  zeroMarker.stroke('#ddd');

  zeroMarker.scale(chart.yScale());

  zeroMarker.value(0);

​

  // enable and tune grid

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

​

  // tune paddings

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

​

  // turn on legend and set settings

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

​

  chart.interactivity().hoverMode('by-x');

  chart.tooltip().displayMode('union');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});