Customizing the axis labels

[Santhosh]

Hi,

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

[Dharanidharan Dharmasivam]

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. 

https://help.syncfusion.com/aspnetmvc/chart/axis#category-axis  

 

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. 

http://www.syncfusion.com/downloads/support/directtrac/174484/ze/mvc1624464366  

 

Thanks, 

Dharani.