https://jsfiddle.net/n1smL0g9/

svg-plot.html

<svg id="svg" width="270" height="270" xmlns="http://www.w3.org/2000/svg" stroke-width="5" stroke="#61B000">
<linearGradient id="mainGradient" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="0%" y2="0%"><stop class="stop-right" offset="0" stop-opacity="0" stop-color="green"></stop><stop class="stop-left" offset="1" stop-color="green" stop-opacity=".6"></stop></linearGradient>
  <path id="p1" fill="none" stroke="none"></path>
  <path stroke="green" id="p2" fill="none" stroke-width="2"></path>
</svg>

<script>
var vals = [84307, 80323, 86134, 70500];

function plot (svg, vals) {
    var xmax = +document.getElementById('svg').getAttribute('width');
    var ymax = +document.getElementById('svg').getAttribute('height');
    var valmax = Math.max.apply(Math, vals);

    var strokePath = 'M' + vals
      .map((val, i) => `${(i / (vals.length-1)) * xmax} ${(valmax - vals[i]) / ymax}`)
      .join(' L ')

    var fillPath = `${strokePath} L ${xmax} ${ymax} L ${0} ${ymax} Z`

    $('#p2').attr('d', strokePath)
    $('#p1').attr('d', fillPath)
}
plot(document.getElementById('svg'), vals)
</script>