[Bug]: Why large value hides on yAxis - Line Chart?
alamenai opened this issue · comments
Ala Eddine Menai commented
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 commented
Hi @MenaiAla, use the prop 'yAxisWidth' to make the label space bigger! :)
Ala Eddine Menai commented
Thank you @christopherkindl for your help <3.