JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<!--<div class='ellipse'></div>-->
<svg class="chart" width="420" height="120">
        <g transform="translate(0,0)">
            <rect width="19" height="50"></rect>
            <text y="40" x="9.5" dx=".45em">05</text>
        </g>
        <g transform="translate(20,0)">
            <rect width="19" height="100"></rect>
            <text y="90" x="9.5" dx=".45em">10</text>
        </g>
        <g transform="translate(40,0)">
            <rect width="19" height="120"></rect>
            <text y="110" x="9.5" dx=".45em">12</text>
        </g>
        <g transform="translate(60,0)">
            <rect width="19" height="75"></rect>
            <text y="65" x="9.5" dx=".45em">07</text>
        </g>
    </svg>

CSS

svg rect {
  fill: orange;
}

svg text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

JavaScript

//Ellipse
/*(function() {
  var width = height = 500;

  //Create SVG element
  var svg = d3.select('.ellipse')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  //Create group element
  var g = svg.append('g')
    .attr('transform', function(d, i) {
      return 'translate(10,50)';
    });

  //Create and append ellipse element into group
  var ellipse = g.append('ellipse')
    .attr('cx', 250)
    .attr('cy', 50)
    .attr('rx', 150)
    .attr('ry', 50)
    .style('fill', 'blue');

  //Create and append text element into group
  g.append('text')
    .attr('x', 180)
    .attr('y', 50)
    .attr('stroke', '#fff')
    .text('This is an Ellipse')
    .style('stroke-width', '1.2')
    .style('opacity', '0.9')
    .style('font-size', '20');
})();*/