I have a React project where I use @nivo/line to build a line chart. I see that I could specify the margin of the chart using props of the nivo component. But if I set the margin to 0 I can't see the ticks and legends.
I wonder if there's a way to have dynamic margins according to ticks and legends.
My code :
<ResponsiveLine
areaOpacity={0.1}
axisBottom={{
orient: 'bottom',
tickSize: 8,
tickPadding: 8,
tickRotation: 0,
tickValues: 'every month',
}}
axisLeft={{
orient: 'left',
tickSize: 8,
tickPadding: 8,
tickRotation: 0,
}}
axisRight={null}
axisTop={null}
curve="monotoneX"
data={data}
enableArea
enableGridX={false}
enablePoints={false}
lineWidth={2}
margin={{ top: 32, right: 56, bottom: 32, left: 56 }} // TODO: check if possible to have dynamic margins
motionConfig="default"
useMesh
xFormat={`time:${iso8601Format}`}
xScale={{ type: 'time', format: iso8601Format }}
yScale={{
type: 'linear',
min: 0,
max: 'auto',
stacked: true,
reverse: false,
}}
/>
I tried to set the margin to "auto" but it didn't work (the chart went blank).