Annotations with Column or Row widget are not displayed

[Sven Zeisberg]

Hi,

I'd like to add an annotation that is a row with two children (text, image). As long as the annotations widget is only text or only image it works fine, but as soon as I use row or column, the annotation is not displayed any more. :-(

Any idea what's wrong with my code / idea?

Please find my minimal example below.

Thanks for helping!

Sven

import 'package:flutter/material.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

const MyHomePage({

super.key,

});

@override

State createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: SfCartesianChart(

annotations: [

CartesianChartAnnotation(

widget: Row(

children: const [

Text('Annotation'),

],

),

coordinateUnit: CoordinateUnit.point,

x: 3,

y: 2,

),

],

series: [

LineSeries(

dataSource: data,

xValueMapper: (ChartData value, _) => value.x,

yValueMapper: (ChartData value, _) => value.y,

),

],

primaryXAxis: NumericAxis(

title: AxisTitle(text: 'Primary X Axis'),

),

primaryYAxis: NumericAxis(

title: AxisTitle(text: 'Primary Y Axis'),

),

),

),

);

}

}

class ChartData {

ChartData(this.x, this.y);

final double x;

final double? y;

}

List data = [

ChartData(1, 2),

ChartData(2, 3),

ChartData(6, 4),

ChartData(9, 9),

];

[Yuvaraj Gajaraj]

Hi Sven,

We are validating your query at our end and we will update further details in one business day on 14 March 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Sven,

We have checked your query and found that you have wrapped the Text widget inside the Row widget and used it as annotation, in flutter if you added a Row widget without wrapping any other sized widget it will take all the available space in its parent widget. However, you can achieve your requirement by using the mainAxisSize property in Row and setting it to a minimum then it will take a size based on its child and not based on its parent. We have shared the code snippet below for your reference.

Code snippet:

annotations: [

CartesianChartAnnotation(

widget: Row(

mainAxisSize: MainAxisSize.min,

children: const [

Text('Annotation'),

FlutterLogo(),

],

),

coordinateUnit: CoordinateUnit.point,

x: 3,

y: 2,

),

],

Regards,

Yuvaraj.

[Sven Zeisberg]

Thanks for your help!

It works now perfectly fine! 

[Lavanya Anaimuthu]

Hi Sven,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Lavanya A.