Formatting axis labels using custom function

Martynas Majeris -

JavaScript Charts provides several ways to automatically format value and category axis labels. However there are some cases when you simply have to assign some custom logic to label formatting.

Introducing labelFunction available in both CategoryAxis and ValueAxis.

First we set up the custom formatter function:

function formatLabel(value, valueString, axis){
  // let's say we dont' want minus sign next to negative numbers
  if(value < 0) {
    valueString = valueString.substr(1);
  // and we also want a letter C to be added next to all labels (you can do it with unit, but anyway)
  valueString = valueString + "C";
  return valueString;


Then we just instruct our value axis to pass all values through this custom function:

valueAxis.labelFunction = formatLabel;


That's it!

It works the same way for category axis labels.

Here's the working example:

Have more questions? Submit a request


  • Avatar
    Collin Strow

    Hi Martynas,

    So my text in my axis labels is too long.... is there a way to create hoverover text?  I want to abbreviated the text for the label and then have a hoverover that has the full text.

    Example: Label could be r.t. and then hoverover reveals that it stands for Resp Time. 

    Kind Regards,


Powered by Zendesk