Search code examples
clojurescriptreact-vis

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

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

Solid lines graph

Specially when I want to make them other than solid:

Dashed lines graph

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?

Solution

  • 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

    1. 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:

    enter image description here