We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to render annotation on DateTime X axis LineSeries chart

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


5 Replies 1 reply marked as answer

NR Natrayan Ramalingam Syncfusion Team October 7, 2022 09:33 AM

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/annotations


Screenshot:

 



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


HL Henry Liang replied to Natrayan Ramalingam October 12, 2022 03:40 AM

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



NR Natrayan Ramalingam Syncfusion Team October 13, 2022 05:07 AM


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<dynamic> chartPoint =

             CartesianChartPoint<dynamic>(

             chartData.last.x.millisecondsSinceEpoch,

              71.5

       );

       pointLocation = _chartSeriesController?.pointToPixel(chartPoint);

       setState(() {});

       loadTime = false;

   }

});

// annotation code

annotations: <CartesianChartAnnotation>[

      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,

Natrayan


Attachment: f178022_1ce8e8c0.zip

Marked as answer

HL Henry Liang November 1, 2022 10:07 PM

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,
),
],


SK Sriram Kiran Senthilkumar Syncfusion Team November 2, 2022 04:14 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon