1

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>
Simon
  • 323
  • 2
  • 15
  • Did you find a solution to this? – Algorythmic Jul 08 '20 at 12:14
  • 2
    After some extreme googling I found some reference to an extreme solution around feeding the legend a style tag that runs "absolute positioning", but I feared it would be far too brittle for my taste. In summary : I did not. – Simon Jul 09 '20 at 12:23

1 Answers1

0

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

Saravana K Telapolu
  • 11
  • 1