score:2

Accepted answer

You could separate legend into two groups based on the data- one for the bars and another for dashed lines:

For the bar legend:

barLegend.append('rect')
  .attr('x', this.state.width * 0.96)
  .attr('width', this.state.width * 0.025)
  .attr('height', this.state.width * 0.025)
  .attr('fill', z);

For the line legend: 

lineLegend.append('line')
      .attr('x1', this.state.width * 0.96 )
      .attr('x2', (this.state.width * 0.96) + 30)
      .attr('y1', 10)
      .attr('y2', 10)
      .style('stroke-dasharray','5,5')
      .style('stroke', z);

score:0

Figured it out. Used part of @valangars answer but added filters on both sections to only allocate the legend element with their desired style.

.filter(function(d){
  return(d === 'dashed line data name');
  })
  .attr('x1', this.state.width * 0.96 )
  .attr('x2', (this.state.width * 0.96) + 30)
  .attr('y1', 10)
  .attr('y2', 10)
  .style('stroke-dasharray','5,5')
  .style('stroke', z);

Thanks!


Related Query

More Query from same tag