This is a migrated thread and some comments may be shown as answers.

format numbers as 1.2M instead of full number

9 Answers 1266 Views
Charts
This is a migrated thread and some comments may be shown as answers.
merikmgrasp
Top achievements
Rank 1
merikmgrasp asked on 22 Dec 2011, 07:36 AM
Is it possible to format numbers in the value axis to use "short format" numbers?
1,000,000 => 1.00M
1,234,567 => 1.23M
1,234,567,890 => 1.23B

Is there a format string that the kendo charts support thats similar to something like "{0:C}"? If theres no simple format string to achieve this, is there a way to pass the kendo chart's value axis numbers to a function to format the numbers like this?

Right now, I've resorted to just simply dropping the font size down on the chart value axis. If I don't drop the size down, the numbers will just overlap (I attached chart with the dropped font size):

valueAxis: {
            labels: {
                visible: true,
                format: '{0}',
                font: '7px Arial'
            }
        }

9 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Germanov
Telerik team
answered on 22 Dec 2011, 10:55 AM
Hello Erik,

Thank you for contacting us.

You can pass the axis value to your function that format the axis value. You just need to use template function instead of format function:

function test(value) {
  // Here you can format the value
  return value + "test";
}
....
valueAxis: {
  labels: {
    template: "#= test(value) #",
    font: "7px Arial"  
  }
}
Greetings,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
merikmgrasp
Top achievements
Rank 1
answered on 23 Dec 2011, 07:09 PM
Your suggestion worked. Here is a snippet that I have working for regular integers up to billions in case anyone else needs it:

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;
  }
}
 
....
valueAxis: {
            labels: {
                visible: true,
                //format: ValueAxisLabelsFormat,
                template: "#= FormatLongNumber(value) #"
                //font: '7px Arial'
            }
        },

0
John
Top achievements
Rank 1
answered on 28 Feb 2015, 12:05 AM
Thx for the Q&A. I took this and pushed it into a kendo template in the cshtml file and extended it a bit. Posting here for anyone else who might find it useful.

<script id="kendo-value-axis-label-template" type="text/x-kendo-tmpl">
    # var qualifier = "";
    var format = "{0:n0}{1}";
    var reducedValue = value;
    if (value >= 1000 && value <= 999999) { // thousands
        reducedValue = (value / 1000);
        qualifier = "k";
    } else if (value >= 1000000 && value <= 999999999) { // millions
        reducedValue = (value / 1000000);
        qualifier = "m";
    } else if (value >= 1000000000 && value <= 999999999999) { // billions
        reducedValue = (value / 1000000000);
        qualifier = "b";
    }
    if (qualifier.length > 0 && reducedValue.toFixed(0).length === 1) {
        // if only one digit, allow one digit after decimal
        format = "{0:n1}{1}";
    } #
    #= kendo.format(format, reducedValue, qualifier) #
</script>
0
John
Top achievements
Rank 1
answered on 28 Feb 2015, 12:07 AM
Thanks for the Q&A. I took the solution and pushed it into a kendo template in the cshtml. Posting here for anyone else who might find it useful.

<script id="kendo-value-axis-label-template" type="text/x-kendo-tmpl">
    # var qualifier = "";
    var format = "{0:n0}{1}";
    var reducedValue = value;
    if (value >= 1000 && value <= 999999) { // thousands
        reducedValue = (value / 1000);
        qualifier = "k";
    } else if (value >= 1000000 && value <= 999999999) { // millions
        reducedValue = (value / 1000000);
        qualifier = "m";
    } else if (value >= 1000000000 && value <= 999999999999) { // billions
        reducedValue = (value / 1000000000);
        qualifier = "b";
    }
    if (qualifier.length > 0 && reducedValue.toFixed(0).length === 1) {
        // if only one digit, allow one digit after decimal
        format = "{0:n1}{1}";
    } #
    #= kendo.format(format, reducedValue, qualifier) #
</script>
0
Ed
Top achievements
Rank 1
answered on 16 Apr 2015, 10:38 PM

This looks great for numbers (integers, etc), but how can I do the same for currency?

Since some currencies have the symbol before the number and some have it after, it would be nice to rely on Kendo to properly format it with the appropriate qualifier (i.e. k, m, b).

Thanks,

--Ed

0
Iliana Nikolova
Telerik team
answered on 21 Apr 2015, 03:02 PM
Hi Ed,

In the valueAxis.labels.template you could use custom logic and format the labels in the way you need.  

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ed
Top achievements
Rank 1
answered on 21 Apr 2015, 08:38 PM

Hi Iliana,

My question is more general than just being applied to a chart.

How can I use kendo.format to format a number with shortened qualifiers and still be locale specific with the currency symbol and its placement?

For example:

3700000000 (shorten with de-DE as locale) ==> 3.7b €

1500000 (shorten with en-US as locale) ==> $1.5m

2600 (shorten with de-DE as locale) ==> 2.6k €

Thanks,

--Ed

0
Iliana Nikolova
Telerik team
answered on 24 Apr 2015, 03:47 PM
Hi Ed,

This scenario is not supported at this point. Actually a similar idea has been submitted as a feature request at our UserVoice portal - you may cast a vote, leave a comment or monitor the community's interest in it here. The more votes the suggestion collects, the higher priority will have.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Darren
Top achievements
Rank 2
answered on 04 Jun 2017, 12:05 AM

Another option, if you're already using numeraljs in your project, is this:

...
valueAxis: {
    labels: {
        visible: true,
        template: "#= numeral(value).format('0.0a') #"
    }
},
...

 

This uses numeral's format function to handle the transformation for you. The only caveat is to make sure numeraljs is loaded before your Kendo UI chart - I use the Deferred option to make sure that it is.

Tags
Charts
Asked by
merikmgrasp
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
merikmgrasp
Top achievements
Rank 1
John
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Darren
Top achievements
Rank 2
Share this question
or