JSFiddle - React, Tailwind, and code Playground

by philgyford

HTML

<html>
    <head></head>
    <body>
        <div id="chart-references"></div>
    </body>
</html>

CSS

.chart rect {
	fill: #333;
}

JavaScript

var data = [
    {'name': 'Jan 1660', 'percent': 42, value: 13},
    {'name': 'Feb 1660', 'percent': 71, value: 20},
    {'name': 'Mar 1660', 'percent': 87, value: 26},
    {'name': 'Apr 1660', 'percent': 77, value: 24},
    {'name': 'May 1660', 'percent': 84, value: 26}
];

var width = 400;
var height = 200;

var chart = d3.select('#chart-references').append('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height);

var x = d3.scale.ordinal()
        .domain(d3.range(data.length))
        .rangeRoundBands([0, width], 0);

// Function to scale each bar relative to the max height of the chart.
var y = d3.scale.linear()
        .domain([0, 100])
        .range([0, chart.style('height')]);

// Add the horizontal lines in the background.
chart.selectAll('line')
        .data(y.ticks(4))
    .enter().append('line')
        .attr('x1', 0)
        .attr('x2', width)
        .attr('y1', y)
        .attr('y2', y)
        .style('stroke', '#999')
        .style('stroke-width', 1);

// Draw the actual bars themselves.
chart.selectAll('rect')
        .data(data)
    .enter().append('rect')
        .attr('x', function(d,i){ return x(d.name); })
        .attr('width', x.rangeBand())
        .attr('height', function(d,i){ return y(d.percent); });