CODEWITHSUNDEEP
javascriptreactjsreact-vis
Nikita Aplin
Nikita Aplin

Reputation: 377

Horizontal legend React-vis

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)} />

Upvotes: 1

Views: 864

Answers (1)

Jake Solomon
Jake Solomon

Reputation: 21

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.

Upvotes: 1

Related Questions