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"}

    ], anychart.enums.TreeFillingMethod.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();

});