Hi there,
I’m using a really standard scatter graph:
class SLineGraph extends React.Component {
constructor (props) {
super(props)
const baseConfig = {
displayModeBar: false,
responsive: true
}
const baseLayout = {
autosize: true,
font: {
family: 'Basier Circle Reg',
size: 12,
color: '#6b6b76'
},
margin: {
l: 48,
r: 24,
b: 48,
t: 0
},
legend: {
font: { size: 13, family: 'Basier Circle Med', color: '#333' }
},
yaxis: {
title: 'mm3',
fixedrange: true,
automargin: true
},
xaxis: {
title: 'Days',
fixedrange: true,
automargin: true
}
}
/* Some code on how the plots are generated
const initialState = {
data: plots,
layout: baseLayout,
frames: [],
config: baseConfig
}
this.state = { ...initialState }
}
render () {
return (
<Plot
data={this.state.data}
layout={this.state.layout}
frames={this.state.frames}
config={this.state.config}
onInitialized={(figure) => this.setState(figure)}
onUpdate={(figure) => this.setState(figure)}
style={{ width: '100%', height: '100%' }}
/>
)
}
}
The legend is always cutting off no matter what values I set? Any ideas?
Actual text:
Edit: Removing the style width 100/height 100 prop from the Plot component, graph not fluid to container?