Flexchart

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20183.568/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20183.568/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.568/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.568/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.568/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.568/interop/knockout/wijmo.knockout.min.js"></script>
<div data-bind="wjFlexGrid: { itemsSource: data, childItemsPath: 'children', autoGenerateColumns: false, control: grid, itemFormatter: formatItem}">
	<div data-bind="wjFlexGridColumn: { header: 'Name', binding: 'name', width: 300}"></div>
</div>

CSS

body {
    margin: 40px;
}

.wj-flexchart {
    height: 400px;
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    padding: 8px;
    margin-bottom: 12px;
}

.wj-inputcolor {
    margin-top: 20px;
}

JavaScript

// create and apply application view model
function viewModel1() {

	var self = this;
	this.grid = ko.observable();
   
   var data = [
        { name: 'Albert', children: [
                { name: 'Anton' },
                { name: 'Annette' },
            ] },
        { name: 'Benjamin', children: [
                { name: 'Bridget', children: [
                        { name: 'Billy' },
                        { name: 'Bernard' },
                    ] },
                { name: 'Bella' },
                { name: 'Bob' },
            ] },
        { name: 'Charlie', children: [
                { name: 'Chris' },
                { name: 'Connie' },
                { name: 'Carrie' },
            ] },
        { name: 'Douglas', children: [
                { name: 'Dinah' },
                { name: 'Donald' }
            ] },
    ];
   
    // add data array to scope
    this.data = new wijmo.collections.CollectionView(data);
	
	this.formatItem = function(panel, row, col, cell) {
		if(panel === panel.grid.cells && col === 0) {
			var item = panel.rows[row].dataItem;
			if(!item.children) {
				var padding = ((panel.grid.treeIndent * panel.rows[row].level) + 20);
				cell.style.paddingLeft = padding + 'px';
			}
		}
	}
}

(function() {
    ko.applyBindings(new viewModel1());
})();