JSFiddle - React, Tailwind, and code Playground
by Rishi Kumar
HTML
<svg height="250" version="1.1" width="450" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-95" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; cursor: default; vertical-align: middle; position: relative; left: -0.5px; background-color: rgb(255, 255, 255);"><desc></desc><defs><clipPath id="rr-41AABD32-E7CD-4D8C-A9AB-140A531EE738"><rect x="15" y="46.599999999999994" width="420" height="193.4" transform="matrix(1,0,0,1,0,0)"></rect></clipPath><clipPath id="rr-60CF75AB-6D9E-4017-B137-265869955D49"><rect x="15" y="46.599999999999994" width="420" height="193.4" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-96-parentgroup"><g class="raphael-group-97-background"><rect x="0" y="0" width="450" height="250" stroke="none" fill-opacity="1" fill="#ffffff" ry="0" rx="0"></rect><rect x="0" y="0" width="450" height="250" stroke="#767575" stroke-opacity="0.5" stroke-width="0" stroke-dasharray="none" fill="none" ry="0" rx="0"></rect></g><g class="raphael-group-116-canvas"></g><g class="raphael-group-99-belowplot"></g><g class="raphael-group-98-axisbottom"><g class="raphael-group-135-dataset-Trend-group-bottom"><g class="raphael-group-142-dataset-axis-trend-bottom"></g></g></g><g class="raphael-group-118-axisReferenceVisualsFloor" clip-path="url('#rr-41AABD32-E7CD-4D8C-A9AB-140A531EE738')"></g><g class="raphael-group-117-axisReferenceVisualsBottom"></g><g class="raphael-group-119-crossline"></g><g class="raphael-group-120-crosslineBottom"></g><g class="raphael-group-123-axisReferenceVisualsMiddle" clip-path="url('#rr-60CF75AB-6D9E-4017-B137-265869955D49')"></g><g class="raphael-group-125-quadrant"></g><g class="raphael-group-100-plots"><g class="raphael-group-127-column-shadow-group"></g><g class="raphael-group-128-column"></g><g class="raphael-group-129-area-shadow-group"></g><g class="raphael-group-130-area"></g><g class="raphael-group-131-line-shadow-group"></g><g...