Как прижать линию в библиотеке recharts к краям?

Question

[repcolding]

Данные

const data = [
  {
    name: '2016',
    uv: 0
  },
  {
    name: '2017',
    uv: 1000
  },
  {
    name: '2018',
    uv: 3000
  },
  {
    name: '2019',
    uv: 2000
  },
  {
    name: '2020',
    uv: 2100
  },
  {
    name: '2021',
    uv: 1800
  },
  {
    name: '2022',
    uv: 3490
  },
  {
    name: '2023',
    uv: 5000
  }
]

recharts

<ResponsiveContainer className={styles.chart} height='' width=''>
  <LineChart data={data} margin={{ left: 0, right: 0 }}>
    <Tooltip
      content={<ReTooltip />}
      cursor={{ stroke: 'var(--troy)', strokeWidth: 1, strokeDasharray: 6 }}
    />

    <Line
      type='monotone'
      dataKey='uv'
      strokeWidth='4'
      stroke='var(--metropolis)'
      dot={{ r: 0 }}
      activeDot={{
        r: 8,
        stroke: 'transparent',
        fill: 'var(--gentlemen)'
      }}
    />

    <YAxis hide={true} padding={{ bottom: 30 }} />

    <XAxis
      interval='preserveStartEnd'
      dataKey='name'
      padding={{ left: 42, right: 42 }}
      axisLine={{ stroke: 'var(--fargo)' }}
      tickSize={0}
      tickLine={{
        strokeWidth: 6,
        strokeLinecap: 'round',
        stroke: 'var(--alien)'
      }}
      tick={<ReTick />}
    />
  </LineChart>
</ResponsiveContainer>

Смог настроить вот так:



Не подскажите, можно ли как-то привести к такому виду?:



Необходимо, чтобы линия начиналась и заканчивалась от краев графика

Comments

[webe]

В библиотеку не заглядывал.
а если margin={{ left: -20, right: -20 }}