html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set stage

  var stage = anychart.graphics.create("container");

​

  //chart

​

  // set data

  var data = anychart.data.set([

    ['FULL PROGRAM FORECAST', 228, 53]

  ]);

​

  // map the data

  var seriesData1_1 = data.mapAs({x: 0, value: 1});

  var seriesData1_2 = data.mapAs({x: 0, value: 2});

​

  // set chart

  var chart = anychart.column();

​

  // create waterfall series

  chart.column()

    .data(seriesData1_1)

    .name('Application processing costs')

    .fill('#032e50')

    .normal()

    .stroke('#032e50');

​

  // create waterfall series

  chart.column()

    .data(seriesData1_2)

    .name('Refunds')

    .fill('#d99c61')

    .normal()

    .stroke('#d99c61');

​

  var scale = chart.yScale();

  // Set scale maximum.

  scale.maximum(400);

​

  scale.stackMode("value");

  // Set the stacking direction

  scale.stackDirection("reverse")

​

  // set labels settings

  chart.labels()

    .enabled(true)

    .fontColor('#fff')

    .position('center');

​

  // set legend settings

  chart.legend().enabled(false);

​

  // set line markers

  var lineMarker = chart.lineMarker(0);

  lineMarker.value(281);

  lineMarker.stroke({

    // set stroke thickness

    thickness: 2,

    // set stroke color

    color: "#1388ca",

  });

​

  var lineMarker2 = chart.lineMarker(1);

  lineMarker2.value(362);

  lineMarker2.stroke({

    // set stroke thickness

    thickness: 2,

    // set stroke color

    color: "#1388ca",

  });

​

  // chart size and position

  chart.bounds(0, 0, "30%", "100%");

​

  // draw

  chart.container(stage);

  chart.draw();

​

  var label2 = anychart.standalones.label();

​

  // Set label text.

  label2.text("$81M");

  label2.offsetX(100);

  label2.offsetY(120);

  label2.fontColor("#1388ca");

​

  label2.container(stage);

  label2.draw();

​

  //chart 2

​

  // set data

  var data2 = anychart.data.set([

    ['FY12-17 ACTUAL', 198, 42],

    ['FY18 FORECAST', 11, 2],

    ['FY19 FORECAST', 9, 4],

    ['FY20 & BEYOND FORECAST', 10, 5]

  ]);

​

  // map the data

  var seriesData2_1 = data2.mapAs({x: 0, value: 1});

  var seriesData2_2 = data2.mapAs({x: 0, value: 2});

​

  // create a waterfall chart

  var chart2 = anychart.waterfall();

​

  // create waterfall series

  chart2.waterfall()

    .data(seriesData2_1)

    .name('Application processing costs')

    .fill('#547287')

    .risingFill('#547287')

    .fallingFill('#547287')

    .normal()

    .stroke('#547287')

    .risingStroke('#547287')

    .fallingStroke('#547287');

​

  // create waterfall series

  chart2.waterfall()

    .data(seriesData2_2)

    .name('Refunds')

    .fill('#d99c61')

    .risingFill('#d99c61')

    .fallingFill('#d99c61')

    .normal()

    .stroke('#d99c61')

    .risingStroke('#d99c61')

    .fallingStroke('#d99c61');

​

  var scale2 = chart2.yScale();

  // Set scale maximum.

  scale2.maximum(400);

​

  // set labels settings

  chart2.labels()

    .enabled(true)

    .fontColor('#fff')

    .position('center');

​

  // set legend settings

  chart2.legend()

    .enabled(true)

    .itemsSourceMode('default')

    .itemsLayout("vertical-expandable")

    .position("bottom")

    .align("right")

    .positionMode("inside")

    .itemsFormatter(function(items){

    // push into items array

    items.push({

      // set text of a new item

      text: "Remaining funds for unexpected expenses",

      iconFill: "#1388ca"

    },

               {

      // set text of a new item

      text: "Cumulative costs",

      iconStroke: "#ad431c",

      iconType: "line"

    });

    // return items array

    return items;

  });

​

  // configure connectors

  chart2.connectorStroke("#ad431c", 2, "2");

​

  // set line marker

  var lineMarker3 = chart2.lineMarker();

  lineMarker3.value(362);

  lineMarker3.stroke({

    // set stroke thickness

    thickness: 2,

    // set stroke color

    color: "#ad431c",

    // set dashes and gaps

    dash: "2 4"

  });

​

  // make labels smaller

  chart2.xAxis().labels().fontSize(8);

​

  // disable yAxis

  chart2.yAxis().enabled(false);

​

  // chart size and position

  chart2.bounds("30%", 0, "70%", "100%");

​

  // draw

  chart2.container(stage);

  chart2.draw();

​

  var label = anychart.standalones.label();

​

  // Set label text.

  label.text("Application fees collected $362M");

  label.offsetX(280);

  label.offsetY(50);

  label.fontColor("#ad431c");

​

  label.container(stage);

  label.draw();

});