JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
<div>
<div id="target1" class="c"></div>
<div id="target2" class="c"></div>
<div id="target3" class="c"></div>
</div>

CSS

.c {
  border: solid 1px gray;
  width: 220px;
  height: 220px;
  margin: 0;
  padding: 0;
  float: left;
}

JavaScript

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'xx',
  y: 'yy',
	data: [
  	{'xx': 'A', 'yy': 'X'},
    {'xx': 'B', 'yy': 'Y'},
    {'xx': 'C', 'yy': 'Z'}
  ],
  settings: {
  	fitModel: 'fit-width'
  }
});

chart.renderTo('#target1');

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'xx',
  y: 'yy',
	data: [
  	{'xx': 'A', 'yy': 'X'},
    {'xx': 'B', 'yy': 'Y'},
    {'xx': 'C', 'yy': 'Z'}
  ],
  settings: {
  	fitModel: 'fit-height'
  }
});

chart.renderTo('#target2');

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'xx',
  y: 'yy',
	data: [
  	{'xx': 'A', 'yy': 'X'},
    {'xx': 'B', 'yy': 'Y'},
    {'xx': 'C', 'yy': 'Z'}
  ],
  settings: {
  	fitModel: 'minimal'
  }
});

chart.renderTo('#target3');