title: Reverse the direction of the color in linear gradient legend
body: <p>I have an continuous legend(both vertical and horizontal) and currently the color are flown from red to blue but I want it to be in reverse direction like from blue to red. I have shared by code snippet and also the Fiddle link</p>
  <p>Fiddle Link : <a href="https://jsfiddle.net/64drqnxf/" rel="nofollow noreferrer">https://jsfiddle.net/64drqnxf/</a></p>
  <pre><code>// create the legend
  
  const id = &quot;linear-gradient-&quot; + id + &quot;0&quot;;
  linearGradient = defs
  .append(&quot;linearGradient&quot;)
  .attr(&quot;id&quot;, id)
  .attr(&quot;x1&quot;, &quot;0%&quot;)
  .attr(&quot;x2&quot;, horizontal ? &quot;100%&quot; : &quot;0%&quot;)
  .attr(&quot;y1&quot;, &quot;0%&quot;)
  .attr(&quot;y2&quot;, horizontal ? &quot;0%&quot; : &quot;100%&quot;);
  
  // append the color
  linearGradient
  .selectAll(&quot;stop&quot;)
  .data(itemColor)
  .enter()
  .append(&quot;stop&quot;)
  .attr(&quot;offset&quot;, function (data) {
  return data.offset + &quot;%&quot;;
  })
  .attr(&quot;stop-color&quot;, function (data) {
  return data.color;
  });
  
  // draw the rectangle and fill with gradient
  svgLegend
  .append(&quot;rect&quot;)
  .attr(&quot;x&quot;, 35)
  .attr(&quot;y&quot;, horizontal ? 70 : 18)
  .attr(&quot;width&quot;, horizontal ? &quot;189&quot; : 20)
  .attr(&quot;height&quot;, horizontal ? 20 : &quot;149&quot;)
  .style(&quot;fill&quot;, &quot;url(#&quot; + currentIndex + &quot;)&quot;);
  
  // create tick
  const xLeg = scaleLinear().domain([min, max]).range([10, 158]);
  let yLeg = scaleLinear().domain([max, min]).range([10, 158]);
  
  const horizontalAxisLeg = axisBottom(xLeg).tickValues(colorScale.domain());
  const VerticalAxisLeg = axisRight(yLeg).tickSize(20).tickValues(colorScale.domain());
  
  Also my data is structed something like this
  
  const data = [
  [0.0, 255, 0, 0],
  [0.25, 255, 255, 0],
  [0.5, 0, 255, 0],
  [0.75, 0, 255, 255],
  [1.0, 0, 0, 255]
  ]
  
  Where first value in the array is point and next three values are rgb values.
  0(point) --&gt; color(255, 0, 0)
  </code></pre>