syncfusion-content · RathanakumarSekar · Dec 17, 2021 · Dec 14, 2021 · Dec 14, 2021 · Dec 14, 2021
diff --git a/Flutter/cartesian-charts/callbacks.md b/Flutter/cartesian-charts/callbacks.md
@@ -83,42 +83,6 @@ Triggers when the visible range of an axis is changed, i.e. value changes for mi
 
 {% endhighlight %}
 
-## onAxisLabelRender
-
-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.
-
-* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/text.html) - specifies the axis label to be rendered.
-* [`value`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/value.html) - specifies the actual value of the current axis label.
-* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axisName.html) - specifies the axis name.
-* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/orientation.html) - specifies the current axis orientation.
-* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axis.html) - holds the information about the current axis.
-* [`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.
-
-
-{% highlight dart %}
-
-    @override
-    Widget build(BuildContext context) {
-      return Scaffold(
-        body: Center(
-          child: SfCartesianChart(
-            onAxisLabelRender: (AxisLabelRenderArgs args) {
-              if (args.axisName == 'primaryXAxis') {
-                args.text = 'Text';
-                TextStyle textStyle = args.textStyle;
-                args.textStyle =  textStyle.copyWith(color: Colors.red);
-              }
-            }
-          )
-        )
-      );
-    }
-
-{% endhighlight %}
-
-#### See Also
-
-* [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).
 
 ## onDataLabelRender
 
@@ -1024,6 +988,71 @@ Triggers when the error bar is being rendered. In this `onRenderDetailsUpdate` c
 
 {% endhighlight %}
 
+## onCreateRenderer
+
+Used to create the renderer for custom series.This is applicable only when the custom series is defined in the sample and for built-in series types, it is not applicable.
+
+Renderer created in this will hold the series state and this should be created for each series. [`onCreateRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html) callback function should return the renderer class and should not return null.
+
+Series state will be created only once per series and will not be created again when we update the series.
+
+Defaults to `null`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+        return Container(
+          child: SfCartesianChart(
+            series: <ColumnSeries<SalesData, num>>[
+                ColumnSeries<SalesData, num>(
+                  onCreateRenderer:(ChartSeries<dynamic, dynamic> series){
+                      return CustomColumnSeriesRenderer();
+              }
+            ),
+          ],
+        )
+      );
+    }
+    class CustomColumnSeriesRenderer extends ColumnSeriesRenderer {
+       // custom implementation here...
+      @override
+      ChartSegment createSegment() {
+        return _ColumnCustomPainter();
+      }
+    }
+
+    class _CustomColumnSeriesRenderer extends ColumnSeriesRenderer {
+    _CustomColumnSeriesRenderer(this.series);
+
+    final ColumnSeries<dynamic, dynamic> series;
+     @override
+    ChartSegment createSegment() {
+      return _ColumnCustomPainter(series);
+      }
+    }
+
+    class _ColumnCustomPainter extends ColumnSegment {
+    _ColumnCustomPainter(this.series);
+
+    final ColumnSeries<dynamic, dynamic> series;
+    @override
+    int get currentSegmentIndex => super.currentSegmentIndex!;
+
+    @override
+    Paint getFillPaint() {
+      final Paint customerFillPaint = Paint();
+      customerFillPaint.color =  series.dataSource[currentSegmentIndex].y > 30 ? Colors.red : Colors.green;
+      customerFillPaint.style = PaintingStyle.fill;
+      return customerFillPaint;
+    }
+
+    @override
+    void onPaint(Canvas canvas) {
+      super.onPaint(canvas);
+      }
+    }
+{% endhighlight %}
+
 ## See Also
 
 * [Customize the tooltip using its callback event](https://www.syncfusion.com/kb/11507/how-to-customize-the-tooltip-using-callback-events-sfcartesianchart).

diff --git a/Flutter/circular-charts/callbacks.md b/Flutter/circular-charts/callbacks.md
@@ -405,3 +405,57 @@ The callback contains the following argument:
 
 The onCreateShader callback is called once while rendering
 the data points and legend. For further reference on this callback, Check the [`Gradient and ImageShader`](./circular-series-customization#Gradient-fill-and-shader) section.
+
+
+## onCreateRenderer
+
+Used to create the renderer for custom series.This is applicable only when the custom series is defined in the sample and for built-in series types, it is not applicable.
+
+Renderer created in this will hold the series state and this should be created for each series. [`onCreateRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onCreateRenderer.html) callback function should return the renderer class and should not return null.
+
+Series state will be created only once per series and will not be created again when we update the series.
+
+Defaults to `null`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+        return Container(
+            child: SfCircularChart(
+                series: <PieSeries<SalesData, num>>[
+                    PieSeries<SalesData, num>(
+                     onCreateRenderer:(CircularSeries<dynamic, dynamic> series){
+                       return CustomPieSeriesRenderer();
+                    }
+                ),
+              ],
+        ));
+    }
+    class CustomPieSeriesRenderer extends PieSeriesRenderer {
+       // custom implementation here...
+    }
+{% endhighlight %}
+
+## axisLabelFormatter
+
+Called while rendering each axis label in the chart. Provides label text, axis name, orientation of the axis, trimmed text and text styles such as color, font size, and font weight to the user using the `AxisLabelRenderDetails` class.
+
+You can customize the text and text style using the `ChartAxisLabel` class and can return it.
+
+Defaults to `null`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+      return Container(
+        child: SfCartesianChart(
+            primarXAxis: CategoryAxis(
+               axisLabelFormatter: (AxisLabelRenderDetails details) => axis(details),
+            ),
+        ));
+    }
+
+    ChartAxisLabel axis(AxisLabelRenderDetails details) {
+      return ChartAxisLabel('axis Label', details.textStyle);
+    }
+{% endhighlight %}
diff --git a/Flutter/circular-charts/datalabel.md b/Flutter/circular-charts/datalabel.md
@@ -426,3 +426,31 @@ Data label and its connector line in the Circular charts for the point value 0 c
 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).
 
 ![label_saturation](images/datalabel/circular_saturation.png)
+
+
+## Overflow mode
+
+Action on data labels when it’s overflowing from its region area.The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else `overflowMode` takes the priority.
+
+ N> This is applicable for pie, doughnut, pyramid, and funnel series types alone.
+
+Defaults to `OverflowMode.none`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+        return Container(
+             child: SfCircularChart(
+            series: <PieSeries<ChartData, String>>[
+             PieSeries<ChartData, String>(
+             dataLabelSettings: DataLabelSettings(
+             isVisible: true,
+             overflowMode: OverflowMode.trim
+                        ),
+                    ),
+                ],
+            )
+        );
+    }
+{% endhighlight %}
+![dataLabel_overflow](images/datalabel/circular_overflow.jpg)
diff --git a/Flutter/circular-charts/images/datalabel/circular_overflow.jpg b/Flutter/circular-charts/images/datalabel/circular_overflow.jpg
diff --git a/Flutter/funnel-chart/callbacks.md b/Flutter/funnel-chart/callbacks.md
@@ -307,3 +307,30 @@ Triggers when long press on the series point. The [`onPointLongPress`](https://p
       );
     }
 {% endhighlight %}
+
+## onCreateRenderer
+
+Used to create the renderer for custom series. This is applicable only when the custom series is defined in the sample and for built-in series types, it is not applicable.
+
+Renderer created in this will hold the series state and this should be created for each series. [`onCreateRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onCreateRenderer.html) callback function should return the renderer class and should not return null.
+
+Series state will be created only once per series and will not be created again when we update the series.
+
+Defaults to `null`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+      return Container(
+          child: SfFunnelChart(
+              series: FunnelSeries<SalesData, num>(
+                  onCreateRenderer:(FunnelSeries<dynamic, dynamic> series){
+                      return CustomFunnelSeriesRenderer();
+                    }
+                ),
+        ));
+      }
+    class CustomFunnelSeriesRenderer extends FunnelSeriesRenderer {
+       // custom implementation here...
+    }
+{% endhighlight %}
diff --git a/Flutter/funnel-chart/datalabel.md b/Flutter/funnel-chart/datalabel.md
@@ -165,4 +165,30 @@ If the user didn’t provide text color to the data label, then by default, the
 
 ![label_saturation](images/datalabel/funnel_saturation.png)
 
+## Overflow mode
 
+Action on data labels when it’s overflowing from its region area.
+
+The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else `overflowMode` takes the priority.
+
+N> This is applicable for pie, doughnut, pyramid, and funnel series types alone.
+
+Defaults to `OverflowMode.none`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+        return Container(
+            child: SfFunnelChart(
+            series: PieSeries<ChartData, String>(
+             dataLabelSettings: DataLabelSettings(
+               isVisible: true,
+               overflowMode: OverflowMode.trim
+                    ),
+                ),
+            ),
+        );
+    }
+{% endhighlight %}
+
+![label_overflow](images/datalabel/funnel_overflow.jpg)
diff --git a/Flutter/funnel-chart/images/datalabel/funnel_overflow.jpg b/Flutter/funnel-chart/images/datalabel/funnel_overflow.jpg
diff --git a/Flutter/pyramid-chart/callbacks.md b/Flutter/pyramid-chart/callbacks.md
@@ -309,3 +309,31 @@ Triggers when long press on the series point. The [`onPointLongPress`](https://p
       );
     }
 {% endhighlight %}
+
+
+## onCreateRenderer
+
+Used to create the renderer for custom series. This is applicable only when the custom series is defined in the sample and for built-in series types, it is not applicable.
+
+Renderer created in this will hold the series state and this should be created for each series. [`onCreateRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onCreateRenderer.html) callback function should return the renderer class and should not return null.
+
+Series state will be created only once per series and will not be created again when we update the series.
+
+Defaults to `null`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+      return Container(
+          child: SfPyramidChart(
+              series: PyramidSeries<SalesData, num>(
+                  onCreateRenderer:(PyramidSeries<dynamic, dynamic> series){
+                      return CustomPyramidSeriesRenderer();
+                    }
+                ),
+        ));
+      }
+    class CustomPyramidSeriesRenderer extends     PyramidSeriesRenderer {
+       // custom implementation here...
+    }
+{% endhighlight %}
diff --git a/Flutter/pyramid-chart/datalabel.md b/Flutter/pyramid-chart/datalabel.md
@@ -242,8 +242,35 @@ Data label and its connector line in the Pyramid charts for the point value 0 ca
 
 ![hide_0_value](images/datalabel/dataLabel_0_value.png)
 
-### Data label saturation color
+## Data label saturation color
 
 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).
 
-![label_saturation](images/datalabel/pyramid_saturation.png)
+![label_saturation](images/datalabel/pyramid_saturation.png)
+
+## Overflow mode
+
+Action on data labels when it’s overflowing from its region area.
+
+The overflowing data label rendering behavior can be changed based on this. If `overflowMode` property is set to `OverflowMode.none` then the [`labelIntersectAction'](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else `overflowMode` takes the priority.
+
+N> This is applicable for pie, doughnut, pyramid, and funnel series types alone.
+
+Defaults to `OverflowMode.none`.
+
+{% highlight dart %}
+
+    Widget build(BuildContext context) {
+        return Container(
+            child: SfPyramidChart(
+             series: PyramidSeries<ChartData, String>(
+             dataLabelSettings: DataLabelSettings(
+               isVisible: true,
+               overflowMode: OverflowMode.trim
+            ),
+          ),
+        )
+      );
+    }
+{% endhighlight %}
+![label_overflow](images/datalabel/pyramid_overflow.jpg)
diff --git a/Flutter/pyramid-chart/images/datalabel/pyramid_overflow.jpg b/Flutter/pyramid-chart/images/datalabel/pyramid_overflow.jpg