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/[email protected]/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.css">
<div id="container"></div>

CSS

html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f3f5f6;
}

.chart {
  height: 25%;
  position: relative;
}

.chart >label {
  position: absolute;
  top: 0;
  right: 2em;
}

JavaScript

var interpolators = [
  'linear',
  'smooth',
  'smooth-keep-extremum',
  'step-after'
];

interpolators.forEach(function(name) {
  var div = document.createElement('div');
  div.setAttribute('class', 'chart')
  div.id = name;
  document.getElementById('container').appendChild(div);
  var label = document.createElement('label');
  label.textContent = name;
  div.appendChild(label);
});

interpolators.forEach(function(name) {
  var div = document.getElementById(name);
  var chart = new Taucharts.Chart({
    data: getData(),
    type: 'line',
    x: 'x',
    y: 'y',
    guide: {
      interpolate: name,
      showAnchors: 'always'
    },
    settings: {
      fitModel: 'entire-view'
    }
  });
  chart.renderTo(div);
});

function getData() {
  return [{
    x: 0,
    y: 40
  }, {
    x: 10,
    y: 10
  }, {
    x: 12,
    y: 20
  }, {
    x: 20,
    y: 20
  }, {
    x: 30,
    y: 0
  }, {
    x: 40,
    y: 10
  }, {
    x: 42,
    y: 0
  }, {
    x: 50,
    y: 20
  }];
}