Horizontal legend React-vis

Question

I have a problem with horizontal legend in React-vis. I used this props orientation="horizontal", but nothing...

<DiscreteColorLegend width={2000} orientation="horizontal" items={json.items.map((item) => item.name)} colors={json.items.map((item) => item.color)} />

Can you edit your question to provide `json.items`? – technogeek1995 Aug 13 '19 at 13:50 — technogeek1995, Aug 13 '19 at 13:50
Have you included the style sheet with your application? – technogeek1995 Sep 06 '19 at 15:48 — technogeek1995, Sep 06 '19 at 15:48

score 1 · Answer 1 · answered Dec 28 '19 at 23:27

I just worked through this issue myself. In my case, the stylesheet wasn't being properly referenced. I did try to import it at the top of my js file like so:

import '../../../../node_modules/react-vis/dist/style.css';

But, I later found that the styles only actually worked once I copied my style.css file from /node_modules/react-vis/dist into app/assets/stylesheets, where my application.css file has a require_tree statement that includes the style sheet in question.

This is a bit of a bootleg workaround, as importing the stylesheet from its home in /node_modules/react-vis/dist is probably best practice, but it worked for me.

Horizontal legend React-vis

1 Answers1