React-vis: 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:
style={{position: 'absolute', left: '50px', top: '10px'}}
orientation="horizontal"
items={[
{
title: 'Apples',
**strokeWidth:50**
},
{
title: 'Oranges',
color: '#79C7E3'
}
]}
/>

And got this:

[perryclee01]

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.