Value Axis Label Formatting

[James]

Hello,

I have the value axis labels shown in the "current" screenshot.  I'm hoping to format them as shown in the "desired" screenshot, ie. displaying "25000" as "$25k".  I am able to add the "$" and "k" using valueAxis.labels.format.  But I'm unable to perform math on the value itself or remove the last two zeros.

Any help is greatly appreciated.

Thanks!

[Iliana Dyankova]

Hi James,

For this requirements you can use valueAxis.labels.template. For example: 

$("#chart").kendoChart({
  //....
  valueAxis: {
     labels: {
        template: "#= shortLabels(value) #"
     }
  }
});

function shortLabels(value){
    return kendo.toString((value / 1000), "$\\ #") + "k";
}

Regards,
Iliana Nikolova
Telerik

 

 

[Shakti]

HI Team
I am facing similar Issue, In my Case ShortLabel functions call multiple times even after it displayed on UI.
I have Short Label Function Like
function shortLabels(value) {

    if (chartLabelDimension === undefined) {
        return kendo.format('{0:N2}', kendo.parseInt(value));
    }
    else if (chartLabelDimension.length > 0 && chartLabelDimension == "K")
        return kendo.toString((value / 1000)) + chartLabelDimension;
    else if (chartLabelDimension.length > 0 && chartLabelDimension == "M")
        return kendo.toString((value / 1000000)) + chartLabelDimension;
    else if (chartLabelDimension.length > 0 && chartLabelDimension == "B")
        return kendo.toString((value / 1000000000)) + chartLabelDimension;
    else
        return kendo.format('{0:N2}', kendo.parseInt(value));

    //return kendo.toString((value / 10000), "$\\ #") + "M";
}

So when  it call Short Label . It get chartLabelDimension  == Undefined 
and Chart Custom labels get lost

[Iliana Dyankova]

Hi Shakti,

The shortLabels function will be executed for every label. I tested the provided code snippet and it seems to work as expected on my side (attached is an example). Could you please modify my example and try to demonstrate the problem - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Progress Telerik

[Lee]

I tried this using kendoUI for JQuery and I get shortLabels is not defined. 

Uncaught ReferenceError: shortLabels is not defined
    at eval (eval at compile (kendo.all.js:234), <anonymous>:3:66)
    at init.axisLabelText (kendo.all.js:164694)
    at init.createAxisLabel (kendo.all.js:166447)
    at init.createLabels (kendo.all.js:164263)
    at init (kendo.all.js:164228)
    at new init (kendo.all.js:166285)
    at r.createValueAxes (kendo.all.js:177848)
    at render (kendo.all.js:177325)
    at r.init (kendo.all.js:175725)
    at new r (kendo.all.js:82)

[Vessy]

Hi Lee,

The shortLabels function in the sample attached by Iliana is used inside the labels template of the chart and is defined just below the chart's creation logic. Can you, please, confirm that you have this function defined at your as well?

You can see a runnable sample of the same here: https://dojo.telerik.com/upAQuPuQ

Regards,
Vessy
Progress Telerik

[Lee]

Thanks, Vessy. I found the issue is that I'm using webpack to compile the code and it appears that the Kendo UI template tries to run the function after the code is compiled so that function doesn't exist. I was able to make it work by using a function from a JavaScript library (moment.js in my case) that wasn't part of the compiled JavaScript and was included in the body of the html via <script type="text/javascript" src=...></script>.

[Vessy]

Hi,

Thanks a lot for the update and the shared solution, Lee. I am really glad that you have found the root of the problem and the chart is functioning properly now.

Regards,
Vessy
Progress Telerik