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, autoGenerateColumns: false, selectionChanged: selChange, control: grid}">
	<div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country'}"></div>
	<div data-bind="wjFlexGridColumn: { header: 'Sales', binding: 'sales'}"></div>
	<div data-bind="wjFlexGridColumn: { header: 'Expenses', binding: 'expenses'}"></div>
	<div data-bind="wjFlexGridColumn: { header: 'Downloads', binding: 'downloads'}"></div>
</div>
<div data-bind="text: currentItem().country"></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();
    // generate some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
	var self = this;
    // add data array to scope
    this.data = new wijmo.collections.CollectionView(data);
	this.currentItem = ko.observable(this.data.currentItem);
	
	this.selChange = function(data, s, e) {
		self.currentItem(s.collectionView.currentItem);
	}
}

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