[Bug]: Why large value hides on yAxis - Line Chart?

[alamenai]

Tremor Version

latest

Link to minimal reproduction

None

Steps to reproduce

I started using the Line Chart component to display the investment values, these values are in thousands and millions.

I have noticed that these values are hidden in my chart:

( See the chart y axis values)

Code

"use client"

import { Card, Title, LineChart as TremorLineChart } from "@tremor/react"

import { CardDescription, CardTitle } from "@/components/ui/card"

export const LineChart = ({ data }: { data: any }) => {
  const timeSeries =
    data &&
    data["Time-Series"].map((serie: any) => ({
      remainingCredit: serie["Remaining Credit"].toFixed(),
      discountCashFlow: serie["Accumulated Discounted period Cashflows"].toFixed(),
    }))

  const valueFormatter = (number: number) => `${new Intl.NumberFormat("de").format(number).toString()}`

  return (
    <div className='w-full'>
      <CardTitle className='text-lg'>Export/Import Growth Rates (1970 to 2021)</CardTitle>
      <CardDescription>ji</CardDescription>
      <TremorLineChart
        className='mt-6'
        data={timeSeries}
        index='year'
        categories={["remainingCredit", "discountCashFlow"]}
        colors={["rose", "lime"]}
        valueFormatter={valueFormatter}
        yAxisWidth={40}
        showAnimation
        showGridLines={false}
        animationDuration={2000}
        curveType='monotone'
      />
    </div>
  )
}

What is expected?

The values should have fit width while the chart should have responsive width.

What is actually happening?

The chart component froce the y axis to stretch the layout.

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

[christopherkindl]

Hi @MenaiAla, use the prop 'yAxisWidth' to make the label space bigger! :)

[alamenai]

Thank you @christopherkindl for your help <3.