Hi,
I have questions as I'm trying to format the value of the charts and its labels.
I used this but not working on my end. Can you check what am I missing on this.
1.) Convert to Dollar amount and round to millions also to lessen space and show properly.
<ChartSeries> {series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{visible: true}} data={item.data} name={item.name} format="c0"> <ChartSeriesLabels format="c0"/> </ChartSeriesItem> )} </ChartSeries>
2. I'm trying to round it to the Millions and used FormatLongNumber function where should I call/put this?
function FormatLongNumber(value) {
if (value == 0) {
return 0;
}
else {
// for testing
//value = Math.floor(Math.random()*1001);
// hundreds
if (value <= 999) {
return value;
}
// thousands
else if (value >= 1000 && value <= 999999) {
return (value / 1000) + 'K';
}
// millions
else if (value >= 1000000 && value <= 999999999) {
return (value / 1000000) + 'M';
}
// billions
else if (value >= 1000000000 && value <= 999999999999) {
return (value / 1000000000) + 'B';
}
else
return value;
}
}3.) How to convert this to MMM/YYYY format?
here is the data I'm passing
[
"1/24/2022",
"2/8/2022",
"2/21/2022",
"4/13/2022",
"5/5/2022",
"5/17/2022",
"6/8/2022",
"6/14/2022",
"6/22/2022",
"6/24/2022",
"6/27/2022",
"7/27/2022",
"8/1/2022",
"8/12/2022",
"9/28/2022",
"9/30/2022",
"10/12/2022",
"12/13/2022",
"12/16/2022",
"12/19/2022",
"12/30/2022",
"1/24/2023",
"1/26/2023",
"1/27/2023"
]I'm attaching my html file for full reference. Thank you in advance!
1 Answer, 1 is accepted
Hello, ErL,
The values can be rounder by using the content prop of the ChartSeriesItem and formatting the value.
In regard to the third question, the ChartCategoryAxisItem format can be passed to the labels with the desired format.
I made an example that showcases both approaches here:
https://stackblitz.com/edit/react-fug4wm-vpgrym?file=app/main.jsx
I hope this helps.
Regards,
Filip
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.