JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.5/data-set.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
	<h3>Number of Users per Age</h3>
	<div id="container"></div>
  <div id="datenRaw"></div>
  <div id="daten"></div>
</body>
</html>

JavaScript

var data = [
  {"name" : "John", "age" : 20},
  {"name" : "Mary", "age" : 23},
  {"name" : "Susan", "age" : 22},
  {"name" : "Bernard", "age" : 19},
  {"name" : "Joe", "age" : 20},
  {"name" : "Elen", "age" : 22},
  {"name" : "George", "age" : 22},
  {"name" : "Michael", "age" : 21},
];

var dataSet = new DataSet();
var newData = dataSet.createView('test')
.source(data)
.transform({
  as: [ 'count' ],
  groupBy: [ 'age' ],
  type: 'aggregate'
});
document.getElementById("daten").innerText = newData;
var chart = new G2.Chart({
  container: 'container', // container ID
  width : 600, // width of chart
  height : 600 // height of chart
});
chart.source(data);
chart.interval().position('name*age').shape('circle').color('red').opacity(0.3);
chart.render();