Discrete Color Legend strokeDashes and strokeWidth

[cvalmonte]

The discrete color legend component should include props to style the stroke (dashed, width, etc.) so that it will match the line series in my graphs.

[mcnuttandrew]

I would accept a PR to address this issue!

[olefrank]

StrokeWidth doesn't seem to work.

const legendItems = [
    {
      title: 'Payments',
      color: '#40A695',
      strokeWidth: 6,
    },
    {
      title: 'Expected payments',
      color: '#999',
      strokeStyle: 'dashed',
      strokeWidth: 6,
    },
    {
      title: 'Værkstedsomkostninger',
      color: '#ED7C33',
      strokeWidth: 6,
    },
  ]

...

<DiscreteColorLegend items={this.legendItems} orientation="horizontal" />

[talc23]

Is there a solution?

[kenfehling]

It looks like strokeWidth doesn't work because the parent svg element with class rv-discrete-color-legend-item__color has a preset height of 2, so the maximum stroke width that shows is 2px

[talc23]

I've added this to my css file as a temp WA: .rv-discrete-color-legend-item__color { height: 10px; }

The question is why on the showcase examples the strokewdith works and on installed npm packages it doesn't? for example, I've played with this example on my local react-vis repo: https://github.com/uber/react-vis/blob/master/showcase/plot/clustered-stacked-bar-chart.js

changed code to: <DiscreteColorLegend style={{position: 'absolute', left: '50px', top: '10px'}} orientation="horizontal" items={[ { title: 'Apples', strokeWidth:50 }, { title: 'Oranges', color: '#79C7E3' } ]} />

And got this:

[perryclee]

Running into the same issue with stroke-width not working due to the inline height being set. You'll have to go into /react-vis/es/legends/discrete-color-legend-item.js and change the height in line 57 and then restart your webpage until there is a fix.