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 Users per Year</h3>
    <div id="canvas"></div>
  
  </body>
</html>

JavaScript

var chartData = [
  { year: '2014', users: 210 },
  { year: '2015', users: 196 },
  { year: '2016', users: 250 },
  { year: '2017', users: 223 },
  { year: '2018', users: 243 },
];

var chart = new G2.Chart({
  container: 'canvas',
  height: 600,
  width: 600
});

chart.source(chartData);

chart.point()
  .position('year*users')
  .size(6)
  .shape('circle');

chart.line()
  .position('year*users')
  .shape('dash')
  .color('#0066e3');
  
chart.render();