How to render annotation on DateTime X axis LineSeries chart

Question

I'm using latest version of syncfusion_flutter_charts (20.3.48) on pub.dev

I want to add annotation with horizontal line to my linechart as upperbound and lowerbound like below.

How do I put annotation ex : "Max Value: 70" on the end of the red horizontal line?

When I try to add annotation with X coordinate as DateTime and Y coordinate double, I got following error:

"Null check operator used on null value"

The following is my code snipped

      annotations: <CartesianChartAnnotation>[
        CartesianChartAnnotation(
          yAxisName: 'primaryY',
          widget: Container(
            child: const Text(
              'Max Value: ${maxValue}',
            ),
          ),
          coordinateUnit: CoordinateUnit.point,
          region: AnnotationRegion.chart,
          x: chartDateValuePairs.last.dateTime,
          y: 38,
        )
      ],

Any suggestions would be greatly appreciated

Natrayan Ramalingam · Accepted Answer

Hi @Henry Liang,Greetings from Syncfusion.We have checked your query at our end, and we would like to let you know that, you can achieve your requirement 'Annotation should be placed on the same position while zooming and panning on the chart' with the help of pointToPixel method inChartSeriesController and sets the annotation coordinate value as logicalPixel. Please refer to the following code snippet. SchedulerBinding.instance.addPostFrameCallback((_) { if(loadTime){ final CartesianChartPoint chartPoint = CartesianChartPoint( chartData.last.x.millisecondsSinceEpoch, 71.5 ); pointLocation = _chartSeriesController?.pointToPixel(chartPoint); setState(() {}); loadTime = false; } }); // annotation code annotations: [ CartesianChartAnnotation( yAxisName: 'primaryYAxis', widget: const Text('Max Value: 70',), coordinateUnit: CoordinateUnit.logicalPixel, x: pointLocation!.dx, y: pointLocation!.dy, horizontalAlignment: ChartAlignment.far, region: AnnotationRegion.chart ) ], We have attached a sample for your reference. Please check with the above solution and get back to us if you need further assistance. Regards,NatrayanAttachment: f178022_1ce8e8c0.zip

Natrayan Ramalingam · Answer

Hi @Henry Liang,Greetings from Syncfusion,Query1: How do I put annotation ex: "Max Value: 70" on the end of the
red horizontal line?We have validated your query and you can achieve your
requirement by adding the annotation and set its horizontal alignment as far. Please
refer to the following code snippet.

annotations:
  <CartesianChartAnnotation> [
    
  CartesianChartAnnotation(
        
  yAxisName: 'primaryYAxis',
        
  widget: const Text('Max Value: 70',),
        
  coordinateUnit: CoordinateUnit.point,
         x:
  chartData.last.x,
         y:
  71,
        
  horizontalAlignment: ChartAlignment.far,
  )]

For more
details, please refer the following user guide.UG: https://help.syncfusion.com/flutter/cartesian-charts/annotationsScreenshot:

Query 2: When I try to add
annotation with X
coordinate as DateTime and Y coordinate double, I got following
error: "Null check operator used on null value".We tried to replicate the reported issue regarding adding the annotation with DateTimeAxis
throwing an exception at our end. Unfortunately, we are not able to
reproduce the reported issue as we are not exactly sure on what scenario the
issue is replicating. So, we kindly request you to try to replicate the
replicate the reported issue in the below attached test sample and revert us so
that it will help us assist you in a better way.Regards,Natrayan.Attachment: f178022_428c529b.zip

Henry Liang · Answer

Thanks!! This attachment example solved my error: "Null check operator used on null value".

I found I assigned a wrong yAxisName for annotations

but I have another question which is when I perform zooming such as zooming along X axis on the chart, the annotation move out of the chart and disappear, How to avoid it and fix it on the same point?

I've tried CoordinateUnit.logicalPixel but it is different from the Point coordinate, although it can be fixed when zooming but cannot directly set it on the top right end of the red horizontal line

            annotations: const <CartesianChartAnnotation>[
              CartesianChartAnnotation(
                  yAxisName: 'primaryYAxis',
                  widget: Text(
                    'Max Value: 70',
                  ),
                  coordinateUnit: CoordinateUnit.logicalPixel,
                  x: 200,
                  y: 71.5,
                  horizontalAlignment: ChartAlignment.far,
                  region: AnnotationRegion.chart)
            ],

Attachment: main_964562a5.zip

Henry Liang · Answer

Hi, Recently, I found PlotBand also can achieve 'Annotation should be placed on the same position while zooming and panning on the chart' by setting horizontalTextAlignment: TextAnchor.end.This way is more efficient because it can be set without setState() that cause chart widget to rebuild again, if I create many charts using Listview.builder, it will block ui for a period of time while calling setState().The following is my code snippet.          plotBands: <PlotBand>[            PlotBand(              text: 'MajorHI: ${widget.majorH.toString()} ',              textStyle: const TextStyle(                color: Colors.white,                backgroundColor: Colors.red,              ),              horizontalTextAlignment: TextAnchor.end,              start: widget.majorH,              end: widget.majorH,              borderWidth: 1,              borderColor: Colors.red,            ),          ],

Sriram Kiran Senthilkumar · Answer

We are glad that you have achieved your requirement by using the plot band feature available in the chart widget.