visibleMinimum and visibleMaximum properties not Identified on any Axis

[Dhruv Datta]

Hello team would gladly appreciate some help in this issue!

Whenever I create any type of axis, in an SfCartesian chart, be it numeric, or Datetime, or category, Android Studio IDE and the dart compiler identify the visibleMinimum and visibleMaximum properties as 'not defined'. 

I am using Syncfusion flutter charts version 26.1.39

IDE error:

Dart Compiler error:

The code I am using for the graph: 

SfCartesianChart(
primaryXAxis: DateTimeAxis(
visibleMinimum:DateTime.now().subtract(Duration(days: 23)), //this line of code gives an issue
isVisible: true,
autoScrollingDelta: timeFrame,
// intervalType: DateTimeIntervalType.days,
// enableAutoIntervalOnZooming: false,
// interval: 10,
),

primaryYAxis: NumericAxis(
plotBands: <PlotBand>[
PlotBand(
start: goal,
end: goal,
borderWidth: 2,
borderColor: Colors.blue,
dashArray: const <double>[4, 5])
],
opposedPosition: true,
enableAutoIntervalOnZooming: false,
),

series: <CartesianSeries>[
SplineSeries<DataPoint, DateTime>(
dataSource: data,
xValueMapper: (DataPoint data, _) => data.x,
yValueMapper: (DataPoint data, _) => data.y,
markerSettings: const MarkerSettings(isVisible: true),
dataLabelSettings: const DataLabelSettings(isVisible: true),
),
],

trackballBehavior: TrackballBehavior(
lineWidth: 2,
enable: true,
lineColor: Colors.black,
tooltipSettings: const InteractiveTooltip(
enable: true,
color: Colors.green,
),
),

onActualRangeChanged: (ActualRangeChangedArgs args) {
WidgetsBinding.instance.addPostFrameCallback((_) {
findDateRange(args);
setState(() {});
});
},

//allow scrolling below
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
zoomMode: ZoomMode.x,
),
),

Thank you for building such an amazing UI library, awaiting your response patiently!

[Preethika Selvam]

Hi Dhruv,

We would like to inform you that we have made chart performance improvements in the Volume 4, 2023 release. As part of this, the visibleMinimum and visibleMaximum properties of primaryXAxis and primaryYAxis has been changed to initialVisibleMinimum and initialVisibleMaximum.

Additionally we have not handled the initialVisibleMinimum and initialVisibleMaximum properties dynamically. These properties will only update through the DateTimeAxisController. We have considered these properties as two-way properties and have mentioned this in the breaking changes. Please find the user guide documentation, breaking and nullability enhancement changes below.

UG links for load time update:

https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#initial-visible-minimum

https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#initial-visible-maximum

UG links for dynamic update:

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderercreated-axis

Release notes: Flutter Release Notes
KB Link: Release - Nullability Enhancements

Regards,
Preethika Selvam.

[Dhruv Datta]

Thank you for the reply! It has been some time since I had used syncfusion, so I was unaware of these changes, the new implementation works perfectly for me.

[Preethika Selvam]

Hi Dhruv,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Preethika Selvam.

[Leonard Gasi]

Hi,

Are you sure that setting visibleMinimum and visibleMaximum work as expected?
I've tried to set up these properties with the controller and nothing happens. I tried to check the values immediately after I set them and the values returned are the old ones, so basically setting visibleMinimum and visibleMaximum does nothing.

Please provide an example that works correctly beside what is written in the documentation, because there it is just written how to assign these values but no example is shown and it actually doesn't work.

Thank you.

EDIT: I've debugged your code and I can say 100% that visibleMinimum and visibleMaximum are not updated with the setters

[Preethika Selvam]

Hi Leonard,

As per your request, we have prepared a sample to dynamically update the initialVisibleMinimum and initialVisibleMaximum properties using an axis controller by referring to our user guide. It is working fine as expected. We have shared user guide documentation, code snippet and a sample for your reference. You can modify the axis controller type based on your axis type.

UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderercreated-axis

Code snippet:

 DateTimeAxisController? _xAxisRenderer;

  final List<ChartData> chartData = <ChartData>[

    ChartData(DateTime(2023, 7, 1), 24),

    ChartData(DateTime(2023, 7, 2), 20),

    ChartData(DateTime(2023, 7, 3), 23),

    ChartData(DateTime(2023, 7, 4), 57),

    ChartData(DateTime(2023, 7, 5), 30),

    ChartData(DateTime(2023, 7, 6), 41),

  ];

 

  @override

  Widget build(BuildContext context) {

    return Column(

      children: <Widget>[

        SfCartesianChart(

          primaryXAxis: DateTimeAxis(

            dateFormat: DateFormat.yMd(),

            // Initialize the onRendererCreated.

            onRendererCreated: (DateTimeAxisController controller) {

              _xAxisRenderer = controller;

            },

            // Sets the initialVisibleMinimum.

            initialVisibleMinimum: DateTime(2023, 7, 3),

            // Sets the initialVisibleMaximum.

            initialVisibleMaximum: DateTime(2023, 7, 4),

          ),

          series: <LineSeries<ChartData, DateTime>>[

            LineSeries<ChartData, DateTime>(

              animationDuration: 0,

              dataSource: chartData,

              xValueMapper: (ChartData chartData, _) => chartData.x,

              yValueMapper: (ChartData chartData, _) => chartData.y,

            ),

          ],

        ),

        ElevatedButton(

          onPressed: () {

            // Update the initialVisibleMinimum.

            _xAxisRenderer?.visibleMinimum = DateTime(2023, 7, 1);

            // Update the initialVisibleMaximum.

            _xAxisRenderer?.visibleMaximum = DateTime(2023, 7, 6);

          },

          child: const Text('Update Visible Range '),

        ),

      ],

If you still face any issue, we kindly request you to try replicating the reported issue in the test sample attached below. Please revert to us so that we can assist you in a better way.

Regards,

Preethika Selvam.

Attachment: fr189035_(2)_23d8870b.zip

[Ethan Patrick]

hen encountering issues with the visibleMinimum and visibleMaximum properties not being recognized in Syncfusion's SfCartesianChart, it's essential to ensure compatibility between the widget's version and the properties you're implementing. These properties are designed to define the visible range of an axis, allowing for precise control over the data displayed within the chart.

Possible Causes and Solutions:

Version Compatibility: The visibleMinimum and visibleMaximum properties have undergone changes in different versions of the Syncfusion Flutter Charts package. If you're using a version where these properties are deprecated or modified, they might not be recognized.

Solution: Verify that you're using a version of the Syncfusion Flutter Charts package that supports these properties. Reviewing the Syncfusion Flutter Charts documentation can provide insights into version-specific implementations.

Property Misplacement: Ensure that these properties are applied to the correct axis type. For instance, if you're working with a DateTimeAxis, the properties should be set within its configuration.

Example:

primaryXAxis: DateTimeAxis(
  visibleMinimum: DateTime.now().subtract(Duration(days: 30)),
  visibleMaximum: DateTime.now(),
),

IDE and Compiler Errors: If your IDE or Dart compiler indicates that these properties are undefined, it might be due to outdated package versions or missing imports.

Solution: Ensure that your project's dependencies are up-to-date by running flutter pub get and that the necessary Syncfusion packages are correctly imported.

Additional Resources:

For a comprehensive guide on axis customization, refer to Syncfusion's official documentation on Axis customization in Flutter Cartesian Charts.

Discussions on similar issues can be found in Syncfusion's community forums, such as the thread on visibleMinimum and visibleMaximum properties not identified.

If you're seeking expert assistance to enhance your Flutter applications, consider collaborating with experienced flutter developers who can provide tailored solutions to your challenges.

By ensuring compatibility and proper implementation, you can effectively utilize the visibleMinimum and visibleMaximum properties to control the data visualization in your charts.

[Baranibharathi Pandian]

Hi Ethan Patrick,

 

Thank you for your suggestion. Please feel free to reach out if you have any further queries. We are always happy to assist you.

 

Regards, 

Baranibharathi P.