JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<svg id="mySVG" width="500" height="500" style="border:1px solid black">
  <polyline id="line" fill="none" stroke="red" stroke-width="2"/>
  <polyline id="area" fill="rgba(255, 0, 0, 0.3)"/>
</svg>

<script>
  const data = [1, 0, 5, 4, 8, 10, 15, 10, 5, 4];
  const svgWidth = 500;
  const svgHeight = 500;
  const dataMax = Math.max(...data);
  const horizontalStep = svgWidth / (data.length - 1);

  const points = data.map((value, index) => ({
    x: index * horizontalStep,
    y: svgHeight - (value / dataMax * svgHeight),
  }));

  const linePoints = points.map(point => `${point.x},${point.y}`).join(' ');
  document.getElementById('line').setAttribute('points', linePoints);

  const areaPoints = `${points[0].x},${svgHeight} ${linePoints} ${points[points.length-1].x},${svgHeight}`;
  document.getElementById('area').setAttribute('points', areaPoints);
</script>

</body>

</html>