JSFiddle - React, Tailwind, and code Playground

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="480" height="340"></svg>

CSS

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}

.circle {
  fill: steelblue;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

JavaScript

var data = [{
  period: 'P1',
  target: 2000,
  achieved: 4000
}, {
  period: 'P2',
  target: 4000,
  achieved: 8000
}, {
  period: 'P3',
  target: 4400,
  achieved: 10000
}, {
  period: 'PTD',
  target: 4000,
  achieved: 12000
}];
data.columns = ['period', 'target', 'achieved'];

var svg = d3.select('svg'),
  margin = {
    top: 20,
    right: 100,
    bottom: 30,
    left: 40
  },
  width = +svg.attr('width') - margin.left - margin.right,
  height = +svg.attr('height') - margin.top - margin.bottom,
  g = svg
  .append('g')
  .attr(
    'transform',
    'translate(' + margin.left + ',' + margin.top + ')'
  );

var x0 = d3
  .scaleBand()
  .rangeRound([0, width])
  .paddingInner(1);

var x1 = d3.scaleBand().padding(0.05);

var y = d3.scaleLinear().rangeRound([height, 0]);

var z = d3
  .scaleOrdinal()
  .range([
    '#abc3b3',
    '#9fb4c5',
    '#7b6888',
    '#6b486b',
    '#a05d56',
    '#d0743c',
    '#ff8c00'
  ]);

var keys = data.columns.slice(1);

// gridlines in x axis function
//function make_x_gridlines() {		
    //return d3.axisBottom(x0)
  //      .ticks(5)
//}

// gridlines in y axis function
function make_y_gridlines() {		
    return d3.axisTop(y)
        .ticks(6)
}

// add the X gridlines
//svg.append("g")			
  //.attr("class", "grid")
  //.attr("transform", "translate(0," + height + ")")
  //.call(make_x_gridlines()
    //    .tickSize(-height)
      //  .tickFormat("")
       //)

// add the Y gridlines
svg.append("g")			
  .attr("class", "grid")
  .attr('transform', 'translate(100,15)')
  .call(make_y_gridlines()
        .tickSize(10)
        .tickFormat("")
        .tickSizeInner(-height - 5)
        .tickPadding(-20)
       )

x0.domain(
  data.map(function(d) {
    return d.period;
  })
);

x1.domain(keys).rangeRound([0, x0.bandwidth()]);

y
  .domain([
    0,
    d3.max(data, function(d) {
      return d3.max(keys, function(key) {
        return d[key];
      });
    })
  ])
  .nice();
  
var line = d3.line()
  .x(function(d) {  return...