How to hide grid lines but retain the origin line

Question

Hi,1.Is it possible to add an origin line at 0 point of the y-axis for charts that have both positive and negative value?I know that you can enable/disable majorGridLines, but what I want is just a line (horizontal) from 0 point of Y axis.Is this possible?2.Is it possible to make the SplineAreaChart display the line and area color in red if y-axis value is below 0 and green if value above zero? Thank you!

Sriram Kiran Senthilkumar · Accepted Answer

Hi Pavitrakumar,Greetings from Syncfusion. Query #1: Is it possible to add an origin line at 0 point of the
y-axis for charts that have both positive and negative value?We have checked your query and we would like to let you know that
you can use the crossesAt feature available in the Chart widget to
achieve your requirement. Please check the code snippet below for reference.

SfCartesianChart(
               
  primaryXAxis: NumericAxis(
                 
  majorGridLines: const MajorGridLines(width: 0),
                  crossesAt:
  0,
                ),
                primaryYAxis:
  NumericAxis(
                  majorGridLines:
  const MajorGridLines(width: 0)),
  )

Please find the user guide documentation link for crossesAt
feature below.https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-crossingQuery #2: Is it possible to make the SplineAreaChart display the
line and area color in red if y-axis value is below 0 and green if value above
zero?Yes, it's possible. We have created a simple sample in which we
have used SplineArea chart with both positive and negative data points and with
the help of onCreateShader
callback and onActualRangeChanged
event, we have achieved your requirement to display the spline area color in
red or green based on negative or positive y data point value. We have attached
the sample below for reference. Also appended the user guide documentation links for onCreateShader
and onActualRangeChanged.https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreateshaderhttps://help.syncfusion.com/flutter/cartesian-charts/callbacks#onactualrangechangedPlease check and get back to us if you require further assistance.Regards,Sriram KiranAttachment: f176943_b4c99ec9.zip

pavitrakumar · Answer

Hi Sriram,Thank you for your detailed reply.Both your solutions helped solve the issue - Thank you! :)Few follow-up UI doubts:1.How can I apply the same gradient method to the border?At the moment, I have something like this:LinearGradient gradient = LinearGradient( colors: [Colors.green, Colors.red], stops: [0.6, 1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter)But it's not quite like the resolution you proposed. Can you help with this? Just code in reply is enough - no need to attach files. 2.This is unrelated to charts, but on the same topic of UI: How can I change the color of the text (page numbers etc.,) in the pagination of the datatables? Right now, I have wrapped SfDataPager with SfTheme with themedata's brightness as Brightness.dark. I'm not able to find how I can change the text color alone to white - is this possible?Thank you very much!

Sriram Kiran Senthilkumar · Answer

Hi pavitrakumar,We have checked your queries and provided the responses below.Query #1: How can I apply the same gradient method to the border?We have checked the above query and we would like to let you know that currently, we do not have support to add custom border gradient in spline area series. Sorry for the inconvenience.Query #2: How can I change the color of the text (page numbers etc.,) in the pagination of the datatables?You can change the text color of the SfDataPager item by setting the required text style in theSfDataPagerThemeData.itemTextStyle property. Also, DataGrid supports loading the Text widget with the font color through the pageItemBuilder property. Please check the following code snippet.@override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(title: const Text('PageNavigation Demo')),        body: LayoutBuilder(builder: (context, constraints) {          return Column(children: [            SizedBox(                height: constraints.maxHeight - 60,                child: buildDataGrid(constraints)),            SizedBox(              height: 60,              child: SfTheme(                data: SfThemeData(                      dataPagerThemeData: SfDataPagerThemeData(                            itemTextStyle: const TextStyle(color: Colors.white))),                       child: SfDataPager(                                  pageCount: pageCount,                                  controller: dataPagerController,                                  delegate: _employeeDataSource),              ),            ),          ]);        }));  }We have already provided examples of customizing the appearance of the data pager in our UG documentation. Please go through this,UG Documentation: https://help.syncfusion.com/flutter/datagrid/paging#appearanceWe hope this helps. Please let us know if you require any further assistance with this.Regards,Sriram Kiran

pavitrakumar · Answer

Great, that solves everything! Thank you!

Sriram Kiran Senthilkumar · Answer

Hi Pavitrakumar,Most welcome. Kindly get back to us if you have further queries. We are always happy to assist you.Regards,Sriram Kiran

David OGUNDEPO · Answer

Hello Sriram, can I use your assistance with the Datagrid widget?

Sangavi Periyannan · Answer

David,Please provide more details about your query.  This would be helpful for us to serve you.