The chart is missing when I set the visibleMinimum and the visibleMaximum

[Quang Minh Nguy?n]

Hi Syncfusion team, first, thank you guy for the great UI Lib
I have a question, related to the Line chart, for example when I have a lot of data, and then I have to set the initial Min and Max (min = 0 and max = 2), so for the first time the UI shows, seem like a part of the chart is missing, and the user might not know that they can scroll horizontally.

The first time I enter the screen containing the chart: the chart is just 2 lines, but there is more than that, it must have a third line to indicate that we can scroll to the right to view more.

After scrolling horizontally, the chart now looks fine, we have another line, and the user will know they can scroll right.

What do I need to do to make the chart show this third line, for the first time?

My code:

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List chartData = [
      Data2(2010, 35),
      Data2(2011, 28),
      Data2(2012, 34),
      Data2(2013, 32),
      Data2(2014, 40)
    ];

    return Container(
        child: SfCartesianChart(
            primaryXAxis: CategoryAxis(
              visibleMinimum: 0,
              visibleMaximum: 2,
            ),
            zoomPanBehavior: ZoomPanBehavior(
              enablePanning: true,
              enablePinching: true,
            ),
            series: [
          // Renders line chart
          LineSeries, int>(
              dataSource: chartData,
              xValueMapper: (Data2 data, _) => data.x,
              yValueMapper: (Data2 data, _) => data.y)
        ]));
  }
}

class Data2 {
  Data2(this.x, this.y);

  final int x;
  final double y;
}

Thank you so much and have a nice day!

[Yuvaraj Gajaraj]

Hi Quang,

In the shared code snippet you have used the category axis, the points are rendered based on the index only. In your code snippet, you have given a visible range from 0 to 2, so it takes data points in 0,1, and 2. If you want to show the line connecting from 2 to 3 you just need to set the visibleMaximum range between those points like 2.1. We have shared the code snippet below for your reference.

Code snippet:

primaryXAxis: CategoryAxis(

visibleMinimum: 0,

visibleMaximum: 2.1,

)

Screenshot:

Regards,

Yuvaraj.

[Quang Minh Nguy?n]

Hi Yuvaraj Gajaraj, first, thank you for your reply.
After I set the visibleMaximum to 2.1, the Chart is still missing for the first time.
I guess on your side, you set the visibleMaximum to 2.1 and hot reload, right, after hot reload, the chart is good, but if you rebuild the app, the chart still missing when you enter the screen for the first time.

My temporary solution is to render a full chart and wrap it by SingleChildScrollView with the scroll direction is horizontal, or the second solution is to wait for a second and setState(). But I'm still looking for an official solution. 

Regards,

[Yuvaraj Gajaraj]

Hi Quang,

We have thoroughly checked and confirmed that the 3rd line is being rendered correctly during the initial rendering. Based on our analysis, it appears that you may be using an older version of our chart control. We have recently included an improvement related to this issue, and therefore, we kindly request that you upgrade your chart package version to the latest one. Also shared is the sample which is used for testing below for your reference.

If you still facing an issue with the latest version, we kindly request you to replicate the reported issue in the below-attached test sample and revert us so that it will help assist you in a better way.

Regards,

Yuvaraj.

Attachment: f180937_2bd65c75.zip