Manage Large data | Candle Chart Stucks | Scrolling to see all data

[Muhammad Zahid Ramzan]

Hi, I'm working on a financial app and using Candle Stick Chart, I'm getting data from sever in thousands, Chart take a while to load data, that's fine, but even after loading, I try to zoom it, the chart stucks and app is stuck until that zoom interaction is processed, also I want to add scroll behavior in order to see all the data loaded on chart.

So I want help with two major things:
1- How to handle extensive data?

2- How to add scrolling to view all the data on the chart.

Note: zoom and pane is required as well.

Thanks

[Muhammad Zahid Ramzan]

I tried a one of your examples in some other user issues, and scrolling works fine on DateTime(YYYY,MM,DD), but from server data is coming in the form of epochtime , scrolling after conversion to DateTime it works fine on X-axis but scroll don't work. Also how I can set visible limit in numbers instead on dates, but my x-axis will be Datetime? 
please check this video: https://vimeo.com/816226979 code is also attached.

Attachment: code_367cd41c.zip

[Lokesh Palani]

Hi Muhammad,

Query 1: How to handle extensive data?

The following are the key points that can be used to boost the performance of the chart when there is a need to plot high volume data.

• Load and store the required data points in the initState method itself, and then set the data points to the chart series.
• Use NumericAxis or DateTimeAxis instead of CategoryAxis.
• When there are large number of points to load in line series, you can use FastLineSeries series instead of LineSeries.
• Instead of enabling data markers and labels when there are large number of data points, you can use Trackball to view the point information.
• Set series animationDuration as 0 to disable the animation while loading large number of data points.
• Use updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug -  https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.
• Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart.  https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

You can load more than 1L data points for fast line series and more than 5k data points for other type series. We have prepared sample with 4 fast line series and each series have 3600 data points and it’s working fine at our end. We have shared a sample for your reference.

Query 2: How to add scrolling to view all the data on the chart?

We have checked your code snippet and noticed that you did not set the enablePanning property to true in the ZoomPanBehavior, which resulted to scrolling not working in chart. By setting the enablePanning property to true, You will be able to meet your requirement. We have shared the related UG Documentation below for your reference.

UG,

https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan#panning

Regards,

Lokesh.

[Muhammad Zahid Ramzan]

Hi, Thank you very much for you response, It is quiet helpful, I have another query for DateTime on x-asis.
Please watch this video: https://vimeo.com/824203637/da381e0c58?share=copy
and let know know if you need anything else. Thanks

[Lokesh Palani]

Hi Muhammad,

You can achieve your requirement by using the axisLabelFormatter callback. In this callback, you will receive every axis label text that has been formatted based on the value you defined in dateFormat. Here, you can customize the text based on your use case. We have provided a code snippet and user guide documentation for your reference. Please let us know if you require any further assistance.

Code snippet:

 primaryXAxis: DateTimeAxis(

            dateFormat: DateFormat('HH:mm/dd MMM'),

            axisLabelFormatter: (AxisLabelRenderDetails details) {

              List<String> texts = details.text.split('/');

              String text = texts[0] == '00:00' ? texts[1] : texts[0];

              return ChartAxisLabel((text), details.textStyle);

            },

            isVisible: true,

            majorTickLines: const MajorTickLines(size: 0),

          ),

UG,

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

Screenshot:

Regards,

Lokesh.

[Muhammad Zahid Ramzan]

Hi Thank you for reply, in my case it shows date in tooltip,  but not on x-axis as you shown in screenshot attached, I have values for 00:00 but it doesn't show, is there a way to forcefully show them? I have attached a video as well. 

Here is the code snippet:

const kChartsDateTimeFormat = 'HH:mm/dd MMM';

primaryXAxis: DateTimeAxis(
    dateFormat: DateFormat(kChartsDateTimeFormat),
    axisLabelFormatter: (AxisLabelRenderDetails details) {
      List<String> texts = details.text.split('/');
      String text = texts[0] == '00:00' ? texts[1] : texts[0];
      return ChartAxisLabel((text), details.textStyle);
    },
    isVisible: true,
    edgeLabelPlacement: EdgeLabelPlacement.shift,
    intervalType: DateTimeIntervalType.minutes,
    majorGridLines: MajorGridLines(width: 0),
    labelStyle: TextStyle(
        color: Colors.black,
        fontFamily: 'Roboto',
        fontSize: 14,
        fontStyle: FontStyle.italic,
        fontWeight: FontWeight.w500))

Attachment: xaxis_.mp4_16461aed.zip

[Lokesh Palani]

Hi Muhammad,

We would like to let you know that currently we don’t have support to customize the crosshair label. However, we have considered your requirement as a new feature and logged feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR, https://www.syncfusion.com/feedback/43816/provide-option-to-customize-the-crosshair-label

You can customize the crosshair labels by using this code snippet.

  primaryXAxis: DateTimeAxis(

              dateFormat: DateFormat('HH:mm'),

              axisLabelFormatter: (AxisLabelRenderDetails details) {

                if (details.text == '00:00') {

                  DateFormat dateFormat = DateFormat('dd/MMM');

                  return ChartAxisLabel(

                      dateFormat.format(DateTime.fromMillisecondsSinceEpoch(

                          details.value.toInt())),

                      details.textStyle);

                }

                return ChartAxisLabel((details.text), details.textStyle);

              },

            ),

Regards,

Lokesh.