How to change the XAxis label's font color by some conditions?

Question

I want to change XAxis label's font color by some specific conditions? I mean I want to do it in asp.net core controller, because I initialize the ChartProperties object in action method of the controller and save it in ViewData. On cshtml, I render the chart by using the following code:

@{Html.EJ().Chart("container", (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); }

How to achieve it?

Please see the screenshot for more information. Screenshot

Dharanidharan Dharmasivam · Answer

Hi Xavier, 

Thanks for using our products. 

We have analyzed your query. Your requirement can be achieved using the client side loaded event. In the loaded event, you can able to get the chart model properties, with this you can able to customize the axis labels. We have prepared a sample in which, we have changed the color of x axis labels. You can change this with respect to your requirement. Find the code snippet below to achieve your requirement. 





ASP.NET Core 

[Controller]: 
            ChartProperties chartModel = new ChartProperties(); 
            InitializeChart(chartModel); 
            //Passing chart properties in the ViewData 
            ViewData["ChartModel"] = chartModel; 
 
private void InitializeChart(ChartProperties chartModel) 
        { 
           chartModel.Loaded = "chartLoaded"; 
          //... 
        } 

[View page]: 

@{Html.EJ().Chart("container", (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); } 
 
    function chartLoaded(sender) { 
         //Chart model properties 
          var chartModelProperties = sender.model; 
          var xAxisText = $("#" + this._id + "_svg_XAxisLabels_0")[0]; 
           
        //Change this condition with respect to your scenario 
          for (var i = 0; i < xAxisText.children.length; i++) { 
              var currentText = xAxisText.children[i].innerHTML; 
              if (currentText == "Jan") xAxisText.children[i].setAttribute("fill", "Red"); 
                     //... 
          } 
   } 


Screenshot: 
  

Sample for reference can be find form below link. 
http://www.syncfusion.com/downloads/support/forum/135279/ze/chartSample-868574340  
 
Kindly revert us, if you have any concerns. 

Thanks, 
Dharani.

Timo · Answer

Hi Xavier,

Thanks for using our products.

We have analyzed your query. Your requirement can be achieved using the client side loaded event. In the loaded event, you can able to get the chart model properties, with this you can able to customize the axis labels. We have prepared a sample in which, we have changed the color of x axis labels. You can change this with respect to your requirement. Find the code snippet below to achieve your requirement.

ASP.NET Core

[Controller]:

ChartProperties chartModel = new ChartProperties();

InitializeChart(chartModel);

//Passing chart properties in the ViewData

ViewData["ChartModel"] = chartModel;

private void InitializeChart(ChartProperties chartModel)

{

chartModel.Loaded = "chartLoaded";

//...

}

[View page]:

@{Html.EJ().Chart("container", (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); }

function chartLoaded(sender) {

//Chart model properties

var chartModelProperties = sender.model;

var xAxisText = $("#" + this._id + "_svg_XAxisLabels_0")[0];

//Change this condition with respect to your scenario

for (var i = 0; i < xAxisText.children.length; i++) {

var currentText = xAxisText.children[i].innerHTML;

if (currentText == "Jan") xAxisText.children[i].setAttribute("fill", "Red");

//...

}

Screenshot:

Sample for reference can be find form below link.

http://www.syncfusion.com/downloads/support/forum/135279/ze/chartSample-868574340

Kindly revert us, if you have any concerns.

Thanks,

Dharani.

Dharanidharan Dharmasivam · Answer

Hi Xavier, 
 
Thanks for your update. 
 
We have analyzed your queries. Find the response for your queries below. 
 





Query 

Response 


Performance 

Regarding the performance lags in chart, we have updated the details in the forum 135230, so kindly follow up  with the forum 135230 for further details. 
 


Customize the XAixs label's font color 

As of now, when you specify the font color in the axis, then all the axis labels will render with the specified color. If you need to customize the color for each label, then it is possible only with client side events as stated earlier in our previous update (1/3/2018).  
 
Kindly find the code snippet to specify the axis label color below. 
 




ASP.NET Core: 
 
[Controller]: 
 
ChartProperties chartModel = new ChartProperties(); 
chartModel.PrimaryXAxis.Font.Color = "Red"; 
 
 
So, kindly customize the axis label color using the client side events. 
  
 
Kindly revert us, if you have any concerns. 
 
Thanks, 
Dharani.