JSFiddle - React, Tailwind, and code Playground

by @gentlemanoi

HTML

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h3>Number of Git Actions</h3>
	<div id="canvas"></div>
  
</body>
</html>

JavaScript

var data = [
  { action: 'Forks', value: 125 },
  { action: 'Commits', value: 84 },
  { action: 'Pull Requests', value: 54 },
  { action: 'Merged', value: 32 }
];

var chart = new G2.Chart({
  container: 'canvas',
  height: 500,
  width: 1000
});
chart.source(data); 
chart.axis(false);
chart.coord('rect').scale(1, -1).transpose();

chart.intervalSymmetric()
  .shape('pyramid')
  .color('action', [ '#004D40', '#00796B', '#009688', '#4DB6AC', '#B2DFDB' ])
  .position('action*value')
  .label('action*value', {
  labelLine: {
    lineWidth: 1
  },
  content(name, value){
    return name + " : " + value;
  }
});

chart.render();