d3

#d3 stuff and hacks

• if you want your line to be exact 1px stroke use .attr('shape-rendering', 'crispEdges') or use in coordinates (x/y).5

• show of simple horizontal gradient

const defs = d3.select(`#graph-id`).select('defs');
defs
  .append('linearGradient')
  .attr('id', 'default-area-gradient')
  .attr('gradientUnits', 'userSpaceOnUse')
  .attr('x1', '0%')
  .attr('y1', '100%')
  .attr('x2', '0%')
  .attr('y2', '0%')
  .selectAll('stop')
  .data([
    { offset: '0%', color: '#000000', opacity: '0' },
    { offset: '10%', color: '#000000', opacity: '0.2' },
    { offset: '80%', color: '#ffffff', opacity: '0.8' },
    { offset: '100%', color: '#ffffff', opacity: '1' },
  ])
  .enter()
  .append('stop')
  .attr('offset', function(d: any): any {
    return d.offset;
  })
  .attr('stop-color', function(d: any): any {
    return d.color;
  })
  .attr('stop-opacity', function(d: any): any {
    return d.opacity;
  });