How can I keep x-axis labels perfectly in line with graph data points?

[Roberto]

Hello Syncfusion support,

I am loving the Syncfusion Charts so far, very customizable. I need some help fine tuning the functionality of my line graph.

My goal:

I have enabled horizontal scrolling for my chart & I want the x-axis labels to be perfectly in-line vertically with the data points at all times including when scrolling. This is an essential part of my graph functionality and readability. Info, the x-axis labels will always coincide with the data points in my data structure.

Problem:

When I set autoScrollingDelta to my preferred interval I loose this functionality that I otherwise have. It seems that the autoScrollingDelta overrides the DateTimeInterval and due to the scrolling, the axis labels no longer meet my data points.

How can I get this type of functionality? It seems the documentation hints and gets very close but that there is no exact specific way to do this or that this functionality isn't possible. Please tell me it is possible, I cannot do without this functionality :)

I have attached two images, one images shows entire data range with labels aligning perfectly with data points. The second photo (current code as below) shows autoScrollingDelta and the labels do not align.

Any help on this is much appreciated :)

Here is my chart code:

```

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:intl/intl.dart';

import 'package:linechart/chart_data_methods.dart';

import 'package:linechart/date_range_widget.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

import 'graph_data.dart';

final graphData = Provider((ref) => ChartDataMethods());

class LineChart extends ConsumerWidget {

@override

Widget build(BuildContext context, ScopedReader watch) {

final startDate = watch(dateController).startDate;

final endDate = watch(dateController).endDate;

return Container(

child: SfCartesianChart(

plotAreaBorderWidth: 0,

title: ChartTitle(text: 'Sales'),

plotAreaBackgroundColor: Colors.blue[50].withOpacity(0.5),

primaryXAxis: DateTimeAxis(

autoScrollingDelta: 91,

autoScrollingDeltaType: DateTimeIntervalType.days,

edgeLabelPlacement: EdgeLabelPlacement.shift,

interval: 7,

intervalType: DateTimeIntervalType.days,

dateFormat: DateFormat.MMMd(),

labelRotation: -45,

labelAlignment: LabelAlignment.start,

majorGridLines: MajorGridLines(width: 0),

),

primaryYAxis: NumericAxis(

rangePadding: ChartRangePadding.auto,

numberFormat: NumberFormat.currency(locale: Platform.localeName, symbol: '\$')),

zoomPanBehavior: ZoomPanBehavior(

enablePinching: false,

enableDoubleTapZooming: false,

enableMouseWheelZooming: false,

enableSelectionZooming: false,

enablePanning: true),

tooltipBehavior: TooltipBehavior(

enable: true,

shouldAlwaysShow: true,

activationMode: ActivationMode.singleTap,

header: 'Sales',

canShowMarker: false,

color: Colors.lightBlue[300],

format: r'point.x - $point.y',

),

series: _getDefaultLineSeries(watch, startDate, endDate),

));

}

/// Series

List<AreaSeries<GraphData, DateTime>> _getDefaultLineSeries(

ScopedReader watch, DateTime start, DateTime end) {

final chartData = watch(graphData).dateRangeData(start, end);

return <AreaSeries<GraphData, DateTime>>[

AreaSeries<GraphData, DateTime>(

emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.zero),

color: Colors.lightBlue,

borderColor: Colors.blue[900],

borderWidth: 2,

dataSource: chartData,

enableTooltip: true,

xValueMapper: (GraphData data, _) => data.xAxis,

yValueMapper: (GraphData data, _) => data.yAxis,

markerSettings: MarkerSettings(

isVisible: true,

color: Colors.white,

borderColor: Colors.blue[900],

borderWidth: 1,

))

];

}

}

```

Attachment: images_zip_c3326f47.zip

[Dharanitharan Palanisamy]

Hi Roberto, 

 

Greetings from the team at Syncfusion. We have looked over your situation and can tell you that the chart is behaving as it should. We have identical parameters for the corresponding axes called autoScrollingDeltaType and intervalType, thus assigning various interval types to them will confuse about which interval type to process. As a result, the interval property in the auto-scrolling function has been ignored, and the chart is now rendered as expected. Please revert us if you need any further assistance on this. 

 

Thanks, 

Dharanitharan. P  

[Roberto]

Hi Dharanitharan,

I removed the interval type property and associated properties and I still get the same behaviour. Additionally, as I scroll through the chart from side to side the date labels change dates but do not move to stay in-line with the data points (they aren't in line to begin with either).

Is there something I'm doing wrong or is this functionality missing?

Please forgive me for sounding ornery, but this type of functionality for almost any type of graph where x-axis labels are in line with data points is absolutely, completely a MUST. It is essential for quick reading of graph material and statistical reference.

[Dharanitharan Palanisamy]

Hi Roberto, 

 

We have investigated your situation and regret to inform you that your request is currently not possible. We will investigate it and get back to you in three business days (28/05/2021), and we appreciate your patience until then. 

 

Thanks, 

Dharanitharan. P  

[Dharanitharan Palanisamy]

Hi Roberto, 

 

W have looked into your request and determined that it is a new feature request, for which we have submitted a feedback. It is planned and will be added in our upcoming volume 2 main release, which is scheduled to be released in June 2021. You can track the status of this feature by using the feedback link below and we appreciate your patience until then. 

 

Feedback: https://www.syncfusion.com/feedback/25771 

 

Thanks, 

Dharanitharan. P 

[Dharanitharan Palanisamy]

Hi Roberto,

Thank you for your patience. We are glad to announce that our 2021 Volume 2 release version 19.2.44 is rolled out. Now, the axis interval, will be maintained properly when enabled auto-scrolling and kindly use the following code snippet as a reference.

DateTimeAxis(

autoScrollingDelta: 91,

// Calculates interval as 7 days

interval: 7,

autoScrollingDeltaType: DateTimeIntervalType.days,

intervalType: DateTimeIntervalType.days

)

Kindly update to the latest version to use this feature from the below link.
https://pub.dev/packages/syncfusion_flutter_charts/versions/19.2.44

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Dharanitharan. P