Is it possible to have dynamic margin with Nivo line chart?

567 views Asked by At

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).

0

There are 0 answers