legend should take svg patterns

[brandonmp]

I can fill series with SVG patterns like so:

<GradientDefs>
                <pattern
                    id="boxplot_lines"
                    width="4"
                    height="4"
                    patternUnits="userSpaceOnUse"
                >
                    <path
                        className="vx-pattern-line"
                        d="M 0,4 l 4,-4 M -1,1 l 2,-2
        M 3,5 l 2,-2"
                        stroke="#82c91e"
                        strokeWidth="1"
                        strokeLinecap="square"
                        shapeRendering="auto"
                    />
                </pattern>
            </GradientDefs>

<HorizontalBarSeries
                stroke={'white'}
                color={'url(#boxplot_lines)'}
                data={props.data}
            />

However, when I try the same with the color prop of Legend items, the item doesn't render:

 <DiscreteColorLegend
                orientation={'horizontal'}
                items={[
                    { title: 'some title', color: 'url(#boxplot_lines)' }
                ]}
            />

this is what legend looks like when color='blue':

[martin-luo]

Hi

Thanks for the solution for SVG texturing. I just got the same issue and it looks like the one you provided works.

Just want to chase up, does Legend now supports svg pattern?

Thanks in advance

Martin

[mcnuttandrew]

@Wattenberger This seems similar to the stuff you were doing, wanna take a look?

[Wattenberger]

Yes! #994 actually solves this

The default path is a bit thin to show off a pattern like that, but if you also add a higher strokeWidth, that should look good. Here's a modified search example:

items={[
  {title: 'Apples', color: 'url(#boxplot_lines)'},
  {title: 'Bananas', color: 'url(#boxplot_lines)', strokeWidth: 13},
  ...
]}

[jckr]

would love to see what you're building with react-vis @Wattenberger @brandonmp

[mcnuttandrew]

@Wattenberger awesome! Will you add an example of this to the docs so we can show it off?

[Wattenberger]

Sure thing! PR here #1001