JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="graph"></svg>

CSS

.chartpath {  /*note: not #line-gradient*/
  fill: none;
  stroke: url(#line-gradient);
  stroke-width: 7px;
  stroke-linejoin: "round";
}

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.chartpath_old {
    fill:none;
    stroke: #000;
    stroke-width: 1px;
}

JavaScript

graph_data = [{
  x: 1,
  y: 22
}, {
  x: 2,
  y: 20
}, {
  x: 3,
  y: 10
}, {
  x: 4,
  y: 40
}, {
  x: 5,
  y: 5
}, {
  x: 6,
  y: 30
}, {
  x: 7,
  y: 60
}]

// General definitions
var HEIGHT, MARGINS, WIDTH, formatDay, lineFunc, graph, graph_data, weekdays, x, xAxis, y, yAxis;
WIDTH = 360;
HEIGHT = 130;
MARGINS = {
  top: 20,
  right: 30,
  bottom: 20,
  left: 30
};

graph = d3.select("#graph");

// Define Axes
weekdays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
formatDay = function(d) {
  return weekdays[d % 6];
};

x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
  d3.min(graph_data, function(d) {
    return d.x;
  }), d3.max(graph_data, function(d) {
    return d.x + 1;
  })
]);

y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
  d3.min(graph_data, function(d) {
    return d.y;
  }), d3.max(graph_data, function(d) {
    return d.y;
  })
]);
xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(formatDay);
yAxis = d3.svg.axis().scale(y).tickSize(10).orient("left");

// Line Function
lineFunc = d3.svg.line().x(function(d) {
  return x(d.x);
}).y(function(d) {
  return y(d.y);
}).interpolate("basis");

// Define Line Gradient
graph.append("linearGradient").attr("id", "line-gradient").attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", y(0)).attr("x2", 0).attr("y2", y(60)).selectAll("stop").data([
  {
    offset: "0%",
    color: "#F0A794"
  }, {
    offset: "20%",
    color: "#F0A794"
  }, {
    offset: "20%",
    color: "#E6A36A"
  }, {
    offset: "40%",
    color: "#E6A36A"
  }, {
    offset: "40%",
    color: "#CE9BD2"
  }, {
    offset: "62%",
    color: "#CE9BD2"
  }, {
    offset: "62%",
    color: "#AA96EE"
  }, {
    offset: "82%",
    color: "#AA96EE"
  }, {
    offset: "82%",
    color: "#689BE7"
  }, {
    offset: "90%",
    color: "#689BE7"
  }, {
    offset: "90%",
    color: "#1AA1DF"
  }, {
    offset: "100%",
    color: "#1AA1DF"
 ...