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. Image for the cookie policy date

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

@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()

chart.png


1 Reply

SB Swetha Babu Syncfusion Team December 12, 2022 05:22 AM UTC

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


Loader.
Up arrow icon