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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
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.

JS

 

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

JS Playground sample link: Label Prefix and Suffix

Article ID: Published Date: Last Revised Date: Platform: Control:
3892 02/12/2015 08/10/2015 JavaScript ejChart
Did you find this information helpful?
Comments
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
Add Comment
You must log in to leave a comment

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