Chart with Gradient

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { border: 1px solid #ccc; }
  </style>
</head>

<body>
  <style>
    svg{
      border: 1px solid #ccc;
    }
  </style>
<div id='container'></div>

var data = [
    {x: 0, y: 100}, 
    {x: 10, y: 110}, 
    {x: 20, y: 140},
    {x: 30, y: 130}, 
    {x: 40, y: 80}, 
    {x: 50, y: 75},
    {x: 60, y: 120}, 
    {x: 70, y: 130}, 
    {x: 80, y: 100},
];

var margin = {top: 60, bottom: 50, left: 40, right: 30}, axisPadding = 0;
var width = 400, height = 300;
var svgWidth = width + margin.left + margin.right,
    svgHeight = height + margin.top + margin.bottom;

var xMax = Math.round(d3.max(data, function(d,i){ return d.x; }) * 1.05);
var yMax = Math.round(d3.max(data, function(d,i){ return d.y; }) * 1.05);

var xScale = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, yMax])
    .range([0, height]);

// create a svg canvas
var svg = d3.select('#container')
    .append('svg')
    .attr({
        width: svgWidth,
        height: svgHeight,
    });

// define gradient pattern
var defs = svg.append('defs')
defs
    .append('linearGradient')
    .attr('id', 'gPattern')
    .html(
    '<stop offset="0%" stop-color="#333" />' +
    '<stop offset="100%" stop-color="#f00" />'
    )
defs
    .append('linearGradient')
    .attr('id', 'gradient')
    .attr({
        "xlink:href": "#gPattern",
        x1: "0%",
        y1: "100%",
        x2: "0%",
        y2: "0%",
    })

// create line graph
var graph = svg.append('g')
    .attr('transform', 'translate(' + [margin.left, height + margin.top] + ')');
var line = d3.svg.area()
    .x(function(d,i){ return xScale(d.x)})
    .y(function(d,i){ return -yScale(d.y)})
    .y0(0);
graph.append('path')
    .attr({
        d: line(data),
        fill: 'url(#gradient)',
        stroke: 'blue',
        'stroke-width': 2
    });

// creat left axis
var leftAxisGroup = svg.append('g')
    .attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')')

var leftAxis = d3.svg.axis()
    .orient('left')
    .tickPadding(5)
    .tickSize(-width - axisPadding, 0)
    .scale(yScale.copy().domain([yMax, 0]));
leftAxisGroup.call(leftAxis)
styleAxis(leftAxisGroup)

// creat y-axis arrow
leftAxisGroup.append('g')
    .attr('class', 'yArrow')
    .attr('transform', 'rotate(-90)')
    .append('path')
    .attr('d', Arrow())
    .attr({
        fill: 'none',
        'stroke-width': 1,
        stroke: 'black',
});

// creat bottom axis
var bottomAxisGroup = svg.append('g')
    .attr('transform', 'translate(' + [margin.left, margin.top + height + axisPadding] + ')');
var bottomAxis = d3.svg.axis()
    .orient('bottom')
    .tickPadding(5)
    .tickSize(-height - axisPadding, 0)
    .scale(xScale);
bottomAxisGroup.call(bottomAxis);
styleAxis(bottomAxisGroup)

// creat x-axis arrow
bottomAxisGroup.append('g')
    .attr('class', 'xArrow')
    .attr('transform', 'translate(' + [width, 0] + ')')
    .append('path')
    .attr('d', Arrow())
    .attr({
        fill: 'none',
        'stroke-width': 1,
        stroke: 'black',
});

svg.append('text')
    .text('Sale Performance')
    .attr({
        x: svgWidth / 2,
        y: margin.top / 2,
        'text-anchor': 'middle',
        'font-size': '20px',
        'font-family': 'sans-serif',
    })

</script>
</body>

https://d3js.org/d3.v3.min.js