1. Home
  2. Forum
  3. Flutter
  4. Crosshair on FastLineSeries

Crosshair on FastLineSeries

I can't seem to get Crosshair to appear in my FastLineSeries chart.

Does crosshair work on FastLineSeries


8 Replies
YG Yuvaraj Gajaraj Syncfusion Team October 12, 2021 03:52 PM UTC

Hi Peter, 
 
Greetings from Syncfusion. We have analyzed your query and tried to reproduce the reported issue unfortunately the issue is not reproduced at our end. We have also attached the sample for your reference below. 
 
  
Since we are not aware of your exact scenario, on which crosshair not visible, kindly try to replicate the reported issue with the above sample and get back to us. This will be useful in providing the solution at earlier.  
 
Regards, 
Yuvaraj. 


PE Peter October 13, 2021 05:08 AM UTC

Hi


I still cannot get it to work.

My Chart has the followings:


  1. FastLineSeries with multiple series and SeriesControllers
  2. Two Y-Axis
  3. X-Axis is DateTime
  4. Has RangeController
  5. Has ZoomBehavior, TrackBallBehavior, Plotbands

Here are additional info:

PE Peter October 13, 2021 05:11 AM UTC

_mySfCartesianChart = SfCartesianChart(
palette: seriesColors,
//>GRAY X - Axis
primaryXAxis: _chartDateTimeAxis,
//>GRAY Y - Axis
primaryYAxis: NumericAxis(
enableAutoIntervalOnZooming: true,
plotOffset: 0,
majorGridLines: MajorGridLines(
width: 0.5, color: colorChart, dashArray: <double>[5, 5]),
isVisible: true,
majorTickLines: MajorTickLines(size: 3, width: 2, color: Colors.red),
minorTickLines:
MinorTickLines(size: 1, width: 1, color: Colors.grey[800]),
title: AxisTitle(
text:
'Diff Pressure (${measurementUnitList[_selectedMeasurementUnitIndex].toString()})',
textStyle: TextStyle(
color: colorChartLight,
//fontFamily: 'Roboto',
fontSize: 16,
fontFamily: "Source Sans Pro",
)),
axisLine: AxisLine(
color: colorChart,
width: 2,
),
minimum: _isPreviousChart
? (_pressureMin < -130 ? _pressureMin - 100 : -250)
: _pressureMin,
maximum: _isPreviousChart
? (_pressureMax > 300 ? _pressureMax + 100 : 400)
: _pressureMax,
zoomFactor: (_zoomFactor < 0)
? 0
: (_zoomFactor > 1)
? 1
: _zoomFactor,
zoomPosition: (_zoomPostion < 0)
? 0
: (_zoomPostion > 1)
? 1
: _zoomPostion,
),
//>GRAY Additional Axis
axes: <ChartAxis>[
// NumericAxis DateTimeAxis
DateTimeAxis(
name: 'yAxisZero',
//opposedPosition: true,
plotOffset: 0,
autoScrollingDeltaType: DateTimeIntervalType.hours,
interval: 10,
crossesAt: 0,
minimum: _dateMin,
maximum: _dateMax,
visibleMinimum: _rangeDateMin,
visibleMaximum: _rangeDateMax,
zoomFactor: (_zoomFactor < 0)
? 0
: (_zoomFactor > 1)
? 1
: _zoomFactor,
zoomPosition: (_zoomPostion < 0)
? 0
: (_zoomPostion > 1)
? 1
: _zoomPostion,
rangeController: _rangeController,
axisLine: AxisLine(
color: colorChart,
dashArray: [5, 5],
width: 3,
)
//title: AxisTitle(text: 'Secondary X Axis')
),
],
//>GRAY Title
title: ChartTitle(
text: myProject.value.projectId.toString() == ""
? "Empty"
: myProject.value.projectName.toString(),
textStyle: TextStyle(
color: Colors.white,
//fontFamily: 'Roboto',
fontSize: 22,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold)),
//>GRAY Legend
legend: Legend(
isVisible: true,
isResponsive: true,
title: LegendTitle(
text: "Channels",
textStyle: TextStyle(
color: Colors.white,
fontFamily: "Source Sans Pro",
fontSize: 12,
),
),
textStyle: TextStyle(
color: Colors.white,
fontFamily: "Source Sans Pro",
fontSize: 10,
),
// Border color and border width of legend
borderColor: colorChartLight,
borderWidth: 2,
toggleSeriesVisibility: true,
),
zoomPanBehavior: _zoomPanBehavior,
trackballBehavior: _isEventSelect ? null : _trackballBehavior,
crosshairBehavior: CrosshairBehavior(
enable: _isEventSelect,
lineType: CrosshairLineType.both,
lineColor: Colors.white30),
enableAxisAnimation: true,
plotAreaBorderWidth: 0,
annotations: _chartAnnotations,
series: _myChartSeries,
onChartTouchInteractionDown: isChartSeriesEmpty
? null
: (ChartTouchInteractionArgs args) {
//>RED Do something only when Event Box was click
print("onChartTouchInteractionDown");

},

onActualRangeChanged: isChartSeriesEmpty
? null
: (ActualRangeChangedArgs args) {
//if (isChartSeriesEmpty) return;
if (args.axisName == 'primaryYAxis') {
//args.visibleMin = 10;
}
},
onZoomEnd: (ZoomPanArgs args) {
print(args.currentZoomFactor);
print(args.currentZoomPosition);
_zoomFactor = args.currentZoomFactor;
_zoomPostion = args.currentZoomPosition;
},
);

PE Peter October 13, 2021 05:12 AM UTC

DateTimeAxis _chartDateTimeAxis = DateTimeAxis(
name: "primaryXAxis",
autoScrollingMode: AutoScrollingMode.start,
interactiveTooltip: InteractiveTooltip(enable: interactiveTooltipEnable),
plotOffset: 0,
visibleMinimum: myVisibleMin,
visibleMaximum: myVisibleMax,
majorTickLines: MajorTickLines(size: 3, width: 2, color: Colors.red),
minorTickLines: MinorTickLines(size: 1, width: 1, color: Colors.grey[800]),
rangeController: rangeController,
minimum: myMinStatic,
maximum: myMaxStatic,
plotBands: plotBands,
isVisible: true,
zoomFactor: (zoomFactor < 0)
? 0
: (zoomFactor > 1)
? 1
: zoomFactor,
zoomPosition: (zoomPostion < 0)
? 0
: (zoomPostion > 1)
? 1
: zoomPostion,
);

PE Peter October 13, 2021 05:13 AM UTC

TrackballBehavior _trackballBehavior = TrackballBehavior(
// Enables the trackball
enable: enable,
activationMode: ActivationMode.singleTap,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
tooltipAlignment: ChartAlignment.center,
markerSettings: TrackballMarkerSettings(markerVisibility: TrackballVisibilityMode.visible),
shouldAlwaysShow: false,
// tooltipSettings: InteractiveTooltip(
// enable: true,
// color: Color.fromRGBO(0, 8, 22, 0.65), //colorChartLight,
// format: 'series.name: point.x : point.y ' + measurementUnit,
// ),

builder: (BuildContext context, TrackballDetails trackballDetails) {
........}
);

YG Yuvaraj Gajaraj Syncfusion Team October 14, 2021 02:51 PM UTC

Hi Peter, 
 
Thanks for the information you have provided. We have analyzed your code snippet, and we suspect that you have enabled selection zooming feature in your code. If so, we would like to inform you that crosshair and selection zooming both have the axis tooltip feature, when both features are enabled, the tooltips will get overlapped. To avoid this, we have given priority selection zooming and this is our default behavior. So, we request to use either zooming or crosshair feature.  
 
Regards, 
Yuvaraj.

PE Peter October 17, 2021 08:01 AM UTC

Actually, I can't get neither crosshair nor selection zoom to work.

Has it got to do with 

SelectionBehavior setting?

 


YG Yuvaraj Gajaraj Syncfusion Team October 18, 2021 12:55 PM UTC

Hi Peter, 
  
We have analyzed your reported issue with the provided code snippet. Unfortunately, when we enable both selection zooming and crosshair, as stated in our previous update, the zooming takes priority and is working fine. The sample which we have created with your code can be found below. 
  
  
Since we are not aware of the exact scenario, kindly get back to us with the below information, this will be helpful in providing the solution earlier. 
  
  • Have you ensured with the latest version of the chart package?
  • Is the issue replicating in the mobile platform?
  • After ensuring with the latest version of the chart package, if the issue persists, kindly try to replicate the scenario with the provided information.
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon