Skip to content

Commit b977fc8

Browse files
JayavigneshwaranGJayavigneshwaranG
committed
Merge branch 'flut-5602-UGchanges-hot' into 'hotfix/hotfix-v19.3.0.43'
FLUT-5602 - [Bug] Annotation snippet changes See merge request content/Flutter-docs!1989
2 parents bdc5798 + 56f47e9 commit b977fc8

File tree

2 files changed

+120
-58
lines changed

2 files changed

+120
-58
lines changed

‎Flutter/cartesian-charts/annotations.md

Lines changed: 82 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ To position the annotation based on the percentage values, set the [`CoordinateU
173173

174174
**Positioning based on region**
175175

176-
Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion-class.html) or [`AnnotationRegion.chart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion-class.html) using [`region`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/region.html) property.
176+
Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html) or [`AnnotationRegion.chart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html) using [`region`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/region.html) property.
177177

178178
{% highlight dart %}
179179

@@ -250,30 +250,51 @@ You can add multiple annotations to the Chart by adding multiple widgets to the
250250
Widget build(BuildContext context) {
251251
return Scaffold(
252252
body: SafeArea(
253-
child: Center(
254-
child: Container(
255-
child: SfCartesianChart(
256-
primaryXAxis: CategoryAxis(),
257-
annotations: <CartesianChartAnnotation>[
258-
// first annotation
259-
CartesianChartAnnotation(
260-
child: Container(child: const Text('High')),
261-
coordinateUnit: CoordinateUnit.logicalPixel,
262-
x: 90,
263-
y: 200),
264-
// second annotation
265-
CartesianChartAnnotation(
266-
child: Container(child: const Text('Low')),
267-
coordinateUnit: CoordinateUnit.logicalPixel,
268-
x: 170,
269-
y: 200)
270-
],
271-
)
272-
)
273-
)
274-
),
275-
);
276-
}
253+
child: Center(
254+
child: Container(
255+
child: SfCartesianChart(
256+
primaryXAxis: CategoryAxis(),
257+
primaryYAxis: NumericAxis(interval: 5),
258+
annotations: <CartesianChartAnnotation>[
259+
// first annotation
260+
CartesianChartAnnotation(
261+
widget: Container(child: const Text('High')),
262+
coordinateUnit: CoordinateUnit.point,
263+
x: 'China',
264+
y: 6,
265+
),
266+
// second annotation
267+
CartesianChartAnnotation(
268+
widget: Container(child: const Text('Low')),
269+
coordinateUnit: CoordinateUnit.point,
270+
x: 'Japan',
271+
y: 6)
272+
],
273+
series: <CartesianSeries<ChartData, String>>[
274+
StepLineSeries<ChartData, String>(
275+
dataSource: <ChartData>[
276+
ChartData('UK', 6),
277+
ChartData('China', 11),
278+
ChartData('USA', 20),
279+
ChartData('Japan', 14),
280+
ChartData('France', 10)
281+
],
282+
xValueMapper: (ChartData sales, _) => sales.year,
283+
yValueMapper: (ChartData sales, _) => sales.sales)
284+
]
285+
)
286+
)
287+
)
288+
)
289+
);
290+
}
291+
}
292+
293+
class ChartData {
294+
ChartData(this.year, this.sales);
295+
final String year;
296+
final double sales;
297+
}
277298

278299
{% endhighlight %}
279300

@@ -364,30 +385,53 @@ Chart supports watermark which allows you to mark the specific area of interest
364385
child: Center(
365386
child: Container(
366387
child: SfCartesianChart(
367-
annotations: <CartesianChartAnnotation>[
368-
CartesianChartAnnotation(
369-
child: Container(
388+
primaryXAxis: CategoryAxis(labelPlacement: LabelPlacement.betweenTicks),
389+
annotations: <CartesianChartAnnotation>[
390+
CartesianChartAnnotation(
391+
widget: Container(
370392
child: const Text(
371-
'€ - \$ ',
393+
'€ - \$ ',
372394
style: TextStyle(
373395
color: Color.fromRGBO(216, 225, 227, 1),
374396
fontWeight: FontWeight.bold,
375397
fontSize: 80),
376-
),
377398
),
378-
coordinateUnit: CoordinateUnit.point,
379-
region: AnnotationRegion.chart,
380-
x: 3,
381-
y: 38,
382-
)
383-
]
399+
),
400+
coordinateUnit: CoordinateUnit.point,
401+
region: AnnotationRegion.chart,
402+
x: 'apr',
403+
y: 38,
404+
)
405+
],
406+
series: <ChartSeries<ChartData, String>>[
407+
LineSeries<ChartData, String>(
408+
dataSource: <ChartData>[
409+
ChartData('jan', 21),
410+
ChartData('feb', 24),
411+
ChartData('mar', 36),
412+
ChartData('apr', 38),
413+
ChartData('may', 54),
414+
ChartData('jun', 54),
415+
ChartData('jul', 70),
416+
],
417+
xValueMapper: (ChartData sales, _) => sales.year,
418+
yValueMapper: (ChartData sales, _) => sales.sales),
419+
],
420+
)
384421
)
385422
)
386423
)
387-
)
388-
);
424+
);
425+
}
389426
}
390427

428+
class ChartData {
429+
ChartData(this.year, this.sales);
430+
final String year;
431+
final double sales;
432+
}
433+
434+
391435
{% endhighlight %}
392436

393437

‎Flutter/circular-charts/annotations.md

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -89,27 +89,45 @@ Chart supports watermark which allows you to mark the specific area of interest
8989
body: SafeArea(
9090
child: Center(
9191
child: Container(
92-
child: SfCircularChart(
93-
annotations: <CircularChartAnnotation>[
94-
CircularChartAnnotation(
95-
child: Container(
96-
child: const Text(
97-
'€ - \$ ',
98-
style: TextStyle(
99-
color: Color.fromRGBO(216, 225, 227, 1),
100-
fontWeight: FontWeight.bold,
101-
fontSize: 80),
102-
),
103-
),
104-
)
105-
]
92+
child: SfCircularChart(
93+
annotations: <CircularChartAnnotation>[
94+
CircularChartAnnotation(
95+
widget: Container(
96+
child: const Text(
97+
'€ - \$ ',
98+
style: TextStyle(
99+
color: Color.fromRGBO(216, 225, 227, 1),
100+
fontWeight: FontWeight.bold,
101+
fontSize: 80)),
102+
),
103+
)
104+
],
105+
series: <PieSeries<ChartData, String>>[
106+
PieSeries<ChartData, String>(
107+
dataSource: <ChartData>[
108+
ChartData('jan', 37),
109+
ChartData('feb', 24),
110+
ChartData('mar', 36),
111+
ChartData('apr', 38),
112+
ChartData('may', 40),
113+
],
114+
xValueMapper: (ChartData sales, _) => sales.year,
115+
yValueMapper: (ChartData sales, _) => sales.sales),
116+
],
117+
)
118+
)
119+
)
106120
)
107-
)
108-
)
109-
)
110-
);
111-
}
112-
121+
);
122+
}
123+
}
124+
125+
class ChartData {
126+
ChartData(this.year, this.sales);
127+
final String year;
128+
final double sales;
129+
}
130+
113131
{% endhighlight %}
114132

115133

0 commit comments

Comments
 (0)