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

Value Axis Label Formatting

7 Answers 775 Views
Charts
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 21 Oct 2014, 04:38 PM
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!

7 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 22 Oct 2014, 10:05 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shakti
Top achievements
Rank 1
answered on 21 Jun 2017, 08:27 AM
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
0
Iliana Nikolova
Telerik team
answered on 23 Jun 2017, 07:26 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 13 May 2020, 07:22 PM

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)

0
Vessy
Telerik team
answered on 15 May 2020, 01:15 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 15 May 2020, 02:53 PM
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>.
0
Vessy
Telerik team
answered on 19 May 2020, 09:32 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
James
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Shakti
Top achievements
Rank 1
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Vessy
Telerik team
Share this question
or