JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<div id="container">
  <svg id="chart" width="600" height="200"
    viewBox="0 0 600 200"
    perserveAspectRatio="xMinYMid">
    <circle r="100" cx="100" cy="100" fill="red"></circle>
    <circle r="100" cx="300" cy="100" fill="green"></circle>
    <circle r="100" cx="500" cy="100" fill="blue"></circle>
  </svg>
</div>

CSS

#container {
    margin: 20px;
}
#chart {
    background-color: #eee;
}
#chart circle {
    fill-opacity: .8;
}

JavaScript

var chart = $("#chart"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();
$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");