I'm using d3.js to generate area chart filled with gradient. Colors of gradient depends on presented value. Problem is, that when three values next to each other differ significantly, middle color doesn't shows up. Problem appears only in chrome.

this.defs.append("linearGradient")
      .attr("id", 'color-gradient')
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0)
      .attr("x2", width)
      .selectAll("stop")
      .data(data)
      .join("stop")
      .attr("offset", d => {
        return d.position / width;
      })
      .attr("stop-color", d => {
        return this.getColor(d.value)
      })
      .attr('stop-opacity', 0.4);

Expected result (in firefox):

Actual result in chrome:

How can I fix this? Thank you for Your help