How to change the font color of XAxis labels with some conditions if the value % >= 100 is red?

[Maulana Aripianto]

@Html.EJS().Chart("DirectSection").Margin(x => x.Bottom(-10).Left(0).Right(0)).ChartArea(ca => ca.Border(br => br.Width(0))).PrimaryYAxis(px => px.LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0))

).Width("100%").Height("45%").Axes(axis =>

{

axis.Name("Secondary Axis")

.Minimum(0).LabelFormat("{value}%")

.OpposedPosition(true).Add();

}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).CrossesAt(0).Interval(1).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0)).LineStyle(ls => ls.Width(0))

).Series(series =>

{

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)

.Marker(mr => mr.DataLabel(dl => dl.Visible(true).EnableRotation(true).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Bottom))).XName("x")

.YName("yValue").DataSource(ViewBag.dataDirectOvertime).Name("MMA").Width(2).Add();

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)

.Marker(mr => mr.DataLabel(dl => dl.Visible(true).EnableRotation(true).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Bottom))).XName("x").

YName("yValue1").DataSource(ViewBag.dataDirectOvertime).Name("Act").Width(2).Add();

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area)

.Name("Budget")

.XName("x")

.YName("yValue3")

.Width(2)

.DataSource(ViewBag.dataDirectOvertime)

.Opacity(0.6).Add();

series.YAxisName("Secondary Axis").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).XName("x").YName("yValue2").Marker(mr => mr.Visible(true).Height(6).Width(6).DataLabel(dl => dl.Visible(true).EnableRotation(false).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Top))).DataSource(ViewBag.dataDirectOvertime).Name("%").Width(2).Add();

}).Tooltip(tt => tt.Enable(true)).Crosshair(cr => cr.Enable(true)).Palettes(ViewBag.seriesColorsDirectOvertime).Render()

[Swetha Babu]

Hi Maulana,

Greetings from Syncfusion

We can change the color of the data label that is greater than 100 by using the color property in the font argument of the TextRender event of the chart. We have created a MVC application using the provided code snippet to demonstrate the same and it can be downloaded from the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chart-727774754

Code Snippet:

var labelChange = function (args) {

        if (parseFloat(args.text) > 100) {

            args.font.color = "red";

        }

    }

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha