format numbers as 1.2M instead of full number

[merikmgrasp]

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'
            }
        }

[Hristo Germanov]

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

[merikmgrasp]

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'

            }

        },

[John]

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>

[John]

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>

[Ed]

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

[Iliana Dyankova]

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

 

 

[Ed]

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

[Iliana Dyankova]

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

 

 

[Darren]

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.