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.
Unfortunately, activation email could not send to your email. Please try again.

Customizing the axis labels

Thread ID:

Created:

Updated:

Platform:

Replies:

129248 Mar 7,2017 04:14 AM Mar 8,2017 08:06 AM ASP.NET MVC 1
loading
Tags: Chart
Santhosh
Asked On March 7, 2017 04:14 AM

Hi,

Can I customize the axis labels to string rather than number?

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 8, 2017 08:06 AM

Hi Santhosh, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query. As of now we can use category axis for primaryXAxis , in which you can specify the values in string format and so that you can deal with text in x axis labels. Find the code snippet below. 
 
ASP.NET MVC: 
 
@(Html.EJ().Chart("container") 
        .PrimaryXAxis(pr=>pr.ValueType(AxisValueType.Category)) 
       .Series(ser => 
              { 
                  ser.Points(po => 
                      { 
                          po.X("USA").Y(0).Add(); 
                          po.X("China").Y(1).Add(); 
                          po.X("Japan").Y(2).Add(); 
                          po.X("Australia").Y(3).Add(); 
                          po.X("France").Y(4).Add();                       
                    }).Add(); 
              }) 
//... 
) 
 
Screenshot:  
 
For more information on category axis, follow the below link. 
 
Y axis will render with numeric values only, so your requirement can be achieved as work around by using AxesLabelRendering event. In this we can able to customize the axis labels. Also, you need to specify the range to y axis, so that we can consider the labels as indexes and can bind the desired text. In this sample we have specified values for min, max, interval as 0, 4 and 1 respectively. Find the code snippet below. 
 
[CSHTML] 
 
@(Html.EJ().Chart("container") 
.PrimaryYAxis(py=>py.Range(ra=>ra.Interval(1).Min(0).Max(4))) 
.AxesLabelRendering("axesLabels") 
//... 
 
) 
 
window.count = 0; 
    function axesLabels(sender) { 
        if (sender.data.axis.orientation == "vertical") { 
            var yLabels = ["label 1", "label 2", "label 3", "label 4", "label 5"]; 
            sender.data.label.Text = yLabels[window.count]; 
            window.count++; 
            if (window.count == 5) window.count = 0; 
        } 
    } 
 
Screenshot: 
 
Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;