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>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
	<h3>Number of Utopian Contributions</h3>
	<div id="canvas"></div>
  
  </body>
</html>

JavaScript

var data = [
  { contribution: 'Development', count: 78 },
  { contribution: 'Bug Hunting', count: 96 },
  { contribution: 'Graphics', count: 66 },
  { contribution: 'Analysis', count: 55 },
  { contribution: 'Visibility', count: 103 },
  { contribution: 'Documentation', count: 58 },
  { contribution: 'Tutorials', count: 121 },
  { contribution: 'Video Tutorials', count: 87 },
  { contribution: 'Copywriting', count: 52 },
  { contribution: 'Blog Post', count: 51   },
  { contribution: 'Suggestion', count: 125 },
];
var chart = new G2.Chart({
  container: 'canvas',
  height: 700,
  width: 850
});

chart.source(data);
chart.coord('theta');
chart.intervalStack().position('count').color('contribution')
  .label('contribution*count', {
  content(name, value) {
    return name + ':' + value;
  }
});

chart.render();