We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to add prefix and suffix for axis labels in Chart?

Essential Chart supports adding prefix and suffix to axis labels using labelFormat property of axis. You can add Prefix and suffix to categorical and numerical axes and it is not applicable for date time axis. Refer to Chart Axis for more information about different types of axis supported by Essential Chart. The following code example explains how to add prefix and suffix to numeric axis.


    primaryXAxis: {
        labelFormat: "${value} K"


The following screenshot displays the primary X axis with “$” as prefix and “K” as suffix.

The prefix and suffix for axis labels in Chart

JS Playground sample link: Label Prefix and Suffix

You must log in to leave a comment
Grant Clark
Sep 08, 2015
Hi SF, Is it possible to format labels for axes and data labels using a custom function? If not, how would one format 1234567 as "$ 1,234,567"? Thanks! Reply
Anandaraj T [Syncfusion]
Sep 09, 2015
Hi Grant, You can also use axesLabelRendering event to achieve your requirement. Please refer the following link for more information about this event http://www.syncfusion.com/kb/3979 Regards, Anandaraj
Anandaraj T [Syncfusion]
Sep 09, 2015
Hi Grant, Currently, it is not possible to use a custom function for formatting axes labels and data labels. However, we can achieve your requirement by setting labelFormat option in axis to “c”. We can also set locale option in Chart to display numbers in specified culture. To achieve this, localization script for the specific culture should be referred. For example to display numbers in French culture, “globalize.culture.fr-Fr.min.js” should be referred and locale option should be set to “fr-FR” and labelFormat option of axis should be set to “n”. Sample to display axis labels in currency format is available in the following JS Playground link http://jsplayground.syncfusion.com/b3b1ckrf Regards, Anandaraj Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile