React Vis : Legend style and position

Question

The below code gives me a picture, but the legend is a bit naff.

SO won't let me upload a picture right now, but the legend is stuck in the bottom left corner... and it's tiny.

Is there a way to take control of the legend position and / or boost text size etc etc?

<div style={{height: "90vh", width: "95vw"}}>
                    <FlexibleXYPlot
                        xType="time"
                        colorType="category"
                        // onMouseLeave={this._onMouseLeave}
                        // style={{bottom:'50', top:'50'}}
                        // margin={{left: 40, right: 10, top: 30, bottom: 85}}
                    >
                        <DiscreteColorLegend
                            // onItemClick={this.clickHandler}
                            orientation="horizontal"

                            // width={180}
                            items={series.map(series => {
                                // console.log(series.props.colour+"");
                                return {title: series.props.color+"", color: series.props.color}
                            })
                            }
                        />
                        <HorizontalGridLines/>
                        <XAxis top={0} title="Dates"/>
                        <YAxis title="Price"/>
                        {series}
                    </FlexibleXYPlot>
                </div>

Answer 1

Try moving DiscreteColorLegend outside of FlexibleXYPlot (insted of being nested inside FlexibleXYPlot).