How to make legend's line wider in a react-vis XYPlot

Question

The DiscreteColorLegends of an XYPlot are a little narrow for me:

Specially when I want to make them other than solid:

I browsed the documentation, and even the source code; I think that the length is determined in line 59 of this file: https://github.com/uber/react-vis/blob/master/packages/react-vis/src/legends/discrete-color-legend-item.js :

d="M 0, 1 L 14, 1"

Can I change it in my own local source code?

Answer 1

I found a 'semi' solution. I'm not proud of it, but maybe can help others. I did two things:

1. After compiling (with clojure -A:fig:min), I changed the string cited above using sed (28 doubled the size of the legend):

sed -i 's/"M 0, 1 L 14, 1"/"M 0, 1 L 28, 1"/' dev-main.js

2. Then, in the file legends.css, I changed this:

.rv-discrete-color-legend-item__title {
  margin-left: 10px;
}

into this:

.rv-discrete-color-legend-item__title {
  margin-left: 20px;
}

Now, al least, it looks better: