JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vector</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript" src="https://unpkg.com/realchart/vector.js"></script>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
	
</script>

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	<script type="text/javascript" src="https://unpkg.com/realchart/vector.js"></script>

		 </body></html>

JavaScript

const config = {
  title: 'Vector Series',
  inverted: true,
  xAxis: {
    title: 'X Axis'
  },
  yAxis: {},
  series: {
    type: 'vector',
    tooltipText: 'length: ${length}<br>angle: ${angle}',
    data: [[5, 5, 190, 95], [5, 10, 185, 105], [5, 15, 180, 105], [5, 20, 175, 115], [5, 25, 170, 115], [5, 30, 165, 125], [5, 35, 160, 125], [5, 40, 155, 135], [5, 45, 150, 135], [5, 50, 145, 145], [5, 55, 140, 145], [5, 60, 135, 155], [5, 65, 130, 155], [5, 70, 125, 175], [5, 75, 120, 175], [5, 80, 115, 175], [5, 85, 110, 175], [5, 90, 105, 175], [5, 95, 100, 175], [10, 5, 185, 95], [10, 10, 180, 105], [10, 15, 175, 105], [10, 20, 170, 115], [10, 25, 165, 115], [10, 30, 160, 125], [10, 35, 155, 125], [10, 40, 150, 135], [10, 45, 145, 135], [10, 50, 140, 145], [10, 55, 135, 145], [10, 60, 130, 155], [10, 65, 125, 155], [10, 70, 120, 175], [10, 75, 115, 175], [10, 80, 110, 175], [10, 85, 105, 175], [10, 90, 100, 175], [10, 95, 95, 175], [15, 5, 180, 95], [15, 10, 175, 105], [15, 15, 170, 105], [15, 20, 165, 115], [15, 25, 160, 115], [15, 30, 155, 125], [15, 35, 150, 125], [15, 40, 145, 135], [15, 45, 140, 135], [15, 50, 135, 145], [15, 55, 130, 145], [15, 60, 125, 155], [15, 65, 120, 155], [15, 70, 115, 175], [15, 75, 110, 175], [15, 80, 105, 175], [15, 85, 100, 175], [15, 90, 95, 175], [15, 95, 90, 175], [20, 5, 175, 95], [20, 10, 170, 105], [20, 15, 165, 105], [20, 20, 160, 115], [20, 25, 155, 115], [20, 30, 150, 125], [20, 35, 145, 125], [20, 40, 140, 135], [20, 45, 135, 135], [20, 50, 130, 145], [20, 55, 125, 145], [20, 60, 120, 155], [20, 65, 115, 155], [20, 70, 110, 175], [20, 75, 105, 175], [20, 80, 100, 175], [20, 85, 95, 175], [20, 90, 90, 175], [20, 95, 85, 175], [25, 5, 170, 95], [25, 10, 165, 105], [25, 15, 160, 105], [25, 20, 155, 115], [25, 25, 150, 115], [25, 30, 145, 125], [25, 35, 140, 125], [25, 40, 135, 135], [25, 45, 130, 135], [25, 50, 125, 145], [25, 55, 120, 145], [25, 60, 115, 155], [25, 65, 110, 155], [25, 70, 105, 175], [25, 75, 100, 175],...