html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

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

​

    var treeData = anychart.data.tree([

        {id: 1, name: 'Phase 1 - Strategic Plan'},

        {id: 2, name: 'Self-Assessment'},

        {id: 3, name: '14%', parent: 1},

        {id: 4, name: '25%', parent: 2},

        {id: 5, name: 'Define business vision'},

        {id: 6, name: 'Identify available skills'},

        {id: 7, name: 'Decide whether to proceed'},

        {id: 8, name: 'Define the Opportunity'},

        {id: 9, name: 'Research the market and competition'},

        {id: 10, name: 'Interview owners of similar businesses'},

        {id: 11, name: 'Identify needed resources'},

        {id: 12, name: 'Identify operating cost elements'}

    ], 'as-table');

​

    var dataGrid = anychart.standalones.dataGrid();

    dataGrid.data(treeData);

    dataGrid.headerHeight(25);

​

    // Get vertical scroll bar settings.

    var scrollBar = dataGrid.verticalScrollBar();

​

    scrollBar.sliderFill('#F44336');

​

    var getColumn = dataGrid.column(0);

    getColumn.width(60);

​

    dataGrid.bounds(0, 0, '16%', '30%');

    dataGrid.container(stage);

    dataGrid.draw();

});