Skip to content

Commit efd8f22

Browse files
Rokesh-KarthikeyanRokesh-Karthikeyan
committed
flut-5960-[feature][flutter]: UG for newly added supports
1 parent 233926a commit efd8f22

File tree

7 files changed

+228
-38
lines changed

7 files changed

+228
-38
lines changed

‎Flutter/cartesian-charts/callbacks.md

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -83,42 +83,6 @@ Triggers when the visible range of an axis is changed, i.e. value changes for mi
8383

8484
{% endhighlight %}
8585

86-
## onAxisLabelRender
87-
88-
Triggers while rendering the axis labels. Text and text styles such as color, font size, and font weight can be customized. The [`onAxisLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onAxisLabelRender.html) Callback contains the following arguments.
89-
90-
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/text.html) - specifies the axis label to be rendered.
91-
* [`value`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/value.html) - specifies the actual value of the current axis label.
92-
* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axisName.html) - specifies the axis name.
93-
* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/orientation.html) - specifies the current axis orientation.
94-
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axis.html) - holds the information about the current axis.
95-
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/textStyle.html) - used to change the text color, size, font family, font style, and font weight.
96-
97-
98-
{% highlight dart %}
99-
100-
@override
101-
Widget build(BuildContext context) {
102-
return Scaffold(
103-
body: Center(
104-
child: SfCartesianChart(
105-
onAxisLabelRender: (AxisLabelRenderArgs args) {
106-
if (args.axisName == 'primaryXAxis') {
107-
args.text = 'Text';
108-
TextStyle textStyle = args.textStyle;
109-
args.textStyle = textStyle.copyWith(color: Colors.red);
110-
}
111-
}
112-
)
113-
)
114-
);
115-
}
116-
117-
{% endhighlight %}
118-
119-
#### See Also
120-
121-
* [Using dateTime values in y-axis using onAxisLabelRender callback](https://www.syncfusion.com/kb/12224/how-to-use-datetime-values-in-the-y-axis-sfcartesianchart).
12286

12387
## onDataLabelRender
12488

@@ -1024,6 +988,41 @@ Triggers when the error bar is being rendered. In this `onRenderDetailsUpdate` c
1024988

1025989
{% endhighlight %}
1026990

991+
## OnCreateRenderer
992+
993+
Used to create the renderer for custom series.
994+
995+
This is applicable only when the custom series is defined in the sample
996+
and for built-in series types, it is not applicable.
997+
998+
Renderer created in this will hold the series state and
999+
this should be created for each series. [onCreateRenderer] callback
1000+
function should return the renderer class and should not return null.
1001+
1002+
Series state will be created only once per series and will not be created
1003+
again when we update the series.
1004+
1005+
Defaults to `null`.
1006+
1007+
{% highlight dart %}
1008+
1009+
Widget build(BuildContext context) {
1010+
return Container(
1011+
child: SfCartesianChart(
1012+
series: <LineSeries<SalesData, num>>[
1013+
LineSeries<SalesData, num>(
1014+
onCreateRenderer:(ChartSeries<dynamic, dynamic> series){
1015+
return CustomLinerSeriesRenderer();
1016+
}
1017+
),
1018+
],
1019+
));
1020+
}
1021+
class CustomLinerSeriesRenderer extends LineSeriesRenderer {
1022+
// custom implementation here...
1023+
}
1024+
{% endhighlight %}
1025+
10271026
## See Also
10281027

10291028
* [Customize the tooltip using its callback event](https://www.syncfusion.com/kb/11507/how-to-customize-the-tooltip-using-callback-events-sfcartesianchart).

‎Flutter/circular-charts/callbacks.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -405,3 +405,39 @@ The callback contains the following argument:
405405

406406
The onCreateShader callback is called once while rendering
407407
the data points and legend. For further reference on this callback, Check the [`Gradient and ImageShader`](./circular-series-customization#Gradient-fill-and-shader) section.
408+
409+
410+
## OnCreateRenderer
411+
412+
Used to create the renderer for custom series.
413+
414+
This is applicable only when the custom series is defined in the sample
415+
and for built-in series types, it is not applicable.
416+
417+
Renderer created in this will hold the series state and
418+
this should be created for each series. [onCreateRenderer] callback
419+
function should return the renderer class and should not return null.
420+
421+
Series state will be created only once per series and will not be created
422+
again when we update the series.
423+
424+
Defaults to `null`.
425+
426+
{% highlight dart %}
427+
428+
Widget build(BuildContext context) {
429+
return Container(
430+
child: SfCircularChart(
431+
series: <PieSeries<SalesData, num>>[
432+
PieSeries<SalesData, num>(
433+
onCreateRenderer:(CircularSeries<dynamic, dynamic> series){
434+
return CustomPieSeriesRenderer();
435+
}
436+
),
437+
],
438+
));
439+
}
440+
class CustomPieSeriesRenderer extends PieSeriesRenderer {
441+
// custom implementation here...
442+
}
443+
{% endhighlight %}

‎Flutter/circular-charts/datalabel.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,3 +426,35 @@ Data label and its connector line in the Circular charts for the point value 0 c
426426
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
427427

428428
![label_saturation](images/datalabel/circular_saturation.png)
429+
430+
431+
## Over flow mode
432+
433+
Action on data labels when it’s overflowing from its region area.
434+
435+
The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the `labelIntersectAction` takes the priority, else
436+
`overflowMode` takes the priority.
437+
438+
_Note:_ This is applicable for pie, doughnut, pyramid, and funnel series
439+
types alone.
440+
441+
Defaults to `OverflowMode.none`.
442+
443+
{% highlight dart %}
444+
445+
Widget build(BuildContext context) {
446+
return Container(
447+
child: SfCircularChart(
448+
series: <PieSeries<ChartData, String>>[
449+
PieSeries<ChartData, String>(
450+
dataLabelSettings: DataLabelSettings(
451+
isVisible: true,
452+
overflowMode: OverflowMode.trim
453+
),
454+
),
455+
],
456+
)
457+
);
458+
}
459+
460+
![dataLabel_overflow](images/datalabel/circular_overflow.jpg)

‎Flutter/funnel-chart/callbacks.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,3 +307,36 @@ Triggers when long press on the series point. The [`onPointLongPress`](https://p
307307
);
308308
}
309309
{% endhighlight %}
310+
311+
## OnCreateRenderer
312+
313+
///Used to create the renderer for custom series.
314+
315+
This is applicable only when the custom series is defined in the sample
316+
and for built-in series types, it is not applicable.
317+
318+
Renderer created in this will hold the series state and
319+
this should be created for each series. [onCreateRenderer] callback
320+
function should return the renderer class and should not return null.
321+
322+
Series state will be created only once per series and will not be created
323+
again when we update the series.
324+
325+
Defaults to `null`.
326+
327+
{% highlight dart %}
328+
329+
Widget build(BuildContext context) {
330+
return Container(
331+
child: SfFunnelChart(
332+
series: FunnelSeries<SalesData, num>(
333+
onCreateRenderer:(FunnelSeries<dynamic, dynamic> series){
334+
return CustomFunnelSeriesRenderer();
335+
}
336+
),
337+
));
338+
}
339+
class CustomFunnelSeriesRenderer extends FunnelSeriesRenderer {
340+
// custom implementation here...
341+
}
342+
{% endhighlight %}

‎Flutter/funnel-chart/datalabel.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,4 +165,31 @@ If the user didn’t provide text color to the data label, then by default, the
165165

166166
![label_saturation](images/datalabel/funnel_saturation.png)
167167

168+
## Over flow mode
168169

170+
Action on data labels when it’s overflowing from its region area.
171+
172+
The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the `labelIntersectAction` takes the priority, else
173+
`overflowMode` takes the priority.
174+
175+
_Note:_ This is applicable for pie, doughnut, pyramid, and funnel series
176+
types alone.
177+
178+
Defaults to `OverflowMode.none`.
179+
180+
{% highlight dart %}
181+
182+
Widget build(BuildContext context) {
183+
return Container(
184+
child: SfFunnelChart(
185+
series: PieSeries<ChartData, String>(
186+
dataLabelSettings: DataLabelSettings(
187+
isVisible: true,
188+
overflowMode: OverflowMode.trim
189+
),
190+
),
191+
),
192+
);
193+
}
194+
195+
![label_overflow](images/datalabel/funnel_overflow.jpg)

‎Flutter/pyramid-chart/callbacks.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,3 +309,37 @@ Triggers when long press on the series point. The [`onPointLongPress`](https://p
309309
);
310310
}
311311
{% endhighlight %}
312+
313+
314+
## OnCreateRenderer
315+
316+
Used to create the renderer for custom series.
317+
318+
This is applicable only when the custom series is defined in the sample
319+
and for built-in series types, it is not applicable.
320+
321+
Renderer created in this will hold the series state and
322+
this should be created for each series. [onCreateRenderer] callback
323+
function should return the renderer class and should not return null.
324+
325+
Series state will be created only once per series and will not be created
326+
again when we update the series.
327+
328+
Defaults to `null`.
329+
330+
{% highlight dart %}
331+
332+
Widget build(BuildContext context) {
333+
return Container(
334+
child: SfPyramidChart(
335+
series: PyramidSeries<SalesData, num>(
336+
onCreateRenderer:(PyramidSeries<dynamic, dynamic> series){
337+
return CustomPyramidSeriesRenderer();
338+
}
339+
),
340+
));
341+
}
342+
class CustomPyramidSeriesRenderer extends PyramidSeriesRenderer {
343+
// custom implementation here...
344+
}
345+
{% endhighlight %}

‎Flutter/pyramid-chart/datalabel.md

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,37 @@ Data label and its connector line in the Pyramid charts for the point value 0 ca
242242

243243
![hide_0_value](images/datalabel/dataLabel_0_value.png)
244244

245-
### Data label saturation color
245+
## Data label saturation color
246246

247247
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
248248

249-
![label_saturation](images/datalabel/pyramid_saturation.png)
249+
![label_saturation](images/datalabel/pyramid_saturation.png)
250+
251+
## Over flow mode
252+
253+
Action on data labels when it’s overflowing from its region area.
254+
255+
The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the `labelIntersectAction` takes the priority, else
256+
`overflowMode` takes the priority.
257+
258+
_Note:_ This is applicable for pie, doughnut, pyramid, and funnel series
259+
types alone.
260+
261+
Defaults to `OverflowMode.none`.
262+
263+
{% highlight dart %}
264+
265+
Widget build(BuildContext context) {
266+
return Container(
267+
child: SfPyramidChart(
268+
series: PyramidSeries<ChartData, String>(
269+
dataLabelSettings: DataLabelSettings(
270+
isVisible: true,
271+
overflowMode: OverflowMode.trim
272+
),
273+
),
274+
)
275+
);
276+
}
277+
278+
![label_overflow](images/datalabel/pyramid_overflow.jpg)

0 commit comments

Comments
 (0)