From d6140c4e8c70524b67f35682e6c547c8a1529b1a Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Mon, 14 Jul 2025 17:00:11 +0530 Subject: [PATCH 01/13] FLUT-969263-[others][flutter]: Improved cartesian chart UG API's Completed till trackball label format. --- Flutter/cartesian-charts/annotations.md | 10 +++++----- Flutter/cartesian-charts/legend.md | 14 ++++++------- Flutter/cartesian-charts/marker-datalabel.md | 20 +++++++++---------- .../cartesian-charts/technical-indicators.md | 4 ++-- .../cartesian-charts/trackball-crosshair.md | 18 ++++++++--------- Flutter/cartesian-charts/zoom-pan.md | 4 ++-- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/Flutter/cartesian-charts/annotations.md b/Flutter/cartesian-charts/annotations.md index fe016ee6b..318c51cc3 100644 --- a/Flutter/cartesian-charts/annotations.md +++ b/Flutter/cartesian-charts/annotations.md @@ -51,7 +51,7 @@ The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ **Positioning based on coordinateUnit as point** -To position the annotation based on axis, set the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties based on axis range values, and set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html). +To position the annotation based on axis, set the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties based on axis range values, and set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#point). {% tabs %} @@ -88,7 +88,7 @@ To position the annotation based on axis, set the [`x`](https://pub.dev/document **Positioning based on coordinateUnit as pixels** -To position the annotation based on the pixel values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html), and the pixel values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. +To position the annotation based on the pixel values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#logicalPixel), and the pixel values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. {% tabs %} {% highlight dart hl_lines="15" %} @@ -126,7 +126,7 @@ To position the annotation based on the pixel values, set the [`CoordinateUnit`] **Positioning based on coordinateUnit as percentage** -To position the annotation based on the percentage values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html), and the percentage values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. +To position the annotation based on the percentage values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#percentage), and the percentage values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. {% tabs %} @@ -183,7 +183,7 @@ To position the annotation based on the percentage values, set the [`CoordinateU **Positioning based on region** -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. +Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#plotArea) or [`AnnotationRegion.chart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#chart) using [`region`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/region.html) property. {% tabs %} {% highlight dart hl_lines="13" %} @@ -256,7 +256,7 @@ The following code example demonstrates how to set the [`horizontalAlignment`](h ## Adding multiple annotation -You can add multiple annotations to the Chart by adding multiple widgets to the [`annotations`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation-class.html) property as depicted in below code snippet. +You can add multiple annotations to the Chart by adding multiple widgets to the [`annotations`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property as depicted in below code snippet. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/legend.md b/Flutter/cartesian-charts/legend.md index 059d361ee..4e4dba975 100644 --- a/Flutter/cartesian-charts/legend.md +++ b/Flutter/cartesian-charts/legend.md @@ -49,7 +49,7 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ## Customizing legend -The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/name.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to define the label for the corresponding series legend item .The appearance of the label can be customized using the below properties. +The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to define the label for the corresponding series legend item .The appearance of the label can be customized using the below properties. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape. @@ -65,7 +65,7 @@ The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char * [`isResponsive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isResponsive.html) - toggles the visibility of the legend. If the width or height of the legend is greater than the plot area bounds. * [`iconBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconBorderWidth.html) - border width of the icon in the legend items. Used to change the stroke width of the legend icon shape. * [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) - overflow legend items. -* The [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/legendIconType.html) property of [`ChartSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries-class.html) is used to set the shape for the legend icon. Any shape in the [`LegendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/legendIconType.html) can be applied to this property. +* The [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/legendIconType.html) property of [`ChartSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries-class.html) is used to set the shape for the legend icon. Any shape in the [`LegendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/legendIconType.html) can be applied to this property. {% tabs %} @@ -299,7 +299,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Legend item visibility -You can control the visibility of a particular series legend item using the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/isVisibleInLegend.html) property of series. The default value of the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/isVisibleInLegend.html) property is true. If it is set to false, then the legend item for this specific series will not be displayed in the legend. +You can control the visibility of a particular series legend item using the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/isVisibleInLegend.html) property of series. The default value of the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/isVisibleInLegend.html) property is true. If it is set to false, then the legend item for this specific series will not be displayed in the legend. {% tabs %} {% highlight dart hl_lines="19" %} @@ -347,7 +347,7 @@ You can control the visibility of a particular series legend item using the [`is ## Legend overflow -The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html). +The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). {% tabs %} {% highlight dart hl_lines="19" %} @@ -427,8 +427,8 @@ The legend items can be placed in multiple rows or scroll can be enabled using t You can change the position of the legend inside the chart. The following properties can be used to customize the position of legend. auto position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. -* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html). -* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is auto. Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html). +* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). +* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is auto. Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). {% tabs %} {% highlight dart hl_lines="11" %} @@ -471,7 +471,7 @@ You can change the position of the legend inside the chart. The following proper ## Floating legend -Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) is [`LegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html), then the legend will be placed in the top but in the position added to the actual top position. +Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) is [`LegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#top), then the legend will be placed in the top but in the position added to the actual top position. Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. {% tabs %} diff --git a/Flutter/cartesian-charts/marker-datalabel.md b/Flutter/cartesian-charts/marker-datalabel.md index 3e098f5d5..dbd57114d 100644 --- a/Flutter/cartesian-charts/marker-datalabel.md +++ b/Flutter/cartesian-charts/marker-datalabel.md @@ -11,7 +11,7 @@ documentation: ug ## Marker -Markers are used to provide information about the exact point location. You can add a shape to adorn each data point. Markers can be enabled by using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/markerSettings.html). You can use the following properties to customize the appearance. +Markers are used to provide information about the exact point location. You can add a shape to adorn each data point. Markers can be enabled by using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/markerSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/color.html) - used to change the color of the marker shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/borderWidth.html) - used to change the stroke width of the marker shape. @@ -66,7 +66,7 @@ Markers are used to provide information about the exact point location. You can ### Customizing marker shapes -Markers can be assigned with different shapes using the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/MarkerSettings.html) property. By default, markers are rendered with [`DataMarkerType.circle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html) shape. The available shapes of markers are listed below. +Markers can be assigned with different shapes using the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) property. By default, markers are rendered with [`DataMarkerType.circle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#circle) shape. The available shapes of markers are listed below. * circle * rectangle @@ -119,7 +119,7 @@ Markers can be assigned with different shapes using the [`shape`](https://pub.de ### Image marker -The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/MarkerSettings.html) as [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html) and provide the image using [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) property. +The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) as [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html) and provide the image using [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#image) property. {% tabs %} {% highlight dart hl_lines="17" %} @@ -163,12 +163,12 @@ The markers can be rendered with desired image as shape. For this you have to sp ## Data label -Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. +Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. -* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html). +* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. @@ -177,7 +177,7 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// * [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label. * [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label. -* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Cartesian data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html). +* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Cartesian data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderRadius.html) - used to add the rounded corners to the data label shape. * [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - used to rotate the labels. * [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/offset.html) - used to move the data label vertically or horizontally from its position. @@ -274,7 +274,7 @@ Import the following package to use label format in your application, `import "p ### Label position -The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) property is used to position the Cartesian chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. +The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Cartesian chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. {% tabs %} {% highlight dart hl_lines="16" %} @@ -361,7 +361,7 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l ### Point text mapping -The [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/dataLabelMapper.html) property is used to map the text from data source. +The [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelMapper.html) property is used to map the text from data source. {% tabs %} {% highlight dart hl_lines="24" %} @@ -414,7 +414,7 @@ The [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/ ### Label template -You can customize the appearance of the data label with your own template using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dataLabelSettings.html). +You can customize the appearance of the data label with your own template using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). {% tabs %} {% highlight dart %} @@ -499,7 +499,7 @@ Data label and its connector line in the Cartesian charts for the point value 0 ### Data label padding -The [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/offset.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dataLabelSettings.html) can be used to add padding for the data label to move it in both vertically and horizontally direction from its position. It takes the logical pixel value for x and y values as input. +The [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/offset.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) can be used to add padding for the data label to move it in both vertically and horizontally direction from its position. It takes the logical pixel value for x and y values as input. >**Note**: This is not applicable for other widgets like Circular, Pyramid and Funnel charts. diff --git a/Flutter/cartesian-charts/technical-indicators.md b/Flutter/cartesian-charts/technical-indicators.md index a83234ce1..06dbe74fb 100644 --- a/Flutter/cartesian-charts/technical-indicators.md +++ b/Flutter/cartesian-charts/technical-indicators.md @@ -234,7 +234,7 @@ Refer the following example, This is mostly using indicator having [`shortPeriod`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/shortPeriod.html) and [`longPeriod`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/longPeriod.html) for defining the motion of the indicator. -Also you can draw [`MacdType.line`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html), [`MacdType.histogram`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html) MACD or [`MacdType.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html) types using the [`macdType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/macdType.html) property, +Also you can draw [`MacdType.line`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html#line), [`MacdType.histogram`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html#histogram) MACD or [`MacdType.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdType.html#both) types using the [`macdType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/macdType.html) property, The [`macdLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/macdLineColor.html) property is used to define the color for the MACD line and the [`histogramNegativeColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/histogramNegativeColor.html) and [`histogramPositiveColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MacdIndicator/histogramPositiveColor.html) property is used to define the color for the MACD histogram. @@ -607,7 +607,7 @@ Refer the following example, ## Legend for technical indicators -Legend provides information about the series rendered in the chart. Legend for the indicator is rendered along with the series legend when the legend is set to be visible. Also when the [ `name` ](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/name.html) property is given to an indicator, the legend name is changed based on the indicator name.[`legendItemText`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/legendItemText.html) can also be provided for changing the name of the legend. In default rendering the [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/legendIconType.html) will be a horizontal line. +Legend provides information about the series rendered in the chart. Legend for the indicator is rendered along with the series legend when the legend is set to be visible. Also when the [ `name` ](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/name.html) property is given to an indicator, the legend name is changed based on the indicator name. [`legendItemText`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/legendItemText.html) can also be provided for changing the name of the legend. In default rendering the [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/legendIconType.html) will be a horizontal line. The following code example can define the legend. diff --git a/Flutter/cartesian-charts/trackball-crosshair.md b/Flutter/cartesian-charts/trackball-crosshair.md index 3bf522277..145db8246 100644 --- a/Flutter/cartesian-charts/trackball-crosshair.md +++ b/Flutter/cartesian-charts/trackball-crosshair.md @@ -84,10 +84,10 @@ You can use the following properties to customize the appearance of trackball to The [`tooltipDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipDisplayMode.html) property is used to specify whether to display label for all the data points along the vertical line or display only single label. Following are the options you can set to this property, -* [`TrackballDisplayMode.floatAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html) - displays label for all the data points along the tracker line. -* [`TrackballDisplayMode.nearestPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html) - displays label for single data point that is nearer to the touch contact position. -* [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html) - displays label for all the data points grouped and positioned at the top of the chart area. -* [`TrackballDisplayMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html) - doesn't display the label. +* [`TrackballDisplayMode.floatAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#floatAllPoints) - displays label for all the data points along the tracker line. +* [`TrackballDisplayMode.nearestPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#nearestPoint) - displays label for single data point that is nearer to the touch contact position. +* [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#groupAllPoints) - displays label for all the data points grouped and positioned at the top of the chart area. +* [`TrackballDisplayMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#none) - doesn't display the label. {% tabs %} {% highlight dart hl_lines="7" %} @@ -134,11 +134,11 @@ The [`tooltipDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_char The position of trackball tooltip can be changed using the [`tooltipAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipAlignment.html) property of [`trackballBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/trackballBehavior.html). The following options are available in [`tooltipAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipAlignment.html). -* [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) - aligns the trackball tooltip to the top position of plot area. -* [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) - aligns the trackball tooltip to the bottom position of plot area. -* [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) - aligns the trackball tooltip to the center position of plot area. +* [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near) - aligns the trackball tooltip to the top position of plot area. +* [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far) - aligns the trackball tooltip to the bottom position of plot area. +* [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) - aligns the trackball tooltip to the center position of plot area. ->**Note**: The [`tooltipAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipAlignment.html) is only applicable for trackball display mode [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html). +>**Note**: The [`tooltipAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipAlignment.html) is only applicable for trackball display mode [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#groupAllPoints). {% tabs %} {% highlight dart hl_lines="7" %} @@ -181,7 +181,7 @@ The position of trackball tooltip can be changed using the [`tooltipAlignment`]( ![Label alignment in Flutter Cartesian Charts.](images/trackball-crosshair/flutter-cartesian-charts-label-alignment.jpg) ->**Note**: This is applicable only when the [`tooltipDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipDisplayMode.html) is set to [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html). +>**Note**: This is applicable only when the [`tooltipDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/tooltipDisplayMode.html) is set to [`TrackballDisplayMode.groupAllPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballDisplayMode.html#groupAllPoints). ### Label format diff --git a/Flutter/cartesian-charts/zoom-pan.md b/Flutter/cartesian-charts/zoom-pan.md index ff4272b10..c6ae19a06 100644 --- a/Flutter/cartesian-charts/zoom-pan.md +++ b/Flutter/cartesian-charts/zoom-pan.md @@ -188,7 +188,7 @@ Following screenshot shows the zoomed area **Show axis tooltip** -The axis tooltip on selection zooming can be enabled using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/enable.html) property of [`InteractiveTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip-class.html). You can customize the appearance of axis tooltip using the following properties. +The axis tooltip on selection zooming can be enabled using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip/enable.html) property of [`InteractiveTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip-class.html). You can customize the appearance of axis tooltip using the following properties. * [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip/enable.html) - used to enable the axis tooltip. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip/borderWidth.html) - used to change the stroke width of the axis tooltip. @@ -350,7 +350,7 @@ The [`maximumZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_charts Panning can be performed on a zoomed axis. You can pan the zoomed chart with [`enablePanning`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enablePanning.html) property. Defaults to `false`. -If zoom mode is set to [`zoomMode.x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html) means you can only pan to the horizontal direction, in case the [`zoomMode.y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html) means you can pan only to the vertical direction and [`zoomMode.xy`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html) means you can pan to both horizontal and vertical directions on the chart. +If zoom mode is set to [`zoomMode.x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#x) means you can only pan to the horizontal direction, in case the [`zoomMode.y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#y) means you can pan only to the vertical direction and [`zoomMode.xy`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#xy) means you can pan to both horizontal and vertical directions on the chart. {% tabs %} {% highlight dart hl_lines="7" %} From 9b815a859d66e035e0c45c340c4fc0c4c6bf2ef7 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Wed, 16 Jul 2025 09:02:19 +0530 Subject: [PATCH 02/13] FLUT-969263-[others][flutter]: Completed adding API links that mismatched --- .../cartesian-charts/trackball-crosshair.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/Flutter/cartesian-charts/trackball-crosshair.md b/Flutter/cartesian-charts/trackball-crosshair.md index 145db8246..aa5028b22 100644 --- a/Flutter/cartesian-charts/trackball-crosshair.md +++ b/Flutter/cartesian-charts/trackball-crosshair.md @@ -185,7 +185,7 @@ The position of trackball tooltip can be changed using the [`tooltipAlignment`]( ### Label format -By default, axis value will be displayed in the tooltip, and it can be customized using [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property by adding desired text as prefix or suffix. +By default, axis value will be displayed in the tooltip, and it can be customized using [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip/format.html) property by adding desired text as prefix or suffix. {% tabs %} {% highlight dart hl_lines="9" %} @@ -235,10 +235,10 @@ The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/l The ActivationMode enum contains the following values: -* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/activationMode.html) - activates trackball only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/activationMode.html) - activates trackball only when performing single tap action. -* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/activationMode.html) - activates trackball only when performing double tap action. -* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/activationMode.html) - Hides the visibility of trackball when setting activation mode to none. It will be activated when calling the [`show`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/show.html) method. +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates trackball only when performing the long press action. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - activates trackball only when performing single tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates trackball only when performing double tap action. +* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - Hides the visibility of trackball when setting activation mode to none. It will be activated when calling the [`show`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/show.html) method. {% tabs %} {% highlight dart hl_lines="8" %} @@ -427,9 +427,9 @@ And moreover, the trackball tooltip will render on the right side of the trackba Trackball markers are used to provide information about the exact point location. You can add a shape to adorn each data point when the trackball is visible. Trackball markers can be enabled by using the [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property of [`TrackballMarkerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings-class.html). The below [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property determines whether the trackball marker should be visible or not when the trackball is enabled in the chart -* [`TrackballVisibilityMode.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html) - If the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property in the series [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html) is set to true, then the trackball marker will also be displayed for that particular series, else it will not be displayed. -* [`TrackballVisibilityMode.visible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html) - Makes the trackball marker visible for all the series irrespective of considering the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property's value in the [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html). -* [`TrackballVisibilityMode.hidden`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html) - Hides the trackball marker for all the series. +* [`TrackballVisibilityMode.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html#auto) - If the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property in the series [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html) is set to true, then the trackball marker will also be displayed for that particular series, else it will not be displayed. +* [`TrackballVisibilityMode.visible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html#visible) - Makes the trackball marker visible for all the series irrespective of considering the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property's value in the [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html). +* [`TrackballVisibilityMode.hidden`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html#hidden) - Hides the trackball marker for all the series. Also refer, [marker customization](./marker-datalabel#Marker) for customizing the appearance of trackball marker. @@ -740,7 +740,7 @@ Defaults to `true`. Crosshair has a vertical and horizontal line to view the value of the axis. -Crosshair lines can be enabled by using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/enable.html) property in the [`crosshairBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/CrosshairBehavior.html). Likewise tooltip label for an axis can be enabled by using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/enable.html) property of [`interactiveTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interactiveTooltip.html) in the corresponding axis. The [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/hideDelay.html) property can be used to specify a disappear delay for the crosshair. +Crosshair lines can be enabled by using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/enable.html) property in the [`crosshairBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/CrosshairBehavior.html). Likewise tooltip label for an axis can be enabled by using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/InteractiveTooltip/enable.html) property of [`interactiveTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interactiveTooltip.html) in the corresponding axis. The [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/hideDelay.html) property can be used to specify a disappear delay for the crosshair. The crosshair state will be preserved on the device's orientation change and on browser resize. For example, if the crosshair's ['hideDelay'](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/hideDelay.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of crosshair display, the crosshair will be displayed for the next 5,000ms in landscape mode before disappearing. @@ -849,7 +849,7 @@ The axis tooltip can be enabled using [`enable`](https://pub.dev/documentation/s ### Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/activationMode.html) property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress). The ActivationMode enum contains the following values: @@ -891,7 +891,7 @@ The ActivationMode enum contains the following values: {% endhighlight %} {% endtabs %} -Also refer [`crosshair`](./events#oncrosshairpositionchanging) and [`trackball`](./events#ontrackballpositionchanging) events for customizing the crosshair and trackball further. +Also refer [`crosshair`](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncrosshairpositionchanging) and [`trackball`](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging) events for customizing the crosshair and trackball further. #### See Also From 7820720dfacdbd15b51012aa2d998d918493f649 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Thu, 17 Jul 2025 17:26:12 +0530 Subject: [PATCH 03/13] FLUT-969263-[others][flutter]: Completed adding API links for funnel chart --- Flutter/funnel-chart/chart-appearance.md | 6 +++--- Flutter/funnel-chart/datalabel.md | 14 +++++++------- Flutter/funnel-chart/export-funnel-chart.md | 4 ++-- Flutter/funnel-chart/funnel-customization.md | 6 +++--- Flutter/funnel-chart/legend.md | 14 +++++++------- Flutter/funnel-chart/selection.md | 12 ++++++------ Flutter/funnel-chart/series-customization.md | 10 +++++----- Flutter/funnel-chart/tooltip.md | 14 +++++++------- 8 files changed, 40 insertions(+), 40 deletions(-) diff --git a/Flutter/funnel-chart/chart-appearance.md b/Flutter/funnel-chart/chart-appearance.md index b5499077e..9dfd91ef7 100644 --- a/Flutter/funnel-chart/chart-appearance.md +++ b/Flutter/funnel-chart/chart-appearance.md @@ -11,10 +11,10 @@ documentation: ug ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +Chart renders based on the parent widget's size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. {% tabs %} -{% highlight dart hl_lines="13 14" %} +{% highlight dart hl_lines="7 8" %} @override Widget build(BuildContext context) { @@ -39,7 +39,7 @@ Chart renders based on the parent widget size. If you need the chart to be rende Margin to the chart can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/margin.html) property. {% tabs %} -{% highlight dart hl_lines="9" %} +{% highlight dart hl_lines="20" %} @override Widget build(BuildContext context) { diff --git a/Flutter/funnel-chart/datalabel.md b/Flutter/funnel-chart/datalabel.md index e062081c5..6d13830d2 100644 --- a/Flutter/funnel-chart/datalabel.md +++ b/Flutter/funnel-chart/datalabel.md @@ -9,12 +9,12 @@ documentation: ug # Data label in Flutter Funnel Chart (SfFunnelChart) -Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. +Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. -* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html). +* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. @@ -23,7 +23,7 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// * [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label. * [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label. -* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Funnel data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html). +* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Funnel data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderRadius.html) - used to add the rounded corners to the data label shape. * [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - used to rotate the labels. @@ -70,9 +70,9 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// ## Positioning the labels -The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. +The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. -The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Funnel series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html). By default the label of Funnel chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html) the series. +The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Funnel series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside). By default the label of Funnel chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) the series. {% tabs %} {% highlight dart hl_lines="14" %} @@ -186,9 +186,9 @@ If the user didn't provide text color to the data label, then by default, the sa ## 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`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes the priority. +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`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none) then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes the priority. -Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html). +Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none). >**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. diff --git a/Flutter/funnel-chart/export-funnel-chart.md b/Flutter/funnel-chart/export-funnel-chart.md index b1f646970..6b4782c8b 100644 --- a/Flutter/funnel-chart/export-funnel-chart.md +++ b/Flutter/funnel-chart/export-funnel-chart.md @@ -9,7 +9,7 @@ documentation: ug # Exporting in Flutter Funnel Chart (SfFunnelChart) -[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides support to export the funnel chart as a PNG image or as PDF document. +[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides support to export the funnel chart as a PNG image or as a PDF document. ## Export image @@ -122,7 +122,7 @@ To export the funnel chart as a PNG image, we can get the image by calling [`toI ## Export PDF -Similar to the above way, we can also export the rendered Funnel chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below. +Similar to the above method, we can also export the rendered Funnel chart as a PDF document. We create the pdf document using PDF component. This can be done at the application level itself. Please find the code snippet below. **Add dependency** diff --git a/Flutter/funnel-chart/funnel-customization.md b/Flutter/funnel-chart/funnel-customization.md index 07bc8792d..2c6cc276a 100644 --- a/Flutter/funnel-chart/funnel-customization.md +++ b/Flutter/funnel-chart/funnel-customization.md @@ -11,10 +11,10 @@ documentation: ug To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/series.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The following properties are used to customize the appearance of a funnel segment: -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/borderWidth.html) - changes the stroke width of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/borderColor.html) - changes the stroke color of the series. -* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/pointColorMapper.html) - Maps the color from data source. +* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) - Maps the color from data source. {% tabs %} {% highlight dart %} diff --git a/Flutter/funnel-chart/legend.md b/Flutter/funnel-chart/legend.md index d84d73009..d8730013a 100644 --- a/Flutter/funnel-chart/legend.md +++ b/Flutter/funnel-chart/legend.md @@ -9,7 +9,7 @@ documentation: ug # Legend in Flutter Funnel Chart (SfFunnelChart) -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. {% tabs %} {% highlight dart hl_lines="14" %} @@ -51,7 +51,7 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ## Customizing legend -The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/name.html) property of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) is used to define the label for the corresponding series legend item and for [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. +The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) is used to define the label for the corresponding series legend item and for [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape. @@ -209,7 +209,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Legend overflow -The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html). +The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). {% tabs %} {% highlight dart hl_lines="11" %} @@ -223,7 +223,7 @@ The legend items can be placed in multiple rows or scroll can be enabled using t child: SfFunnelChart( legend: Legend( isVisible: true, - // Overflowing legend content will be wraped + // Overflowing legend content will be wrapped overflowMode: LegendItemOverflowMode.wrap ), series: FunnelSeries( @@ -247,8 +247,8 @@ The legend items can be placed in multiple rows or scroll can be enabled using t You can change the position of the legend inside the chart. The following properties are used to customize the position of legend. **auto** position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. -* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html). -* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html). Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html). +* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). +* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#auto). Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). {% tabs %} {% highlight dart hl_lines="11" %} @@ -283,7 +283,7 @@ You can change the position of the legend inside the chart. The following proper ## Floating legend -Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) is [`LegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html), then the legend will be placed in the top but in the position added to the actual top position. +Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) is [`LegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#top), then the legend will be placed in the top but in the position added to the actual top position. Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. {% tabs %} diff --git a/Flutter/funnel-chart/selection.md b/Flutter/funnel-chart/selection.md index 4b1a49aff..6baa767f2 100644 --- a/Flutter/funnel-chart/selection.md +++ b/Flutter/funnel-chart/selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in Flutter Funnel Chart (SfFunnelChart) -The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series. +The selection feature in chart lets you to select a segment in a series or the series itself. This feature allows you to select either individual or clusters of segments in the chart series. {% tabs %} {% highlight dart %} @@ -126,7 +126,7 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## Selection on initial rendering -You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/initialSelectedDataIndexes.html) property of chart. +You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/initialSelectedDataIndexes.html) property of chart. {% tabs %} {% highlight dart %} @@ -151,7 +151,7 @@ You can select a point or series programmatically on a chart using [`initialSele ## Toggle selection -You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property true or false. If set to true, deselection will be performed else the point will not get deselected. +You can decide whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property true or false. If set to true, deselection will be performed else the point will not get deselected. This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. @@ -186,7 +186,7 @@ Defaults to `true`. {% endhighlight %} {% endtabs %} -Also refer [selection event](./events#onselectionchanged) for customizing the selection further. +Also refer [selection event](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onselectionchanged) for customizing the selection further. ## Methods in SelectionBehavior @@ -195,9 +195,9 @@ Also refer [selection event](./events#onselectionchanged) for customizing the se The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectDataPoints.html) method is used to select the data point programmatically. The required arguments are listed below. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - index of the point which needs to be selected. -* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0. +* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0. ->**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but, it is based on the API values specified in the chart. +>**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but it is based on the API values specified in the chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/funnel-chart/series-customization.md b/Flutter/funnel-chart/series-customization.md index 9adee2839..c43f24a8e 100644 --- a/Flutter/funnel-chart/series-customization.md +++ b/Flutter/funnel-chart/series-customization.md @@ -11,7 +11,7 @@ documentation: ug ## Animation -[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. +[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. {% tabs %} {% highlight dart %} @@ -39,7 +39,7 @@ documentation: ug ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. {% tabs %} {% highlight dart %} @@ -80,7 +80,7 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l ## Empty points -The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). +The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). {% tabs %} {% highlight dart %} @@ -117,7 +117,7 @@ The data points that has null value are considered as empty points. Empty data p ### Empty point customization -Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. +Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. {% tabs %} {% highlight dart %} @@ -158,7 +158,7 @@ Specific color for empty point can be set by [`color`](https://pub.dev/documenta ## Color mapping for data points -The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/pointColorMapper.html) property is used to map the color field from the data source. +The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property is used to map the color field from the data source. {% tabs %} {% highlight dart %} diff --git a/Flutter/funnel-chart/tooltip.md b/Flutter/funnel-chart/tooltip.md index b494318d8..2e28e06ac 100644 --- a/Flutter/funnel-chart/tooltip.md +++ b/Flutter/funnel-chart/tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Flutter Funnel Chart (SfFunnelChart) -Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as true. +Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as true. The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. @@ -154,7 +154,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom ## Tooltip positioning -The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html). +The tooltip can be displayed either at a fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). {% tabs %} {% highlight dart %} @@ -234,14 +234,14 @@ You can customize the appearance of the tooltip with your own widget by using th ## Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). The ActivationMode enum contains the following values: -* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing single tap action. -* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing double tap action. -* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - hides the visibility of tooltip when setting activation mode to none. +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates tooltip only when performing the long press action. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - activates tooltip only when performing single tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates tooltip only when performing double tap action. +* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - hides the visibility of tooltip when setting activation mode to none. {% tabs %} {% highlight dart %} From 6f67f7a2b478f66afcbaff1ed20cb72a536b73c7 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Fri, 18 Jul 2025 14:34:36 +0530 Subject: [PATCH 04/13] FLUT-969263-[others][flutter]: Improved funnel chart API document --- Flutter/funnel-chart/accessibility.md | 4 ++-- Flutter/funnel-chart/callbacks.md | 14 +++++++------- Flutter/funnel-chart/right-to-left.md | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/Flutter/funnel-chart/accessibility.md b/Flutter/funnel-chart/accessibility.md index 0d52d4dd9..9f4eea025 100644 --- a/Flutter/funnel-chart/accessibility.md +++ b/Flutter/funnel-chart/accessibility.md @@ -25,7 +25,7 @@ The customization of colors can be done for the following chart elements. ## Large fonts -The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). And also it allows to change the font size of all elements in Funnel chart. +The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). And also it allows to change the font size of all elements in Funnel chart. * [Chart title](https://help.syncfusion.com/flutter/funnel-chart/chart-title) * [Data label](https://help.syncfusion.com/flutter/funnel-chart/datalabel) * [Legend title](https://help.syncfusion.com/flutter/funnel-chart/legend#legend-title) @@ -35,6 +35,6 @@ The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/la ## Easily tappable targets The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides callback support to notify when tapping on the essential elements in the chart. -* [Data points](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onpointtapped) +* [Data points](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onpointtap) * [Data labels](https://help.syncfusion.com/flutter/funnel-chart/callbacks#ondatalabeltapped) * [Legend](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onlegendtapped) diff --git a/Flutter/funnel-chart/callbacks.md b/Flutter/funnel-chart/callbacks.md index 749e0af25..d3d5bc21e 100644 --- a/Flutter/funnel-chart/callbacks.md +++ b/Flutter/funnel-chart/callbacks.md @@ -156,7 +156,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onSelectionChanged.html) Callback contains the following arguments. * [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series. -* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index. +* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index. * [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series. * [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedColor.html) - specifies color of the unselected data points or series. @@ -204,7 +204,7 @@ Triggers while selection changes. Here you can customize the selectedColor, unse Triggers when tapping on the data label of the data point in the series. The [`onDataLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelTapped.html) Callback contains the following arguments. * [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/position.html) - specifies the position of the tapped data label in logical pixels. -* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/seriesIndex.html) - Specifies the series index of the tapped data label +* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/seriesIndex.html) - Specifies the series index of the tapped data label. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/pointIndex.html) - Specifies the point index of the tapped data label. * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/text.html) - Specifies the content of the tapped data label. * [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/dataLabelSettings.html) - to get the data label customization options specified in that particular series. @@ -237,7 +237,7 @@ Triggers when tapping on the data label of the data point in the series. The [`o ## onPointTap -Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointTap.html) callback contains the following arguments. +Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -268,7 +268,7 @@ Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/do ## onPointDoubleTap -Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointDoubleTap.html) callback contains the following arguments. +Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -299,7 +299,7 @@ Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub. ## onPointLongPress -Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointLongPress.html) callback contains the following arguments. +Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -395,7 +395,7 @@ Triggers when touched or clicked on the chart area. You can get the tapped regio ## onRendererCreated -Triggers when the series renderer is created. This callback can be used to obtain the [`FunnelSeriesController`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeriesController-class.html) instance, which is used to access the the public methods in the series. +Triggers when the series renderer is created. This callback can be used to obtain the [`FunnelSeriesController`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeriesController-class.html) instance, which is used to access the public methods in the series. {% tabs %} {% highlight dart %} @@ -434,7 +434,7 @@ Triggers when the series renderer is created. This callback can be used to obtai chartData.removeAt(0); //Added a point to the data source chartData.add(ChartData(3, 23)); - //Here accessed the public method of the series. + //Here we accessed the public method of the series. funnelSeriesController!.updateDataSource( addedDataIndexes: [chartData.length - 1], removedDataIndexes: [0], diff --git a/Flutter/funnel-chart/right-to-left.md b/Flutter/funnel-chart/right-to-left.md index 63bf2b269..9f3a3b759 100644 --- a/Flutter/funnel-chart/right-to-left.md +++ b/Flutter/funnel-chart/right-to-left.md @@ -9,7 +9,7 @@ documentation: ug # Right To Left (RTL) in Flutter Funnel Chart (SfFunnelChart) -Funnel chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. +Funnel chart supports right to left rendering. However, series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. ## RTL rendering ways @@ -17,7 +17,7 @@ Right to left rendering can be switched in the following ways: ### Wrapping the SfFunnelChart with Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). +To change the rendering direction from right to left, you can wrap the [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="5" %} @@ -78,7 +78,7 @@ To change the chart rendering direction from right to left, you can change the [ ### Legend -Right to left rendering is effective for the legend in the chart. Legend items will be rendered from right to left direction. i.e. the legend text will appear on the left first, followed by the legend icon on the right. +Right to left rendering is effective for the legend in the chart. Legend items will be rendered from right to left direction, i.e., the legend text will appear on the left first, followed by the legend icon on the right. {% tabs %} {% highlight dart %} From 3f9d589ec76a66832b00bd0cbe4ac7a37d1bfbfe Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Sun, 20 Jul 2025 18:03:55 +0530 Subject: [PATCH 05/13] FLUT-969263-[others][flutter]: Completed adding API links for pyramid chart --- Flutter/pyramid-chart/accessibility.md | 4 +- Flutter/pyramid-chart/callbacks.md | 8 ++-- Flutter/pyramid-chart/chart-appearance.md | 2 +- Flutter/pyramid-chart/chart-title.md | 6 +-- Flutter/pyramid-chart/datalabel.md | 38 +++++++++---------- Flutter/pyramid-chart/export-pyramid-chart.md | 6 +-- Flutter/pyramid-chart/getting-started.md | 10 ++--- Flutter/pyramid-chart/legend.md | 10 ++--- Flutter/pyramid-chart/overview.md | 4 +- .../pyramid-chart/pyramid-customization.md | 22 +++++------ Flutter/pyramid-chart/right-to-left.md | 6 +-- Flutter/pyramid-chart/selection.md | 8 ++-- Flutter/pyramid-chart/series-customization.md | 12 +++--- Flutter/pyramid-chart/tooltip.md | 14 +++---- 14 files changed, 75 insertions(+), 75 deletions(-) diff --git a/Flutter/pyramid-chart/accessibility.md b/Flutter/pyramid-chart/accessibility.md index 5af5652ac..49a6cb9e4 100644 --- a/Flutter/pyramid-chart/accessibility.md +++ b/Flutter/pyramid-chart/accessibility.md @@ -11,7 +11,7 @@ documentation: ug ## Sufficient contrast -The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. +The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set colors for all UI elements. The customization of colors can be done for the following chart elements. * [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title) @@ -25,7 +25,7 @@ The customization of colors can be done for the following chart elements. ## Large fonts -The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in Pyramid chart. +The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the Pyramid chart. * [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title) * [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel) * [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title) diff --git a/Flutter/pyramid-chart/callbacks.md b/Flutter/pyramid-chart/callbacks.md index fcd678e7a..25a5364bc 100644 --- a/Flutter/pyramid-chart/callbacks.md +++ b/Flutter/pyramid-chart/callbacks.md @@ -156,7 +156,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onSelectionChanged.html) Callback contains the following arguments. * [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series. -* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index. +* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index. * [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series. * [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedColor.html) - specifies color of the unselected data points or series. @@ -239,7 +239,7 @@ Triggers when tapping on the data label of the data point in the series. The [`o ## onPointTap -Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointTap.html) callback contains the following arguments. +Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -270,7 +270,7 @@ Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/do ## onPointDoubleTap -Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointDoubleTap.html) callback contains the following arguments. +Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -301,7 +301,7 @@ Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub. ## onPointLongPress -Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointLongPress.html) callback contains the following arguments. +Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. diff --git a/Flutter/pyramid-chart/chart-appearance.md b/Flutter/pyramid-chart/chart-appearance.md index 0d5039a0f..7a01bf76d 100644 --- a/Flutter/pyramid-chart/chart-appearance.md +++ b/Flutter/pyramid-chart/chart-appearance.md @@ -11,7 +11,7 @@ documentation: ug ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +The chart renders based on the parent widget's size. If you need the chart to be rendered in a specific size, then set the size(width/height) to the parent widget. {% tabs %} {% highlight dart hl_lines="13 14" %} diff --git a/Flutter/pyramid-chart/chart-title.md b/Flutter/pyramid-chart/chart-title.md index ffe83f4c2..85e540220 100644 --- a/Flutter/pyramid-chart/chart-title.md +++ b/Flutter/pyramid-chart/chart-title.md @@ -9,9 +9,9 @@ documentation: ug # Chart title in Flutter Pyramid Chart (SfPyramidChart) -You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. -Following properties can be used to customize its appearance. +The Following properties can be used to customize its appearance. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/backgroundColor.html) - used to change the background color. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderColor.html) - used to change the border color. @@ -24,7 +24,7 @@ Following properties can be used to customize its appearance. ### Title Alignment -You can align the title text content horizontally to the near, center or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html). +You can align the title text content horizontally to the near, center, or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html). {% tabs %} {% highlight dart %} diff --git a/Flutter/pyramid-chart/datalabel.md b/Flutter/pyramid-chart/datalabel.md index 5230e4c45..069ae5e6d 100644 --- a/Flutter/pyramid-chart/datalabel.md +++ b/Flutter/pyramid-chart/datalabel.md @@ -9,12 +9,12 @@ documentation: ug # Data label in Flutter Pyramid Chart (SfPyramidChart) -Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. +Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. -* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html). +* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. @@ -23,7 +23,7 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// * [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label. * [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label. -* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Pyramid data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html). +* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Pyramid data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderRadius.html) - used to add the rounded corners to the data label shape. * [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - used to rotate the labels. * [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/offset.html) - used to move the data label vertically or horizontally from its position. @@ -32,7 +32,7 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// {% tabs %} -{% highlight dart hl_lines="8" %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -80,10 +80,10 @@ This feature is used to connect label and data point using a line. It can be ena * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/color.html) - used to change the color of the line * [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/width.html) - used to change the stroke thickness of the line * [`length`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/length.html) - specifies the length of the connector line. -* [`type`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/type.html) - specifies the shape of connector line either [`ConnectorType.curve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorType.html) or [`ConnectorType.line`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorType.html). +* [`type`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/type.html) - specifies the shape of connector line either [`ConnectorType.curve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorType.html#curve) or [`ConnectorType.line`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorType.html#line). {% tabs %} -{% highlight dart hl_lines="18" %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { @@ -116,9 +116,9 @@ This feature is used to connect label and data point using a line. It can be ena ## Positioning the labels -The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) property is used to position the Pyramid chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. +The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Pyramid chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. -The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Pyramid series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html). By default the label of Pyramid chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html) the series. +The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Pyramid series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside). By default the label of Pyramid chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) the series. {% tabs %} {% highlight dart hl_lines="14" %} @@ -190,7 +190,7 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l ## Templating the labels -You can customize the appearance of the data label with your own template using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/dataLabelSettings.html). +You can customize the appearance of the data label with your own template using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). {% tabs %} {% highlight dart %} @@ -273,9 +273,9 @@ If the user didn’t provide text color to the data label, then by default, the ## 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`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes the priority. +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`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none) then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes priority; otherwise, [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes priority -Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html). +Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none). >**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. @@ -301,18 +301,18 @@ Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutt ## Smart labels -This feature is used to arrange the data labels smartly and avoid the intersection when there is overlapping of labels. The enum property called the [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html) in [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is used to arrange the data labels smartly when labels get intersect. By default, the label intersection action property is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html). +This feature is used to arrange the data labels smartly and avoid the intersection when there is overlapping of labels. The enum property called the [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift) in [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is used to arrange the data labels smartly when labels get intersect. By default, the label intersection action property is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift). -If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), then the overlapped labels will shift to outside the slices and arrange smartly. If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), then the overlapped labels will be hidden. +If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift), then the overlapped labels will shift to outside the slices and arrange smartly. If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#hide), then the overlapped labels will be hidden. -If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), then the overlapped labels arrange smartly. If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), then the overlapped labels will be hidden. +If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift), then the overlapped labels arrange smartly. If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#hide), then the overlapped labels will be hidden. -If the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), then the overlapped labels will be visible irrespective of [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html). +If the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#none), then the overlapped labels will be visible irrespective of [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html). -When the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html), and if the data label goes out of the chart area, then the labels got trimmed and the tooltip is shown when clicking/tapping the data label. The values of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) are listed below. -* [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html) - hides the intersected data labels. -* [`LabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html) - intersected data labels will be visible. -* [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html) - smartly arranges the overlapped data labels. +When the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift), and if the data label goes out of the chart area, then the labels get trimmed and the tooltip is shown when clicking/tapping the data label. The values of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) are listed below. +* [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#hide) - hides the intersected data labels. +* [`LabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#none) - intersected data labels will be visible. +* [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift) - smartly arranges the overlapped data labels. {% tabs %} {% highlight dart hl_lines="34" %} diff --git a/Flutter/pyramid-chart/export-pyramid-chart.md b/Flutter/pyramid-chart/export-pyramid-chart.md index 75e8a044f..2ad578ab9 100644 --- a/Flutter/pyramid-chart/export-pyramid-chart.md +++ b/Flutter/pyramid-chart/export-pyramid-chart.md @@ -9,11 +9,11 @@ documentation: ug # Exporting in Flutter Pyramid Chart (SfPyramidChart) -[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides support to export the pyramid chart as a PNG image or as PDF document. +[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides support to export the pyramid chart as a PNG image or as a PDF document. ## Export image -To export the pyramid chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. +To export the pyramid chart as a PNG image, you can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. {% tabs %} {% highlight dart %} @@ -122,7 +122,7 @@ To export the pyramid chart as a PNG image, we can get the image by calling [`to ### Export PDF -Similar to the above way, we can also export the rendered Pyramid chart as a PDF document. We create the PDF document using PDF component. This can be done in the application level itself and please find the code snippet below. +Similar to the above method, we can also export the rendered Pyramid chart as a PDF document. You create the PDF document using PDF component. This can be done at the application level itself. Please find the code snippet below. **Add dependency** diff --git a/Flutter/pyramid-chart/getting-started.md b/Flutter/pyramid-chart/getting-started.md index 9cac33542..ec8b7c634 100644 --- a/Flutter/pyramid-chart/getting-started.md +++ b/Flutter/pyramid-chart/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. -To get start quickly with our Flutter chart widget, you can check out this video. +To get started quickly with our Flutter chart widget, you can check out this video. @@ -61,7 +61,7 @@ Import the following package in your Dart code. ## Initialize chart -Once the package has been imported, initialize the chart as a child of any widget. SfPyramidChart can be used to render pyramid charts. Here, as we are rendering pyramid chart, initialize SfPyramidChart widget as a child of Container widget. +Once the package has been imported, initialize the chart as a child of any widget. The SfPyramidChart can be used to render pyramid charts. Here, as we are rendering pyramid chart, initialize SfPyramidChart widget as a child of Container widget. {% tabs %} {% highlight dart hl_lines="7" %} @@ -81,11 +81,11 @@ Once the package has been imported, initialize the chart as a child of any widge {% endhighlight %} {% endtabs %} -_note_ : An empty chart will be displayed.This is charts default behavior. +_note_ : An empty chart will be displayed. This is charts default behavior. ## Bind data source -Based on your data, initialize the series type. In the series, you need to map the data source and the fields for x and y data points. Here, pyramid series is rendered that is demonstrated in the following code snippet. +Based on your data, initialize the series type. In the series, you need to map the data source and the fields for x and y data points. Here, a pyramid series is rendered as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} @@ -193,7 +193,7 @@ The legend provides information about the series rendered in the chart. You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { diff --git a/Flutter/pyramid-chart/legend.md b/Flutter/pyramid-chart/legend.md index 9fa154cf7..75a50afac 100644 --- a/Flutter/pyramid-chart/legend.md +++ b/Flutter/pyramid-chart/legend.md @@ -9,7 +9,7 @@ documentation: ug # Legend in Flutter Pyramid Chart (SfPyramidChart) -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. {% tabs %} {% highlight dart hl_lines="14" %} @@ -51,7 +51,7 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ## Customizing legend -The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/name.html) property of [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html) is used to define the label for the corresponding series legend item and for [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. +The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html) is used to define the label for the corresponding series legend item and for [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape. @@ -213,7 +213,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Legend overflow -The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html). +The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). {% tabs %} {% highlight dart hl_lines="11" %} @@ -251,8 +251,8 @@ The legend items can be placed in multiple rows or scroll can be enabled using t You can change the position of the legend inside the chart. The following properties are used to customize the position of legend. **auto** position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. -* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html). -* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html). Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html). +* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). +* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#auto). Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). {% tabs %} {% highlight dart hl_lines="11" %} diff --git a/Flutter/pyramid-chart/overview.md b/Flutter/pyramid-chart/overview.md index b69c08bc9..4b23c38e5 100644 --- a/Flutter/pyramid-chart/overview.md +++ b/Flutter/pyramid-chart/overview.md @@ -15,10 +15,10 @@ Syncfusion® Flutter Pyramid Chart (SfPyramidChart) widget is writ ## Key Features -* It Supports [`Pyramid Chart`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pyramid-chart) chart series and it is more user friendly and has greater UI visualization. +* It supports [`Pyramid Chart`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pyramid-chart) chart series and it is more user-friendly and provides greater UI visualization. * The end-user experience is greatly enhanced by including the user interaction features such as callbacks, selection, tooltip, and explode in chart. -* Legends display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds. +* Legends display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if items exceed the available bounds. * Provides various options to customize the chart features, labels, legends, series, etc. and visualize them accordingly. diff --git a/Flutter/pyramid-chart/pyramid-customization.md b/Flutter/pyramid-chart/pyramid-customization.md index 147e3e4f6..41b70349e 100644 --- a/Flutter/pyramid-chart/pyramid-customization.md +++ b/Flutter/pyramid-chart/pyramid-customization.md @@ -11,10 +11,10 @@ documentation: ug To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/series.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The following properties can be used to customize the appearance of a pyramid segment. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/borderWidth.html) - changes the stroke width of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/borderColor.html) - changes the stroke color of the series. -* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/pointColorMapper.html) - maps the color from data source. +* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) - maps the color from data source. {% tabs %} {% highlight dart %} @@ -32,7 +32,7 @@ To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.d ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -55,7 +55,7 @@ To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.d ## Pyramid modes -You can render the pyramid series as [`PyramidMode.linear`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html) or [`PyramidMode.surface`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html) mode. In linear mode, the height of the pyramid segment is based on the Y value, and in surface mode, area of the pyramid segment is based on the Y value. The default value of [`PyramidMode.pyramidMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html) property is [`PyramidMode.linear`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html). +You can render the pyramid series as [`PyramidMode.linear`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html#linear) or [`PyramidMode.surface`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html#surface) mode. In linear mode, the height of the pyramid segment is based on the Y value, and in surface mode, the area of the pyramid segment is based on the Y value. The default value of [`PyramidMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html) property is [`PyramidMode.linear`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidMode.html#linear). {% tabs %} {% highlight dart hl_lines="8" %} @@ -74,7 +74,7 @@ You can render the pyramid series as [`PyramidMode.linear`](https://pub.dev/docu ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -111,7 +111,7 @@ You can modify the size of pyramid series using the [`height`](https://pub.dev/d ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -147,7 +147,7 @@ You can control the gap between the two segments using the [`gapRatio`](https:// ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -164,7 +164,7 @@ You can control the gap between the two segments using the [`gapRatio`](https:// ## Explode segments -You can explode a pyramid segment using the [`explodeIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/explodeIndex.html) property. The [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/explodeOffset.html) property is used to specify the exploded segment’s distance. +You can explode a specific pyramid segment using the [`explodeIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/explodeIndex.html) property. The [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/explodeOffset.html) property is used to specify the exploded segment’s distance. Also, the segments can be exploded by tapping the segment. @@ -187,7 +187,7 @@ Also, the segments can be exploded by tapping the segment. ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -227,7 +227,7 @@ The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) diff --git a/Flutter/pyramid-chart/right-to-left.md b/Flutter/pyramid-chart/right-to-left.md index 6d8445689..d40c46c6f 100644 --- a/Flutter/pyramid-chart/right-to-left.md +++ b/Flutter/pyramid-chart/right-to-left.md @@ -9,7 +9,7 @@ documentation: ug # Right To Left (RTL) in Flutter Pyramid Chart (SfPyramidChart) -Pyramid chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. +Pyramid chart supports right to left rendering. However, series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. ## RTL rendering ways @@ -17,7 +17,7 @@ Right to left rendering can be switched in the following ways: ### Wrapping the SfPyramidChart with Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). +To change the rendering direction from right to left, you can wrap the [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="5" %} @@ -120,7 +120,7 @@ Right to left rendering is effective for the legend in the chart. Legend items w ### Tooltip -Right-to-left rendering is applicable for [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements.By default, the tooltip content will be `point.x : point.y`, in RTL rendering the tooltip content will be `point.y : point.x`. If you wish the format to be applied as it is despite RTL rendering in this case, you can make use of [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onTooltipRender.html) callback. +Right-to-left rendering is applicable for [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements.By default, the tooltip content will be `point.x : point.y`; in RTL rendering the tooltip content will be `point.y : point.x`. If you wish the format to be applied as it is despite RTL rendering in this case, you can make use of [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onTooltipRender.html) callback. {% tabs %} {% highlight dart %} diff --git a/Flutter/pyramid-chart/selection.md b/Flutter/pyramid-chart/selection.md index 84d122c62..6bdb1cb6e 100644 --- a/Flutter/pyramid-chart/selection.md +++ b/Flutter/pyramid-chart/selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in Flutter Pyramid Chart (SfPyramidChart) -The selection feature in chart lets you to select in a segment in a series or the series itself. This feature allows you to select either individual or cluster of segments in the chart series. +The selection feature in chart lets you to select in a segment in a series or the series itself. This feature allows you select either individual or cluster of segments in the chart series. {% tabs %} {% highlight dart %} @@ -99,7 +99,7 @@ You can customize the segments using the below properties. ## Multi-selection -Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) property of chart. +Multiple segment selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) property of chart. {% tabs %} {% highlight dart %} @@ -166,7 +166,7 @@ Defaults to `true`. ## Selection on initial rendering -You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/initialSelectedDataIndexes.html) property of chart. +You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/initialSelectedDataIndexes.html) property of chart. {% tabs %} {% highlight dart %} @@ -202,7 +202,7 @@ The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the point index value. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - specifies the series index value and this is an optional parameter. By default it will be considered as 0. ->**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but, it is based on the API values specified in the chart. +>**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) is also applicable for this, but it is based on the API values specified in the chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/pyramid-chart/series-customization.md b/Flutter/pyramid-chart/series-customization.md index 78a443040..91fec9119 100644 --- a/Flutter/pyramid-chart/series-customization.md +++ b/Flutter/pyramid-chart/series-customization.md @@ -11,7 +11,7 @@ documentation: ug ## Animation -[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, and you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. +[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides animation support for the series. The series will be animated while rendering. Animation is enabled by default, and you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. {% tabs %} {% highlight dart %} @@ -39,7 +39,7 @@ documentation: ug ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. {% tabs %} {% highlight dart %} @@ -80,7 +80,7 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l ## Empty points -The data points that has null values are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). +The data points that have null values are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). {% tabs %} {% highlight dart %} @@ -117,7 +117,7 @@ The data points that has null values are considered as empty points. Empty data ### Empty point customization -Specific color for empty points can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. +Specific color for empty points can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. {% tabs %} {% highlight dart %} @@ -158,7 +158,7 @@ Specific color for empty points can be set by [`color`](https://pub.dev/document ## Color mapping for data points -The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/pointColorMapper.html) property is used to map the color field from the data source. +The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property is used to map the color field from the data source. {% tabs %} {% highlight dart %} @@ -180,7 +180,7 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - //Map Color for each dataPoint datasource. + //Map color for each dataPoint in datasource. pointColorMapper: (ChartData data,_) => data.color, ) ) diff --git a/Flutter/pyramid-chart/tooltip.md b/Flutter/pyramid-chart/tooltip.md index 1f7955d31..bf048765b 100644 --- a/Flutter/pyramid-chart/tooltip.md +++ b/Flutter/pyramid-chart/tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Flutter Pyramid Chart (SfPyramidChart) -Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`. +Chart provides tooltip support for all series types. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`. The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. @@ -167,7 +167,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom ## Tooltip positioning -The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html). +The tooltip can be configured to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). {% tabs %} {% highlight dart %} @@ -255,14 +255,14 @@ You can customize the appearance of the tooltip with your own widget by using th ## Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). -The ActivationMode enum contains the following values: +The ActivationMode enum includes the following values: * [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing single tap action. -* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing double tap action. -* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - hides the visibility of tooltip when setting activation mode to none. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates tooltip only when performing single tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates tooltip only when performing double tap action. +* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - hides the visibility of tooltip when setting activation mode to none. {% tabs %} {% highlight dart %} From 03765e34f330a505f063a64807522b70bdfc7158 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Wed, 23 Jul 2025 21:43:05 +0530 Subject: [PATCH 06/13] FLUT-969263-[others][flutter]: Completed adding API links for cartesian chart --- .../cartesian-charts/axis-customization.md | 44 +++++++++---------- Flutter/cartesian-charts/axis-types.md | 42 +++++++++--------- Flutter/cartesian-charts/chart-title.md | 6 +-- .../chart-types/area-chart.md | 20 ++++----- .../cartesian-charts/chart-types/bar-chart.md | 18 ++++---- .../chart-types/box-and-whisker-chart.md | 12 ++--- .../chart-types/bubble-chart.md | 14 +++--- .../chart-types/candle-chart.md | 6 +-- .../chart-types/column-chart.md | 16 +++---- .../chart-types/error-bar-chart.md | 36 +++++++-------- .../chart-types/fast-line-chart.md | 8 ++-- .../chart-types/hilo-chart.md | 12 ++--- .../chart-types/histogram-chart.md | 10 ++--- .../chart-types/line-chart.md | 12 ++--- .../chart-types/ohlc-chart.md | 30 ++++++------- .../chart-types/range-area-chart.md | 4 +- .../chart-types/range-column-chart.md | 4 +- .../chart-types/scatter-chart.md | 14 +++--- .../chart-types/spline-area-chart.md | 16 +++---- .../chart-types/spline-chart.md | 14 +++--- .../chart-types/spline-range-area-chart.md | 14 +++--- .../chart-types/stacked-area-100-chart.md | 12 ++--- .../chart-types/stacked-area-chart.md | 8 ++-- .../chart-types/stacked-bar-100-chart.md | 12 ++--- .../chart-types/stacked-bar-chart.md | 8 ++-- .../chart-types/stacked-column-100-chart.md | 12 ++--- .../chart-types/stacked-column-chart.md | 10 ++--- .../chart-types/stacked-line-100-chart.md | 8 ++-- .../chart-types/stacked-line-chart.md | 6 +-- .../chart-types/step-area-chart.md | 10 ++--- .../chart-types/step-line-chart.md | 12 ++--- .../chart-types/waterfall-chart.md | 10 ++--- Flutter/cartesian-charts/getting-started.md | 6 +-- Flutter/cartesian-charts/overview.md | 2 +- .../cartesian-charts/series-customization.md | 20 ++++----- 35 files changed, 244 insertions(+), 244 deletions(-) diff --git a/Flutter/cartesian-charts/axis-customization.md b/Flutter/cartesian-charts/axis-customization.md index cbf9a50a0..4ba791952 100644 --- a/Flutter/cartesian-charts/axis-customization.md +++ b/Flutter/cartesian-charts/axis-customization.md @@ -190,10 +190,10 @@ The [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/lates ### Axis border customization -The color and width of the axis border can be customized with [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderWidth.html) properties respectively. The border types can be changed using the [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) property and the default value is [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html). Another value of [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) is [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html). +The color and width of the axis border can be customized with [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderWidth.html) properties respectively. The border types can be changed using the [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) property and the default value is [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#rectangle). Another value of [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) is [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#withoutTopAndBottom). -* [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html) - Renders the border as a rectangle around a label. -* [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html) - Renders the border without the top and bottom of a rectangle. +* [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#rectangle) - Renders the border as a rectangle around a label. +* [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#withoutTopAndBottom) - Renders the border without the top and bottom of a rectangle. {% tabs %} {% highlight dart %} @@ -325,7 +325,7 @@ Axis labels and ticks can be positioned inside or outside the chart area by usin ### Edge label placement -Labels with long text at the edges of an axis may appear partially outside the chart. The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) property can be used to avoid the partial appearance of labels at the corners. Default value of this property is [`EdgeLabelPlacement.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html). Other available options of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) are shift and hide. [`EdgeLabelPlacement.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html) option will move the edge labels inside the axis bounds, where the [`EdgeLabelPlacement.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html) option will hides the edge labels. +Labels with long text at the edges of an axis may appear partially outside the chart. The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) property can be used to avoid the partial appearance of labels at the corners. Default value of this property is [`EdgeLabelPlacement.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#none). Other available options of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) are shift and hide. [`EdgeLabelPlacement.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#shift) option will move the edge labels inside the axis bounds, where the [`EdgeLabelPlacement.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#hide) option will hides the edge labels. {% tabs %} {% highlight dart hl_lines="9" %} @@ -531,11 +531,11 @@ The [`initialVisibleMinimum`](https://pub.dev/documentation/syncfusion_flutter_c {% endhighlight %} {% endtabs %} -Also refer [`minimum`](./axis-types) and [`maximum`](./axis-types) range of an axis. +Also refer [`minimum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/maximum.html) range of an axis. ### Initial visible maximum -The [`visibleMaximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/initialVisibleMaximum.html) property defines the highest data point finally displayed on an axis. When panning is enabled, you can pan to the actual maximum range of an axis. This property only works at load time. Use the controller to programmatically change the visible maximum. +The [`initialVisibleMaximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/initialVisibleMaximum.html) property defines the highest data point finally displayed on an axis. When panning is enabled, you can pan to the actual maximum range of an axis. This property only works at load time. Use the controller to programmatically change the visible maximum. {% tabs %} {% highlight dart hl_lines="8" %} @@ -590,7 +590,7 @@ The [`plotOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/lates ### Plot offset start -The [`plotOffsetStart`]() property is used to offset the rendering of the axis at start position. The following code snippet demonstrates how to apply the plot offset start of an axis. +The [`plotOffsetStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffsetStart.html) property is used to offset the rendering of the axis at start position. The following code snippet demonstrates how to apply the plot offset start of an axis. {% tabs %} {% highlight dart hl_lines="9" %} @@ -618,7 +618,7 @@ The [`plotOffsetStart`]() property is used to offset the rendering of the axis a ### Plot offset end -The [`plotOffsetEnd`]() property is used to offset the rendering of the axis at end position. The following code snippet demonstrates how to apply the plot offset end of an axis. +The [`plotOffsetEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffsetEnd.html) property is used to offset the rendering of the axis at end position. The following code snippet demonstrates how to apply the plot offset end of an axis. {% tabs %} {% highlight dart hl_lines="9" %} @@ -646,7 +646,7 @@ The [`plotOffsetEnd`]() property is used to offset the rendering of the axis at ## Smart axis labels -Axis labels may overlap with each other based on chart dimensions and label size. The [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) property of axis is used to avoid overlapping of axis labels. The default value of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) is [`AxisLabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html). Other available values are [`AxisLabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html), [`AxisLabelIntersectAction.wrap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html), [`AxisLabelIntersectAction.multipleRows`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html), [`AxisLabelIntersectAction.rotate45`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html) and [`AxisLabelIntersectAction.rotate90`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html). +Axis labels may overlap with each other based on chart dimensions and label size. The [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) property of axis is used to avoid overlapping of axis labels. The default value of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) is [`AxisLabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#hide). Other available values are [`AxisLabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#none), [`AxisLabelIntersectAction.wrap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#wrap), [`AxisLabelIntersectAction.multipleRows`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#multipleRows), [`AxisLabelIntersectAction.rotate45`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate45) and [`AxisLabelIntersectAction.rotate90`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate90). {% tabs %} {% highlight dart hl_lines="9" %} @@ -1126,11 +1126,11 @@ By default, the chart is rendered with primary x axis and primary y axis. But, t The position of axis label can be aligned using the [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelAlignment.html) property.The following options are available in axis label alignment. -* [`LabelAlignment.start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html) - if it is a horizontal axis, aligns the labels before the gridline and if it is a vertical axis, aligns the labels below the gridline. +* [`LabelAlignment.start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html#start) - if it is a horizontal axis, aligns the labels before the gridline and if it is a vertical axis, aligns the labels below the gridline. -* [`LabelAlignment.end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html) - if it is a horizontal axis, aligns the labels after the gridline and if it is a vertical axis, align the labels above the gridline. +* [`LabelAlignment.end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html#end) - if it is a horizontal axis, aligns the labels after the gridline and if it is a vertical axis, align the labels above the gridline. -* [`LabelAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html) - aligns the axis label to the center of the gridlines. +* [`LabelAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelAlignment.html#center) - aligns the axis label to the center of the gridlines. ### Center @@ -1220,7 +1220,7 @@ If it is a horizontal axis, aligns the labels after the gridline and if it is a ![end](images/axis-customization/end.png) ## Auto range calculation -Determines the value axis range, based on the visible data points or based on the overall data points available in chart. +This feature determines the value axis range, based on the visible data points or based on the overall data points available in chart. By default, value axis range will be calculated automatically based on the visible data points on dynamic changes. The visible data points are changed on performing interactions like pinch zooming, selection zooming, panning and also on specifying [`initialVisibleMinimum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/initialVisibleMinimum.html) and [`initialVisibleMaximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/initialVisibleMaximum.html) values. @@ -1339,7 +1339,7 @@ Auto scrolling feature available in SfCartesianChart is used to ensure that spec ### AutoScrollingDeltaType -In [`DateTimeAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis-class.html), you can apply auto scrolling delta value in Years, Months, Days, Hours, Minutes, Seconds and auto by setting [`AutoScrollingDeltaType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/autoScrollingDeltaType.html) property. Default value of this property is [`auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeIntervalType.html) and the delta will be calculated automatically based on range. +In [`DateTimeAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis-class.html), you can apply auto scrolling delta value in Years, Months, Days, Hours, Minutes, Seconds and auto by setting [`AutoScrollingDeltaType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/autoScrollingDeltaType.html) property. Default value of this property is [`DateTimeIntervalType.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeIntervalType.html#auto) and the delta will be calculated automatically based on range. {% tabs %} {% highlight dart hl_lines="6" %} @@ -1444,9 +1444,9 @@ Here you need to specify the [`minimum`](https://pub.dev/documentation/syncfusio The multi-level labels in the Cartesian chart are used to categorize axis labels and they can be added to the chart axis by using the [`multiLevelLabels`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/multiLevelLabels.html) property. The below properties are used to add the multi-level label. * [`start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/start.html) - Represents the start value of an multi-level label. -* [`end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/end.html) - Represents the end value of an multi-level label. -* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/text.html) - Represents the text which needs to be rendered for a multilevel label. -* [`level`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/text.html) - Represents the hierarchical structure of a multi level label. +* [`end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/end.html) - Represents the end value of an multi-level label. +* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/text.html) - Represents the text which needs to be rendered for a multilevel label. +* [`level`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericMultiLevelLabel/level.html) - Represents the hierarchical structure of a multi level label. ### Multi-level labels in numeric axis @@ -1579,7 +1579,7 @@ The [`CategoricalMultiLevelLabel`](https://pub.dev/documentation/syncfusion_flut {% endhighlight %} {% endtabs %} -![Multi-level labels](images/axis-customization/category_multi_level_label.jpg) +![Multi-level-labels](images/axis-customization/category_multi_level_label.jpg) ### Multi-level labels in date time axis @@ -1865,10 +1865,10 @@ The border width, color and type of the multi-level label can be customized usin The different types of multi-level label's border are mentioned below, -* [`MultiLevelBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html) - Renders the multi-level label border as rectangle. -* [`MultiLevelBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html) - Renders the multi-level label border as rectangle without it's top and bottom. -* [`MultiLevelBorderType.squareBrace`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html) - Renders the multi-level label border as square braces. -* [`MultiLevelBorderType.curlyBrace`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html) - Renders the multi-level label border as curly braces. +* [`MultiLevelBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html#rectangle) - Renders the multi-level label border as rectangle. +* [`MultiLevelBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html#withoutTopAndBottom) - Renders the multi-level label border as rectangle without it's top and bottom. +* [`MultiLevelBorderType.squareBrace`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html#squareBrace) - Renders the multi-level label border as square braces. +* [`MultiLevelBorderType.curlyBrace`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelBorderType.html#curlyBrace) - Renders the multi-level label border as curly braces. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/axis-types.md b/Flutter/cartesian-charts/axis-types.md index 3986c5557..3744859af 100644 --- a/Flutter/cartesian-charts/axis-types.md +++ b/Flutter/cartesian-charts/axis-types.md @@ -11,7 +11,7 @@ documentation: ug Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis. -Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale: +The vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale: * Category * Numeric @@ -213,7 +213,7 @@ Padding can be applied to the minimum and maximum extremes of the axis range usi **additional** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additional`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), the axis range will be rounded and an interval of the axis will be added as padding to the minimum and maximum values of the range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additional`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additional), the axis range will be rounded and an interval of the axis will be added as padding to the minimum and maximum values of the range. {% tabs %} {% highlight dart hl_lines="9" %} @@ -247,7 +247,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **additionalStart** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), the axis range will be rounded and an interval of the axis will be added as padding to the minimum value of the range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additionalStart), the axis range will be rounded and an interval of the axis will be added as padding to the minimum value of the range. {% tabs %} {% highlight dart hl_lines="9" %} @@ -281,7 +281,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **additionalEnd** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), the axis range will be rounded and an interval of the axis will be added as padding to the maximum value of the range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additionalEnd), the axis range will be rounded and an interval of the axis will be added as padding to the maximum value of the range. {% tabs %} {% highlight dart hl_lines="9" %} @@ -315,7 +315,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **auto** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), the horizontal numeric axis takes none for padding calculation, whereas the vertical numeric axis takes normal for padding calculation. This is also the default value of rangePadding. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#auto), the horizontal numeric axis takes none for padding calculation, whereas the vertical numeric axis takes normal for padding calculation. This is also the default value of rangePadding. {% tabs %} {% highlight dart hl_lines="8" %} @@ -348,7 +348,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **none** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), padding will not be applied to the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#none), padding will not be applied to the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -379,7 +379,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **normal** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), padding is applied to the axis based on the default range calculation. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#normal), padding is applied to the axis based on the default range calculation. {% tabs %} {% highlight dart hl_lines="8" %} @@ -412,7 +412,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **round** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.round`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible numeric value. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.round`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#round), axis range will be rounded to the nearest possible numeric value. {% tabs %} {% highlight dart hl_lines="8" %} @@ -445,7 +445,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **roundStart** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible numeric value at the start position of the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#roundStart), axis range will be rounded to the nearest possible numeric value at the start position of the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -478,7 +478,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **roundEnd** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible numeric value at the end position of the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#roundEnd), axis range will be rounded to the nearest possible numeric value at the end position of the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -601,7 +601,7 @@ The [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/la ![Decimal Places](images/axis-types/numeric_decimalplaces.jpg) >**Note**: -* In order to control the decimal places of the y-axis labels, you need to use [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/decimalPlaces.html) property of the axis along with setting the [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) to [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html). +* In order to control the decimal places of the y-axis labels, you need to use [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/decimalPlaces.html) property of the axis along with setting the [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) to [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#none). * For x-axis labels, setting the [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/decimalPlaces.html) alone is enough. ## Category axis @@ -652,7 +652,7 @@ Category axis displays text labels instead of numbers. When the string values ar ### Placing labels between the ticks -Labels in category axis can be placed on the ticks by setting the [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) to [`LabelPlacement.onTicks`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelPlacement.html). The default value of the [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) property is [`LabelPlacement.betweenTicks`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelPlacement.html). So, the labels will be placed between the ticks by default. +Labels in category axis can be placed on the ticks by setting the [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) to [`LabelPlacement.onTicks`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelPlacement.html#onTicks). The default value of the [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) property is [`LabelPlacement.betweenTicks`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelPlacement.html#betweenTicks). So, the labels will be placed between the ticks by default. {% tabs %} {% highlight dart hl_lines="9" %} @@ -951,7 +951,7 @@ Padding can be applied to the [`minimum`](https://pub.dev/documentation/syncfusi **none** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), padding will not be applied to the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#none), padding will not be applied to the axis. {% tabs %} {% highlight dart hl_lines="15" %} @@ -991,7 +991,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **round** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.round`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible date-time value. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.round`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#round), axis range will be rounded to the nearest possible date-time value. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1018,7 +1018,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **roundStart** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible date-time value at the start position of the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#roundStart), axis range will be rounded to the nearest possible date-time value at the start position of the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1045,7 +1045,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **roundEnd** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), axis range will be rounded to the nearest possible date-time value at the end position of the axis. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.roundEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#roundEnd), axis range will be rounded to the nearest possible date-time value at the end position of the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1072,7 +1072,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **additional** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additional`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), range will be rounded and date-time interval of the axis will be added as padding to the minimum and maximum extremes of a range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additional`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additional), range will be rounded and date-time interval of the axis will be added as padding to the minimum and maximum extremes of a range. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1099,7 +1099,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **additionalStart** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), range will be rounded and date-time interval of the axis will be added as padding to the minimum extreme of a range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additionalStart), range will be rounded and date-time interval of the axis will be added as padding to the minimum extreme of a range. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1126,7 +1126,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **additionalEnd** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), range will be rounded and date-time interval of the axis will be added as padding to the maximum extreme of a range. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.additionalEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#additionalEnd), range will be rounded and date-time interval of the axis will be added as padding to the maximum extreme of a range. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1153,7 +1153,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut **normal** -When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html), padding will be applied to the axis based on the default range calculation. +When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/rangePadding.html) property is [`ChartRangePadding.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartRangePadding.html#normal), padding will be applied to the axis based on the default range calculation. {% tabs %} {% highlight dart hl_lines="8" %} @@ -1336,7 +1336,7 @@ The Flutter Chart supports the following types of interval for date-time categor ### Formatting the labels -The [`date formats`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeCategoryAxis/dateFormat.html) property formats the date-time category axis labels. The default data-time category axis label can be formatted with various built-in [`DateFormat`](https://api.flutter.dev/flutter/intl/DateFormat-class.html), which depend on the given data source. +The [`date formats`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeCategoryAxis/dateFormat.html) property formats the date-time category axis labels. The default data-time category axis label can be formatted with various built-in [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html), which depend on the given data source. {% tabs %} {% highlight dart hl_lines="11" %} diff --git a/Flutter/cartesian-charts/chart-title.md b/Flutter/cartesian-charts/chart-title.md index 18b5d380f..16c6f1be4 100644 --- a/Flutter/cartesian-charts/chart-title.md +++ b/Flutter/cartesian-charts/chart-title.md @@ -9,9 +9,9 @@ documentation: ug # Chart title in Flutter Cartesian Charts (SfCartesianChart) -You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the Chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. -Following properties can be used to customize its appearance. +The following properties can be used to customize its appearance. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/backgroundColor.html) - used to change the background color. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderColor.html) - used to change the border color. @@ -63,7 +63,7 @@ You can align the title text content horizontally to the near, center or far of ChartData('Apr', 32), ChartData('May', 40) ], - xValueMapper: (ChartData data, _) => data.x, + xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y ) ] diff --git a/Flutter/cartesian-charts/chart-types/area-chart.md b/Flutter/cartesian-charts/chart-types/area-chart.md index 717470094..8eea3b8c6 100644 --- a/Flutter/cartesian-charts/chart-types/area-chart.md +++ b/Flutter/cartesian-charts/chart-types/area-chart.md @@ -14,14 +14,14 @@ To create a Flutter area chart quickly, you can check this video. -To render an area chart, create an instance of [`AreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The area chart shows the filled area to represent the data, but when there are more than a series, this may hide the other series. To get rid of this, increase or decrease the transparency of the series. +To render an area chart, create an instance of [`AreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The area chart shows the filled area to represent the data, but when there are more than one series, this may hide the other series. To get rid of this, increase or decrease the transparency of the series. The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} @@ -65,7 +65,7 @@ The following properties can be used to customize the appearance: ## Border customization -The borders of the area chart can be customized using the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries/borderDrawMode.html) property. The default value of the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries/borderDrawMode.html) property is [`BorderDrawMode.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html). The other values are [`BorderDrawMode.all`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html) and [`BorderDrawMode.excludeBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html). +The borders of the area chart can be customized using the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries/borderDrawMode.html) property. The default value of the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeries/borderDrawMode.html) property is [`BorderDrawMode.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html#top). The other values are [`BorderDrawMode.all`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html#all) and [`BorderDrawMode.excludeBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html#excludeBottom). {% tabs %} {% highlight dart %} @@ -101,7 +101,7 @@ The borders of the area chart can be customized using the [`borderDrawMode`](htt ## Area with gradients -The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/gradient.html) property is used to define the gradient colors. The colors from this property is used for series. +The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/gradient.html) property is used to define the gradient colors. The colors from this property are used for the series. {% tabs %} @@ -171,7 +171,7 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ ## Area with empty points -Data points with a null value are considered empty points. Empty data points are ignored and are not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). +Data points with a null value are considered empty points. Empty data points are ignored and are not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). {% tabs %} {% highlight dart %} @@ -209,8 +209,8 @@ Data points with a null value are considered empty points. Empty data points are AreaSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, - yValueMapper: (ChartData data, _) => data.y,emptyPointSettings: - EmptyPointSettings(mode: EmptyPointMode.zero) + yValueMapper: (ChartData data, _) => data.y, + emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.zero) ) ] ) diff --git a/Flutter/cartesian-charts/chart-types/bar-chart.md b/Flutter/cartesian-charts/chart-types/bar-chart.md index cc75eea54..b856778fc 100644 --- a/Flutter/cartesian-charts/chart-types/bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/bar-chart.md @@ -16,10 +16,10 @@ To create a Flutter bar chart quickly, you can check this video. To render a bar chart, create an instance of [`BarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} @@ -60,10 +60,10 @@ To render a bar chart, create an instance of [`BarSeries`](https://pub.dev/docum The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/spacing.html) property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. {% tabs %} -{% highlight dart hl_lines="13 15" %} +{% highlight dart hl_lines="15" %} @override Widget build(BuildContext context) { @@ -105,7 +105,7 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderRadius.html) property is used to add the rounded corners to the rectangle. {% tabs %} -{% highlight dart hl_lines="12" %} +{% highlight dart hl_lines="19" %} @override Widget build(BuildContext context) { @@ -141,12 +141,12 @@ The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/lat ## Track customization -You can render the bar chart with track. Track is a rectangular bar rendered from the start to the end of the axis. Bar series will be rendered above the track. The [`isTrackVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/isTrackVisible.html) property is used to enable the track. The following properties can be used to customize the appearance: +You can render the bar chart with a track. A track is a rectangular bar rendered from the start to the end of the axis. Bar series will be rendered above the track. The [`isTrackVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/isTrackVisible.html) property is used to enable the track. The following properties can be used to customize the appearance: * [`trackColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/trackColor.html) - changes the color of the track. * [`trackBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/trackBorderWidth.html) - changes the stroke width of the track. * [`trackBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/trackBorderColor.html) - changes the stroke color of the track. -* [`trackPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/trackPadding.html) - Adds padding to the track. +* [`trackPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/trackPadding.html) - adds padding to the track. {% tabs %} {% highlight dart hl_lines="11" %} diff --git a/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md b/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md index c46c34779..db5187171 100644 --- a/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md +++ b/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md @@ -11,14 +11,14 @@ documentation: ug The [Flutter Box and Whisker Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart) can be used to visualize a group of numerical data through their quartiles. It is also referred to as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. -To render a Box and Whisker chart, create an instance of [`BoxAndWhiskerSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties to customize the appearance. +To render a Box and Whisker chart, create an instance of [`BoxAndWhiskerSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the series. * [`BoxPlotMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries/boxPlotMode.html) - used to change the box plot rendering mode. This property is applicable for -[`BoxPlotMode.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html), [`BoxPlotMode.exclusive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html), and [`BoxPlotMode.inclusive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html) values. -* [`showMean`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries/showMean.html) - indication for mean value in box plot. It is set to be true, a cross symbol will be displayed at the mean value, for each data point in box plot. Else, it will not be displayed. +[`BoxPlotMode.normal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html#normal), [`BoxPlotMode.exclusive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html#exclusive), and [`BoxPlotMode.inclusive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxPlotMode.html#inclusive) values. +* [`showMean`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries/showMean.html) - indication for mean value in box plot. If it is set to be true, a cross symbol will be displayed at the mean value, for each data point in box plot. Else, it will not be displayed. * [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries/spacing.html) - spacing between the box plots.The value ranges from 0 to 1, where 1 represents 100% and 0 represents 0% of the available space. {% tabs %} diff --git a/Flutter/cartesian-charts/chart-types/bubble-chart.md b/Flutter/cartesian-charts/chart-types/bubble-chart.md index 8253e1c36..584790e5a 100644 --- a/Flutter/cartesian-charts/chart-types/bubble-chart.md +++ b/Flutter/cartesian-charts/chart-types/bubble-chart.md @@ -11,12 +11,12 @@ documentation: ug To render a bubble chart, create an instance of [`BubbleSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). -Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sizeValueMapper.html) is used to map the size of each bubble segment from data source. +Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/sizeValueMapper.html) is used to map the size of each bubble segment from data source. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke width of the series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/borderColor.html) - changes the stroke width of the series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} @@ -104,7 +104,7 @@ Also refer, [color palette](./series-customization#color-palette), [color mappin ## Bubble with various color -Using the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/pointColorMapper.html) and [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sizeValueMapper.html) properties in the Cartesian charts, the Bubble series with different colors and sizes can be rendered. +Using the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) and [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/sizeValueMapper.html) properties in the Cartesian charts, the Bubble series with different colors and sizes can be rendered. {% tabs %} {% highlight dart %} @@ -186,7 +186,7 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ ## Bubble with multiple series -Using the [`dataSource`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dataSource.html) property in the Map charts, multiple series can be rendered in a bubble chart. +Using the [`dataSource`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataSource.html) property in the Map charts, multiple series can be rendered in a bubble chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/candle-chart.md b/Flutter/cartesian-charts/chart-types/candle-chart.md index 253df147f..4cff2e63c 100644 --- a/Flutter/cartesian-charts/chart-types/candle-chart.md +++ b/Flutter/cartesian-charts/chart-types/candle-chart.md @@ -27,8 +27,8 @@ To render a Candle chart, create an instance of [` CandleSeries`](https://pub.de * [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/highValueMapper.html) - used to get the high values from the series. * [`openValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/openValueMapper.html) - used to get the open values from the series. * [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/closeValueMapper.html) - used to get the close values from the series. -* [`bearFillColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bearColor.html) - bearFillColor will be applied when the opening value is less than the closing value. -* [`bullFillColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bullColor.html) - bullFillColor will be applied when the opening value is greater than closing value. +* [`bearColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bearColor.html) - bearFillColor will be applied when the opening value is less than the closing value. +* [`bullColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bullColor.html) - bullFillColor will be applied when the opening value is greater than closing value. @@ -124,7 +124,7 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha ## Rounded corners -The [`borderRadius`]() property is used to add the rounded corners to the candle. +The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CandleSeries/borderRadius.html) property is used to add the rounded corners to the candle. {% tabs %} {% highlight dart hl_lines="35" %} diff --git a/Flutter/cartesian-charts/chart-types/column-chart.md b/Flutter/cartesian-charts/chart-types/column-chart.md index 101b8c3fe..733cf0463 100644 --- a/Flutter/cartesian-charts/chart-types/column-chart.md +++ b/Flutter/cartesian-charts/chart-types/column-chart.md @@ -9,12 +9,12 @@ documentation: ug # Column Chart in Flutter Cartesian Charts (SfCartesianChart) -To render a column chart, create an instance of [`ColumnSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries-class.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: +To render a column chart, create an instance of [`ColumnSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} @@ -58,7 +58,7 @@ To render a column chart, create an instance of [`ColumnSeries`](https://pub.dev ## Side-by-side series placement -By default, all the column series that have the same x and y-axes are placed side by side in a chart. If you want to place a series one over the other (overlapped), set the [`enableSideBySideSeriesPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableSideBySideSeriesPlacement.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html) to false and configure the [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) property to differentiate the series. The following code snippet and screenshot illustrate the overlapped placement of column series. +By default, all the column series that have the same x and y-axes are placed side by side in a chart. If you want to place a series one over the other (overlapped), set the [`enableSideBySideSeriesPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableSideBySideSeriesPlacement.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html) to false and configure the [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) property to differentiate the series. The following code snippet and screenshot illustrate the overlapped placement of column series. {% tabs %} {% highlight dart hl_lines="16" %} @@ -114,7 +114,7 @@ By default, all the column series that have the same x and y-axes are placed sid The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/spacing.html) property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. {% tabs %} {% highlight dart hl_lines="20 22" %} @@ -204,7 +204,7 @@ The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/lat ## Track customization -Renders column with track. Track is a rectangular bar rendered from the start to the end of the axis. Column series will be rendered above the track. The [`isTrackVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/isTrackVisible.html) property is used to enable the track. The following properties can be used to customize the appearance: +Renders columns with tracks. A track is a rectangular bar rendered from the start to the end of the axis. Column series will be rendered above the track. The [`isTrackVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/isTrackVisible.html) property is used to enable the track. The following properties can be used to customize the appearance: * [`trackColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/trackColor.html) - changes the color of the track. * [`trackBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/trackBorderWidth.html) - changes the stroke width of the track. diff --git a/Flutter/cartesian-charts/chart-types/error-bar-chart.md b/Flutter/cartesian-charts/chart-types/error-bar-chart.md index 8d4d99251..ec0cd580f 100644 --- a/Flutter/cartesian-charts/chart-types/error-bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/error-bar-chart.md @@ -13,13 +13,13 @@ Error bars are graphical representations of the variability of data and used on To render an error bar chart, create an instance of [`ErrorBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries-class.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the stroke width of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the stroke width of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) - renders error bar with dashes. -* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/pointColorMapper.html)- maps the individual colors to the data point. +* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html)- maps the individual colors to the data point. -[`Marker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/MarkerSettings.html), [`data label`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings-class.html), [`trendline`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline-class.html), [`Technical indicators`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators-class.html), and other user interaction features are not applicable for error bar series. And events like [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html), [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointDoubleTap.html) and [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointLongPress.html) are not applicable for this series. +[`Marker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/MarkerSettings.html), [`data label`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings-class.html), [`trendline`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline-class.html), [`Technical indicators`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator-class.html), and other user interaction features are not applicable for error bar series. And events like [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html), [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) and [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) are not applicable for this series. {% tabs %} {% highlight dart %} @@ -65,9 +65,9 @@ To render an error bar chart, create an instance of [`ErrorBarSeries`](https://p ## Type -The [`type`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/type.html) property is used to define the error bar type value. The default value of this property is [`ErrorBarType.fixed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html), and other values are [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html), [`ErrorBarType.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html), [`ErrorBarType.standardDeviation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html) and [`ErrorBarType.standardError`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html). +The [`type`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/type.html) property is used to define the error bar type value. The default value of this property is [`ErrorBarType.fixed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#fixed), and other values are [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#custom), [`ErrorBarType.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#percentage), [`ErrorBarType.standardDeviation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#standardDeviation) and [`ErrorBarType.standardError`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#standardError). -You can customize the error bar depending on the error value by setting the values for [`horizontalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalErrorValue.html) and [`verticalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalErrorValue.html) for all types except [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html). +You can customize the error bar depending on the error value by setting the values for [`horizontalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalErrorValue.html) and [`verticalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalErrorValue.html) for all types except [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#custom). * [`horizontalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalErrorValue.html) - This property horizontally depicts the error value in positive and negative directions. The default value is `1`. * [`verticalErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalErrorValue.html) - This property vertically depicts the error value in positive and negative directions. The default value is `3`. @@ -109,7 +109,7 @@ You can customize the error bar depending on the error value by setting the valu ### Custom type -For [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html) type, you can customize the error bar depending on the error value by setting the values for [`horizontalPositiveErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalPositiveErrorValue.html), [`horizontalNegativeErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalNegativeErrorValue.html), [`verticalPositiveErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalPositiveErrorValue.html) and [`verticalNegativeErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalNegativeErrorValue.html). +For [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarType.html#custom) type, you can customize the error bar depending on the error value by setting the values for [`horizontalPositiveErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalPositiveErrorValue.html), [`horizontalNegativeErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalNegativeErrorValue.html), [`verticalPositiveErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalPositiveErrorValue.html) and [`verticalNegativeErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/verticalNegativeErrorValue.html). * [`horizontalPositiveErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalPositiveErrorValue.html)- This property horizontally depicts the error value in positive direction. The default value is `1`. * [`horizontalNegativeErrorValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/horizontalNegativeErrorValue.html) - This property horizontally depicts the error value in negative direction. The default value is `1`. @@ -157,13 +157,13 @@ For [`ErrorBarType.custom`](https://pub.dev/documentation/syncfusion_flutter_cha ## Mode -The error bar [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html) specifies whether the error bar should be drawn [`RenderingMode.horizontally`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html), [`RenderingMode.vertically`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html), or [`RenderingMode.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html), ways. Use the [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html) option to switch the error bar mode. +The error bar [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html) specifies whether the error bar should be drawn [`RenderingMode.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#horizontal), [`RenderingMode.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#vertical), or [`RenderingMode.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#both), ways. Use the [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html) option to switch the error bar mode. -The default value is [`RenderingMode.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html). You can use the following properties to customize the [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html). +The default value is [`RenderingMode.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#vertical). You can use the following properties to customize the [`mode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/mode.html). -* [`RenderingMode.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html) - This property displays vertical error value only. -* [`RenderingMode.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html) - This property displays horizontal error value only. -* [`RenderingMode.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html) - This property displays both vertical and horizontal error values. +* [`RenderingMode.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#vertical) - This property displays vertical error value only. +* [`RenderingMode.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#horizontal) - This property displays horizontal error value only. +* [`RenderingMode.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RenderingMode.html#both) - This property displays both vertical and horizontal error values. {% tabs %} {% highlight dart hl_lines="21" %} @@ -204,13 +204,13 @@ The default value is [`RenderingMode.vertical`](https://pub.dev/documentation/sy ## Direction -Using the [`direction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/direction.html) option, you can alter the error bar direction to [`Direction.plus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html), [`Direction.minus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html), or [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html) sides. +Using the [`direction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/direction.html) option, you can alter the error bar direction to [`Direction.plus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#plus), [`Direction.minus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#minus), or [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#both) sides. -The default value is [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html). You can use the following properties to customize the [`direction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/direction.html). +The default value is [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#both). You can use the following properties to customize the [`direction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/direction.html). -* [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html) - Used to set error value in positive and negative directions. -* [`Direction.minus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html) - Used to set error value in a negative direction. -* [`Direction.plus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html) - Used to set error value in a positive direction. +* [`Direction.both`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#both) - Used to set error value in positive and negative directions. +* [`Direction.minus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#minus) - Used to set error value in a negative direction. +* [`Direction.plus`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Direction.html#plus) - Used to set error value in a positive direction. {% tabs %} {% highlight dart hl_lines="21" %} diff --git a/Flutter/cartesian-charts/chart-types/fast-line-chart.md b/Flutter/cartesian-charts/chart-types/fast-line-chart.md index 0590c0674..73a2d599a 100644 --- a/Flutter/cartesian-charts/chart-types/fast-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/fast-line-chart.md @@ -9,11 +9,11 @@ documentation: ug # Fast line Chart in Flutter Cartesian Charts (SfCartesianChart) -[`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html) is a line chart, but it loads faster than [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html). You can use this when there are large number of points to be loaded in a chart. To render a fast line chart, create an instance of [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of fast line segment: +[`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html) is a line chart that loads faster than [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html). You can use this when there are a large number of points to be loaded in a chart. To render a fast line chart, create an instance of [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of fast line segment: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/hilo-chart.md b/Flutter/cartesian-charts/chart-types/hilo-chart.md index c179bcc91..f2ec7a5b3 100644 --- a/Flutter/cartesian-charts/chart-types/hilo-chart.md +++ b/Flutter/cartesian-charts/chart-types/hilo-chart.md @@ -18,12 +18,12 @@ HiLo Series illustrates the price movements in stock using the high and low valu To render a HiLo chart, create an instance of [`HiloSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. -* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/lowValueMapper.html) - used to get the low values from the series. -* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/highValueMapper.html) - used to get the high values from the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. +* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/lowValueMapper.html) - used to get the low values from the series. +* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/highValueMapper.html) - used to get the high values from the series. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/histogram-chart.md b/Flutter/cartesian-charts/chart-types/histogram-chart.md index 101208fee..f2dfca624 100644 --- a/Flutter/cartesian-charts/chart-types/histogram-chart.md +++ b/Flutter/cartesian-charts/chart-types/histogram-chart.md @@ -19,12 +19,12 @@ For example, if the [`binInterval`](https://pub.dev/documentation/syncfusion_flu If no value is specified for this property, then the interval will be calculated automatically based on the data points count and value. -You can collapse the normal distribution curve using the [`showNormalDistributionCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/showNormalDistributionCurve.html) property. You can use the following properties to customize the appearance. +You can hide the normal distribution curve using the [`showNormalDistributionCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/showNormalDistributionCurve.html) property. You can use the following properties to customize the appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. * [`curveColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/curveColor.html) - changes the color of the normal distribution curve. * [`curveWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/curveWidth.html) - changes the width of the normal distribution curve. * [`curveDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/curveDashArray.html) - renders the normal distribution curve with dashes. diff --git a/Flutter/cartesian-charts/chart-types/line-chart.md b/Flutter/cartesian-charts/chart-types/line-chart.md index 856fb391f..a63149416 100644 --- a/Flutter/cartesian-charts/chart-types/line-chart.md +++ b/Flutter/cartesian-charts/chart-types/line-chart.md @@ -16,9 +16,9 @@ To create a Flutter line chart quickly, you can check this video. To render a line chart, create an instance of [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. {% tabs %} {% highlight dart %} @@ -64,7 +64,7 @@ To render a line chart, create an instance of [`LineSeries`](https://pub.dev/doc ## Dashed line -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html) is used to render line series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html) is used to render line series with dashes. The odd value is considered as the rendering size and the even value is considered as the gap. {% tabs %} {% highlight dart hl_lines="18" %} @@ -108,7 +108,7 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Multi-colored line -To render a multi-colored line series, map the individual colors to the data using the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/pointColorMapper.html) property. +To render a multi-colored line series, map the individual colors to the data using the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property. {% tabs %} {% highlight dart %} @@ -130,7 +130,7 @@ To render a multi-colored line series, map the individual colors to the data usi ChartData('May', 40, Colors.black) ], // Bind the color for all the data points from the data source - pointColorMapper:(ChartData data, _) => data.color, + pointColorMapper: (ChartData data, _) => data.color, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y ) diff --git a/Flutter/cartesian-charts/chart-types/ohlc-chart.md b/Flutter/cartesian-charts/chart-types/ohlc-chart.md index 46ebdef87..ff90f252b 100644 --- a/Flutter/cartesian-charts/chart-types/ohlc-chart.md +++ b/Flutter/cartesian-charts/chart-types/ohlc-chart.md @@ -14,21 +14,21 @@ To create a Flutter open high low close chart quickly, you can check this video. - OpenHighLowClose series is used to represent the low, high, open and closing values over time. +The OpenHighLowClose series is used to represent the low, high, open and closing values over time. -To render a OpenHighLowClose chart, create an instance of [` hiloOpenCloseSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: +To render a OpenHighLowClose chart, create an instance of [` HiloOpenCloseSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. -* [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/showIndicationForSameValues.html)- used to show indication of the data point with a thin line when its high and low values are same and also when all the values of high, low, open and close are same for the data point. By default is set to be `false`. -* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/lowValueMapper.html) - used to get the low values from the series. -* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/highValueMapper.html) - used to get the high values from the series. -* [`openValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/openValueMapper.html) - used to get the open values from the series. -* [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/closeValueMapper.html) - used to get the close values from the series. -* [`bearFillColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/bearColor.html) - bearFillColor will be applied when the opening value is less than the closing value. -* [`bullFillColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/bullColor.html) - bullFillColor will be applied when the opening value is greater than closing value. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. +* [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloSeries/showIndicationForSameValues.html)- used to show indication of the data point with a thin line when its high and low values are same and also when all the values of high, low, open and close are same for the data point. By default is set to be `false`. +* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/lowValueMapper.html) - used to get the low values from the series. +* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/highValueMapper.html) - used to get the high values from the series. +* [`openValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/openValueMapper.html) - used to get the open values from the series. +* [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/closeValueMapper.html) - used to get the close values from the series. +* [`bearColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bearColor.html) - bearFillColor will be applied when the opening value is less than the closing value. +* [`bullColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FinancialSeriesBase/bullColor.html) - bullFillColor will be applied when the opening value is greater than closing value. @@ -71,12 +71,12 @@ To render a OpenHighLowClose chart, create an instance of [` hiloOpenCloseSeries ## Indication for same values -In the OHLC series, there is a feature for the datapoints indication when their high and low values are same or open and close values or high, low, open and close values are same for a datapoint. For using this indication feature, [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/showIndicationForSameValues.html) property can be set to `true`. +In the OHLC series, there is a feature for the datapoints indication when their high and low values are same or open and close values or high, low, open and close values are same for a datapoint. For using this indication feature, [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloSeries/showIndicationForSameValues.html) property can be set to `true`. The following are the types of indication when the combination of high, low, open and close values are same for a datapoint. * In the OHLC chart, if the open and close values are same then a horizontal line will be drawn at that value by default. -* If the high and low values are same and with [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloOpenCloseSeries/showIndicationForSameValues.html) property set to true then, a thin vertical line is drawn and if API is set to false, the line will not be drawn. +* If the high and low values are same and with [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HiloSeries/showIndicationForSameValues.html) property set to true then, a thin vertical line is drawn and if API is set to false, the line will not be drawn. {% tabs %} {% highlight dart hl_lines="8" %} diff --git a/Flutter/cartesian-charts/chart-types/range-area-chart.md b/Flutter/cartesian-charts/chart-types/range-area-chart.md index e1cbb28c8..87eec19fe 100644 --- a/Flutter/cartesian-charts/chart-types/range-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/range-area-chart.md @@ -18,8 +18,8 @@ To render a range area chart, create an instance of `RangeAreaSeries` and add to Since the [`RangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaSeries-class.html) requires two Y values for a point, your data should contain high and low values. High and low value specifies the maximum and minimum range of the point. -* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/highValueMapper.html) - field in the data source, which is considered as high value for the data points. -* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. +* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/highValueMapper.html) - field in the data source, which is considered as high value for the data points. +* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/range-column-chart.md b/Flutter/cartesian-charts/chart-types/range-column-chart.md index 33016d091..e5265913a 100644 --- a/Flutter/cartesian-charts/chart-types/range-column-chart.md +++ b/Flutter/cartesian-charts/chart-types/range-column-chart.md @@ -18,8 +18,8 @@ To render a range column chart, create an instance of [`RangeColumnSeries`](http Since the [`RangeColumnSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeColumnSeries-class.html) requires two Y values for a point, your data should contain high and low values. High and low value specifies the maximum and minimum range of the point. -* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/highValueMapper.html) - field in the data source, which is considered as high value for the data points. -* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. +* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/highValueMapper.html) - field in the data source, which is considered as high value for the data points. +* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/scatter-chart.md b/Flutter/cartesian-charts/chart-types/scatter-chart.md index 3f35f1146..ea36ee89e 100644 --- a/Flutter/cartesian-charts/chart-types/scatter-chart.md +++ b/Flutter/cartesian-charts/chart-types/scatter-chart.md @@ -11,10 +11,10 @@ documentation: ug To render a scatter chart, create an instance of [`ScatterSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ScatterSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the scatter segment appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} @@ -56,12 +56,12 @@ To render a scatter chart, create an instance of [`ScatterSeries`](https://pub.d ## Change shape and size of the scatter -The [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) property is used to change the rendering shape of scatter series. The available shapes are [`circle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`rectangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`pentagon`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`verticalLine`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`horizontalLine`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`diamond`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`triangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), [`image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html), and [`invertedTriangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html). If [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) shape is specified, then you can assign the image using the [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) property. +The [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) property is used to change the rendering shape of scatter series. The available shapes are [`circle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#circle), [`rectangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#rectangle), [`pentagon`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#pentagon), [`verticalLine`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#verticalLine), [`horizontalLine`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#horizontalLine), [`diamond`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#diamond), [`triangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#triangle), [`image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#image), and [`invertedTriangle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#invertedTriangle). If [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) shape is specified, then you can assign the image using the [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) property. -The [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/width.html) properties of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/markerSettings.html) can be used to change the height and width of the scatter series, respectively. +The [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/width.html) properties of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/markerSettings.html) can be used to change the height and width of the scatter series, respectively. {% tabs %} -{% highlight dart hl_lines="17" %} +{% highlight dart hl_lines="22" %} @override Widget build(BuildContext context) { diff --git a/Flutter/cartesian-charts/chart-types/spline-area-chart.md b/Flutter/cartesian-charts/chart-types/spline-area-chart.md index 984ae2056..009acc6d3 100644 --- a/Flutter/cartesian-charts/chart-types/spline-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-area-chart.md @@ -9,14 +9,14 @@ documentation: ug # Spline area Chart in Flutter Cartesian Charts (SfCartesianChart) -To render a spline area chart, create an instance of [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of spline area chart: +To render a spline area chart, create an instance of [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the spline area chart: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the series. {% tabs %} -{% highlight dart %} +{% highlight dart %} @override Widget build(BuildContext context) { @@ -71,9 +71,9 @@ The [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/lates * cardinal * clamped -By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/splineType.html) is [`natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). +By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/splineType.html) is [`SplineType.natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#natural). -The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/splineType.html) value to [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). When you set the cardinal type, you can specify the desired line tension of the [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html) spline using the [`cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. +The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/splineType.html) value to [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#cardinal). When you set the cardinal type, you can specify the desired line tension of the [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html) spline using the [`cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. {% tabs %} {% highlight dart hl_lines="21" %} @@ -117,7 +117,7 @@ The following code sample demonstrates how to set the [`splineType`](https://pub ## Dashed spline area -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html) is used to render spline area series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html) is used to render spline area series with dashes. The odd value is considered as the rendering size and the even value is considered as gap. {% tabs %} {% highlight dart hl_lines="21" %} diff --git a/Flutter/cartesian-charts/chart-types/spline-chart.md b/Flutter/cartesian-charts/chart-types/spline-chart.md index 8944bee3e..4dbbc22b3 100644 --- a/Flutter/cartesian-charts/chart-types/spline-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-chart.md @@ -9,11 +9,11 @@ documentation: ug # Spline Chart in Flutter Cartesian Charts (SfCartesianChart) -To render a spline chart, create an instance of [`SplineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of spline segment: +To render a spline chart, create an instance of [`SplineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the spline segment: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the series. {% tabs %} {% highlight dart %} @@ -65,9 +65,9 @@ The [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/lates * cardinal * clamped -By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) is [`natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). +By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) is [`SplineType.natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#natural). -The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) value to [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). When you set the cardinal type, you can specify the desired line tension of the [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html) spline using the [`cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. +The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) value to [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#cardinal). When you set the cardinal type, you can specify the desired line tension of the [`cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html) spline using the [`cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. {% tabs %} {% highlight dart hl_lines="18" %} @@ -108,7 +108,7 @@ The following code sample demonstrates how to set the [`splineType`](https://pub ## Dashed spline -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`SplineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/SplineSeries.html) is used to render spline series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`SplineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/SplineSeries.html) is used to render spline series with dashes. The odd value is considered as the rendering size and the even value is considered as gap. {% tabs %} {% highlight dart hl_lines="18" %} diff --git a/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md b/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md index c0728deba..6e23980ee 100644 --- a/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md @@ -17,10 +17,10 @@ To create a Flutter spline range area chart quickly, you can check this video. To render a spline range area chart, create an instance of the [`SplineRangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries-class.html), and add to the series collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). - [`SplineRangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries-class.html) requires two Y values for a point, data should contain high and low values. The high and low values specify the maximum and minimum ranges of a point. + [`SplineRangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries-class.html) requires two Y values for a point; data should contain high and low values. The high and low values specify the maximum and minimum ranges of a point. -* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/highValueMapper.html) - field in the data source, which is considered as high value for the data points. -* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. +* [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/highValueMapper.html) - field in the data source, which is considered as high value for the data points. +* [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeSeriesBase/lowValueMapper.html) - field in the data source, which is considered as low value for the data points. {% tabs %} {% highlight dart %} @@ -67,16 +67,16 @@ To render a spline range area chart, create an instance of the [`SplineRangeArea ## Spline rendering types -The [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) allows you to change the spline curve in series. The following types can be used in [`SplineRangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries-class.html). +The [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/splineType.html) allows you to change the spline curve in series. The following types can be used in [`SplineRangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries-class.html). * natural * monotonic * cardinal * clamped -By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) is [`SplineType.natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). +By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/splineType.html) is [`SplineType.natural`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#natural). -The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/splineType.html) value to [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html). When you set the cardinal type, you can specify the desired line tension of the [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html) spline using the [`SplineType.cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. +The following code sample demonstrates how to set the [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/splineType.html) value to [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#cardinal). When you set the cardinal type, you can specify the desired line tension of the [`SplineType.cardinal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineType.html#cardinal) spline using the [`cardinalSplineTension`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/cardinalSplineTension.html) property. The value of this property ranges from 0 to 1. {% tabs %} {% highlight dart hl_lines="9" %} @@ -108,7 +108,7 @@ The following code sample demonstrates how to set the [`splineType`](https://pub ## Border customization -The borders of the spline range area chart can be customized using the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/borderDrawMode.html) property. The default value of the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/borderDrawMode.html) property is [`RangeAreaBorderMode.all`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaBorderMode.html) and the other value is [`RangeAreaBorderMode.excludeSides`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaBorderMode.html). +The borders of the spline range area chart can be customized using the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/borderDrawMode.html) property. The default value of the [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineRangeAreaSeries/borderDrawMode.html) property is [`RangeAreaBorderMode.all`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaBorderMode.html#all) and the other value is [`RangeAreaBorderMode.excludeSides`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaBorderMode.html#excludeSides). {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md b/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md index 600c04aef..23df11535 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md @@ -15,13 +15,13 @@ To create a Flutter 100% stacked area chart quickly, you can check this video. -To render a 100% stacked area chart, create an instance of `StackingArea100Series` and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). You can use the following properties to customize the 100% stacked area appearance. +To render a 100% stacked area chart, create an instance of `StackedArea100Series` and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). You can use the following properties to customize the 100% stacked area appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. -* [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedArea100Series/borderDrawMode.html) - specifies the type of the border mode and it defaults to [`top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html). +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. +* [`borderDrawMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedArea100Series/borderDrawMode.html) - specifies the type of the border mode and it defaults to [`BorderDrawMode.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BorderDrawMode.html#top). {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-area-chart.md b/Flutter/cartesian-charts/chart-types/stacked-area-chart.md index be94e838b..0cf81b8a6 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-area-chart.md @@ -16,10 +16,10 @@ To create a Flutter stacked area chart quickly, you can check this video. To render a stacked area chart, create an instance of [`StackedAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of stacked line series: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md b/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md index 865a4d5d4..ba97d3029 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md @@ -16,10 +16,10 @@ To create a Flutter 100% stacked bar chart quickly, you can check this video. To render a 100% stacked bar chart, create an instance of [`StackedBar100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBar100Series-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBar100Series/borderRadius.html) - used to add the rounded corners to the rectangle. {% tabs %} @@ -78,10 +78,10 @@ To render a 100% stacked bar chart, create an instance of [`StackedBar100Series` The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBar100Series/spacing.html) property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. {% tabs %} -{% highlight dart hl_lines="13 14 20 21" %} +{% highlight dart hl_lines="21 22 28 29" %} List chartData = [ ChartData('Jan', 45, 47), ChartData('Feb', 45, 47), diff --git a/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md b/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md index 53d98032c..540ca4424 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md @@ -16,10 +16,10 @@ To create a Flutter stacked bar chart quickly, you can check this video. To render a stacked bar chart, create an instance of [`StackedBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBarSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of stacked line series: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md b/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md index e952477fa..068b0aee2 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md @@ -14,12 +14,12 @@ To create a Flutter 100% stacked column chart quickly, you can check this video. -To render a 100% stacked column chart, create an instance of [`StackedColumn100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries-class.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: +To render a 100% stacked column chart, create an instance of [`StackedColumn100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumn100Series-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries-class.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries/borderRadius.html) - used to add the rounded corners to the rectangle. {% tabs %} @@ -69,7 +69,7 @@ To render a 100% stacked column chart, create an instance of [`StackedColumn100S The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumn100Series/spacing.html) property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively. {% tabs %} {% highlight dart hl_lines="13 14 20 21" %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-column-chart.md b/Flutter/cartesian-charts/chart-types/stacked-column-chart.md index 500f79bfd..999d42a41 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-column-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-column-chart.md @@ -16,10 +16,10 @@ To create a Flutter stacked column chart quickly, you can check this video. To render a stacked column chart, create an instance of [`StackedColumnSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of stacked line series: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - changes the stroke width of the series. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - changes the stroke color of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - changes the stroke color of the series. {% tabs %} @@ -146,7 +146,7 @@ You can group and stack the similar stacked series types using the [`groupName`] You can show the cumulative data label values using the [`showCumulativeValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showCumulativeValues.html) property. If the series are grouped using [`groupName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries/groupName.html), then cumulative values will be shown based on grouping. {% tabs %} -{% highlight dart hl_lines="13 23 33 43" %} +{% highlight dart hl_lines="12 21 30 40" %} @override Widget build(BuildContext context) { diff --git a/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md b/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md index cf249d982..8cc961268 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md @@ -16,9 +16,9 @@ To create a Flutter 100% stacked line chart quickly, you can check this video. To render a 100% stacked line chart, create an instance of [`StackedLine100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedLine100Series-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. {% tabs %} {% highlight dart %} @@ -65,7 +65,7 @@ To render a 100% stacked line chart, create an instance of [`StackedLine100Serie ## Dashed line -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedLine100Series/dashArray.html) property of [`StackedLine100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedLine100Series-class.html) is used to render line series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of [`StackedLine100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedLine100Series-class.html) is used to render line series with dashes. Odd value is considered as rendering size and even value is considered as gap. {% tabs %} {% highlight dart hl_lines="11 17 23 29" %} diff --git a/Flutter/cartesian-charts/chart-types/stacked-line-chart.md b/Flutter/cartesian-charts/chart-types/stacked-line-chart.md index 118276caa..207580857 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-line-chart.md @@ -16,9 +16,9 @@ To create a Flutter stacked line chart quickly, you can check this video. To render a stacked line chart, create an instance of [`StackedLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of stacked line series: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. {% tabs %} diff --git a/Flutter/cartesian-charts/chart-types/step-area-chart.md b/Flutter/cartesian-charts/chart-types/step-area-chart.md index 309784e2f..744c0440a 100644 --- a/Flutter/cartesian-charts/chart-types/step-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/step-area-chart.md @@ -9,11 +9,11 @@ documentation: ug # Step area Chart in Flutter Cartesian Charts (SfCartesianChart) -To render a step area chart, create an instance of `StepAreaSeries`, and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of step area chart. +To render a step area chart, create an instance of `StepAreaSeries`, and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the step area chart. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the series. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the series. {% tabs %} {% highlight dart %} @@ -50,7 +50,7 @@ To render a step area chart, create an instance of `StepAreaSeries`, and add it ## Dashed step area -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`StepAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepAreaSeries-class.html) is used to render step area series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`StepAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepAreaSeries-class.html) is used to render step area series with dashes. The odd value is considered as the rendering size and the even value is considered as gap. {% tabs %} {% highlight dart hl_lines="11" %} diff --git a/Flutter/cartesian-charts/chart-types/step-line-chart.md b/Flutter/cartesian-charts/chart-types/step-line-chart.md index 098e288c0..0e685ba57 100644 --- a/Flutter/cartesian-charts/chart-types/step-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/step-line-chart.md @@ -9,11 +9,11 @@ documentation: ug # Step line Chart in Flutter Cartesian Charts (SfCartesianChart) -To render a step line chart, create an instance of [`StepLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of step line chart: +To render a step line chart, create an instance of [`StepLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of the step line chart: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the line. -* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/opacity.html) - controls the transparency of the chart series. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/width.html) - changes the stroke width of the line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the line. +* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/width.html) - changes the stroke width of the line. {% tabs %} {% highlight dart %} @@ -55,10 +55,10 @@ To render a step line chart, create an instance of [`StepLineSeries`](https://pu ## Dashed step line -The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`StepLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepLineSeries-class.html) is used to render step line series with dashes. Odd value is considered as rendering size and even value is considered as gap. +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/dashArray.html) property of the [`StepLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepLineSeries-class.html) is used to render step line series with dashes. The odd value is considered as rendering the size and the even value is considered as gap. {% tabs %} -{% highlight dart hl_lines="12" %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { diff --git a/Flutter/cartesian-charts/chart-types/waterfall-chart.md b/Flutter/cartesian-charts/chart-types/waterfall-chart.md index 0cfb5611a..03072af18 100644 --- a/Flutter/cartesian-charts/chart-types/waterfall-chart.md +++ b/Flutter/cartesian-charts/chart-types/waterfall-chart.md @@ -16,13 +16,13 @@ To render a waterfall chart, create an instance of [`WaterfallSeries`](https://p * [`negativePointsColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/negativePointsColor.html) - changes the color of the negative data points in the series. If no color is specified, then the negative data points will be rendered with the series default color. * [`intermediateSumColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/intermediateSumColor.html) - changes the color of the intermediate sum points in the series. If no color is specified, then the intermediate sum points will be rendered with the series default color. * [`totalSumColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/totalSumColor.html) - changes the color of the total sum points in the series. If no color is specified, then the total sum points will be rendered with the series default color. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/color.html) - changes the color of the series. If no color is specified, then the series will be rendered with the default palette color. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. If no color is specified, then the series will be rendered with the default palette color. * [`connectorLineSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/connectorLineSettings.html) - used to customize the waterfall chart connector line. Data points in waterfall chart are connected using the connector line. Provides the options to change the [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/width.html), [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ConnectorLineSettings/color.html) and [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallConnectorLineSettings/dashArray.html) of the connector line to customize the appearance. * [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/spacing.html) - used to provide spacing between the data points in waterfall chart. The value ranges from 0 to 1, where 1 represents 100% and 0 represents 0% of the available space. -* [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/xValueMapper.html) - field in the data source, which is considered as x-value. -* [`yValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/yValueMapper.html) - field in the data source, which is considered as y-value. -* [`intermediateSumPredicate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/intermediateSumPredicate.html) - the boolean value based on which the data point will be considered as an intermediate sum or not. If this has true value, then that point will be considered as an intermediate sum. Else if it has false, then it will be considered as a normal data point in the chart. -* [`totalSumPredicate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/totalSumPredicate.html) - the boolean value based on which the data point will be considered as the total sum or not. If this has true value, then that point will be considered as a total sum. Else if it has false, then it will be considered as a normal data point in the chart. +* [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) - field in the data source, which is considered as x-value. +* [`yValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries/yValueMapper.html) - field in the data source, which is considered as y-value. +* [`intermediateSumPredicate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/intermediateSumPredicate.html) - the boolean value based on which the data point will be considered as an intermediate sum or not. If this has true value, then that point will be considered as an intermediate sum. Else if it has false, then it will be considered as a normal data point in the chart. +* [`totalSumPredicate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WaterfallSeries/totalSumPredicate.html) - the boolean value based on which the data point will be considered as the total sum or not. If this has true value, then that point will be considered as a total sum. Else if it has false, then it will be considered as a normal data point in the chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/getting-started.md b/Flutter/cartesian-charts/getting-started.md index 36be4312c..9abe2aa87 100644 --- a/Flutter/cartesian-charts/getting-started.md +++ b/Flutter/cartesian-charts/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. -To get start quickly with our Flutter chart widget, you can check out this video. +To get started quickly with our Flutter chart widget, you can check out this video. @@ -65,7 +65,7 @@ Import the following package in your Dart code. Once the package has been imported, initialize the chart as a child of any widget. SfCartesianChart is used to render all kinds of charts which need to be plotted in Cartesian coordinates. Here, as we are plotting line chart, initialize SfCartesianChart widget as a child of Container widget. {% tabs %} -{% highlight dart hl_lines="2 7" %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -192,7 +192,7 @@ You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/ ## Enable data labels -You can add data labels to improve the readability of the chart using the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings-class.html) property. +You can add data labels to improve the readability of the chart using the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) property. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/overview.md b/Flutter/cartesian-charts/overview.md index 5a2908c6f..60da0cbec 100644 --- a/Flutter/cartesian-charts/overview.md +++ b/Flutter/cartesian-charts/overview.md @@ -43,4 +43,4 @@ To get started quickly with our Flutter chart widget, you can check out this vid #### See Also -* [Integrating syncfusion® flutter charts in a flutter web application](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). \ No newline at end of file +* [Integrating Syncfusion® flutter charts in a flutter web application](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). \ No newline at end of file diff --git a/Flutter/cartesian-charts/series-customization.md b/Flutter/cartesian-charts/series-customization.md index e27108d86..d67e17e0d 100644 --- a/Flutter/cartesian-charts/series-customization.md +++ b/Flutter/cartesian-charts/series-customization.md @@ -11,7 +11,7 @@ documentation: ug ## Animation -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, and you can control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/animationDuration.html) property. You can disable the animation by setting this property to 0. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides animation support for the series. Series will be animated during rendering. Animation is enabled by default, and you can control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting this property to 0. {% tabs %} {% highlight dart hl_lines="13" %} @@ -54,7 +54,7 @@ documentation: ug If you wish to perform the initial rendering animation again in the existing series, [`animate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeriesController/animate.html) method should be called. On calling this method, this particular series will be animated again based on the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property's value in the series. If this property's value is 0, then the animation will not be performed. {% tabs %} -{% highlight dart hl_lines="50 58" %} +{% highlight dart hl_lines="21 30" %} @override Widget build(BuildContext context) { @@ -135,7 +135,7 @@ If you wish to perform the initial rendering animation again in the existing ser ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will animate for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0` for all the series except [`ErrorBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries-class.html). The default value for the [`ErrorBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries-class.html) is `1500`. >**Note**: The animation delay is applicable for series, trendline, and indicators. @@ -256,7 +256,7 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat ## Color palette -The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/palette.html) property is used to define the colors for the series available in chart. By default, a set of 10 colors are predefined for applying it to the series. If the colors specified in the series are less than the number of series, than the remaining series are filled with the specified palette colors rotationally. +The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/palette.html) property is used to define the colors for the series available in chart. By default, a set of 10 colors are predefined for applying it to the series. If the colors specified in the series are less then the number of series, than the remaining series are filled with the specified palette colors rotationally. {% tabs %} {% highlight dart %} @@ -313,7 +313,7 @@ The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c ## Color mapping for data points -The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/pointColorMapper.html) property is used to map the color field from the data source. +The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property is used to map the color field from the data source. {% tabs %} {% highlight dart %} @@ -414,13 +414,13 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ * [Rotating the gradient applied to a chart in Cartesian charts](https://support.syncfusion.com/kb/article/10445/how-to-apply-and-rotate-gradient-in-the-chart-sfcartesainchart). ->**Note**: The gradient is not applicable for spline, step line, candle, hilo, hilo open close, and line type charts. However, in line type gradient is applicable for [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html) alone. +>**Note**: The gradient is not applicable for spline, step line, candle, hilo, hilo open close, and line type charts. However, in line type gradient is applicable for [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html) only. ### Gradient stroke The [`borderGradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderGradient.html) property is used to define the gradient color for the border of the applicable series. -If the properties of both [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderColor.html) and [`borderGradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderGradient.html) are defined then [`borderGradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderGradient.html) is considered. +If the properties of both [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) and [`borderGradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderGradient.html) are defined then [`borderGradient`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderGradient.html) is considered. {% tabs %} {% highlight dart %} @@ -543,7 +543,7 @@ Defaults to `null`. ## Empty points -The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html). +The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). {% tabs %} {% highlight dart %} @@ -592,7 +592,7 @@ The data points that has null value are considered as empty points. Empty data p ### Empty point customization -Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. +Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. {% tabs %} {% highlight dart %} @@ -645,7 +645,7 @@ Specific color for empty point can be set by [`color`](https://pub.dev/documenta ## Sorting -The chart’s data source can be sorted using the [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sortingOrder.html) and [`sortFieldValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sortFieldValueMapper.html) properties of series. The [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sortingOrder.html) property determines whether the data points in the sequence should be sorted in [`SortingOrder.ascending`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html) or [`SortingOrder.descending`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html) order. The data points will be rendered in the specified order if [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sortingOrder.html) is set to [`SortingOrder.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html). The [`sortFieldValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/sortFieldValueMapper.html) specifies the field in the data source, which is considered for sorting the data points. +The chart’s data source can be sorted using the [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/sortingOrder.html) and [`sortFieldValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/sortFieldValueMapper.html) properties of series. The [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/sortingOrder.html) property determines whether the data points in the sequence should be sorted in [`SortingOrder.ascending`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html#ascending) or [`SortingOrder.descending`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html#descending) order. The data points will be rendered in the specified order if [`sortingOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/sortingOrder.html) is set to [`SortingOrder.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SortingOrder.html#none). The [`sortFieldValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/sortFieldValueMapper.html) specifies the field in the data source, which is considered for sorting the data points. {% tabs %} {% highlight dart %} From d69af95ee73702353a6ee0b906687253539ccbf6 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Mon, 28 Jul 2025 11:13:19 +0530 Subject: [PATCH 07/13] FLUT-969263-[others][flutter]: Made CI success --- Flutter/cartesian-charts/axis-types.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Flutter/cartesian-charts/axis-types.md b/Flutter/cartesian-charts/axis-types.md index 3744859af..41c722fd5 100644 --- a/Flutter/cartesian-charts/axis-types.md +++ b/Flutter/cartesian-charts/axis-types.md @@ -511,10 +511,10 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut ### Formatting the labels -The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/numberFormat.html) property of numeric axis formats the numeric axis labels with [`globalized label formats`](https://api.flutter.dev/flutter/intl/NumberFormat-class.html). The following code snippet demonstrates how to format numeric labels. +The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/numberFormat.html) property of numeric axis formats the numeric axis labels with [`globalized label formats`](https://api.flutter.dev/flutter/package-intl_intl/NumberFormat-class.html). The following code snippet demonstrates how to format numeric labels. {% tabs %} -{% highlight dart hl_lines="11"%} +{% highlight dart hl_lines="11" %} import 'package:intl/intl.dart'; @@ -767,7 +767,7 @@ Category axis can also be rendered based on the index values of data source by s The date-time axis uses date-time scale and displays date-time values as axis labels in specified format. {% tabs %} -{% highlight dart hl_lines="14"%} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -813,7 +813,7 @@ The date-time axis uses date-time scale and displays date-time values as axis la To customize the range of an axis, use the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/maximum.html) properties of [`DateTimeAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/DateTimeAxis.html). By default, nice range will be calculated automatically based on the provided data. {% tabs %} -{% highlight dart hl_lines="8 9"%} +{% highlight dart hl_lines="8 9" %} @override Widget build(BuildContext context) { @@ -1180,7 +1180,7 @@ When the value of [`rangePadding`](https://pub.dev/documentation/syncfusion_flut ### Formatting the labels -The [`date formats`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/dateFormat.html) property formats the date-time axis labels. The default data-time axis label can be formatted with various built-in [`DateFormat`](https://api.flutter.dev/flutter/intl/DateFormat-class.html), which depend on the given data source. +The [`date formats`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/dateFormat.html) property formats the date-time axis labels. The default data-time axis label can be formatted with various built-in [`DateFormat`](https://api.flutter.dev/flutter/package-intl_intl/DateFormat-class.html), which depend on the given data source. {% tabs %} {% highlight dart hl_lines="11" %} @@ -1442,7 +1442,7 @@ To customize the range of log axis, use the [`minimum`](https://pub.dev/document To customize the log base value, use the [`logBase`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LogarithmicAxis/logBase.html) property. {% tabs %} -{% highlight dart hl_lines="8"%} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -1469,7 +1469,7 @@ To customize the log base value, use the [`logBase`](https://pub.dev/documentati By using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) Property in Cartesian charts, the logarithmic axis can be inverted. Axis gets rendered from the minimum value to the maximum value by default and can be inverted from the maximum value to the minimum value. {% tabs %} -{% highlight dart hl_lines="18"%} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { From eba8b99b8badc4a1aa29a4a6155b3363678a7725 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Thu, 31 Jul 2025 12:44:01 +0530 Subject: [PATCH 08/13] FLUT-969263-[others][flutter]: Completed pending cartesian chart API improvement --- Flutter/cartesian-charts/accessibility.md | 2 +- Flutter/cartesian-charts/annotations.md | 6 +- Flutter/cartesian-charts/callbacks.md | 28 ++++----- Flutter/cartesian-charts/chart-appearance.md | 4 +- .../export-cartesian-chart.md | 6 +- Flutter/cartesian-charts/legend.md | 9 ++- Flutter/cartesian-charts/marker-datalabel.md | 7 +-- Flutter/cartesian-charts/methods.md | 4 +- Flutter/cartesian-charts/on-demand-loading.md | 4 +- Flutter/cartesian-charts/right-to-left.md | 10 ++-- Flutter/cartesian-charts/selection.md | 60 ++++++++++--------- .../cartesian-charts/technical-indicators.md | 10 ++-- Flutter/cartesian-charts/tooltip.md | 22 +++---- .../cartesian-charts/trackball-crosshair.md | 6 +- Flutter/cartesian-charts/trendline.md | 14 ++--- Flutter/cartesian-charts/zoom-pan.md | 8 +-- 16 files changed, 100 insertions(+), 100 deletions(-) diff --git a/Flutter/cartesian-charts/accessibility.md b/Flutter/cartesian-charts/accessibility.md index 123b3086f..5a22b720a 100644 --- a/Flutter/cartesian-charts/accessibility.md +++ b/Flutter/cartesian-charts/accessibility.md @@ -33,7 +33,7 @@ The customization of colors can be done for the following chart elements. ## Large fonts -The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in Cartesian chart. +The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in Cartesian chart. * [Chart title](https://help.syncfusion.com/flutter/cartesian-charts/chart-title) * [Axis title](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-title) * [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-customization) diff --git a/Flutter/cartesian-charts/annotations.md b/Flutter/cartesian-charts/annotations.md index 318c51cc3..28cd55db7 100644 --- a/Flutter/cartesian-charts/annotations.md +++ b/Flutter/cartesian-charts/annotations.md @@ -9,7 +9,7 @@ documentation: ug # Annotation in Flutter Cartesian Charts (SfCartesianChart) -Chart supports annotations which allows you to mark the specific area of interest in the chart area. You can add the custom widgets using this annotations feature as depicted below. +Chart supports annotations which, allows you to mark the specific area of interest in the chart area. You can add custom widgets using this annotations feature as depicted below. {% tabs %} {% highlight dart %} @@ -47,7 +47,7 @@ Chart supports annotations which allows you to mark the specific area of interes ## Positioning the annotation -The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) values can be specified with axis units or pixel units or percentage units, and these can be identified by using [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) property. When logicalPixel is specified, the annotation will be placed with respect to pixel values whereas point is specified, then the annotation will be placed with respect to series point values. +The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) values can be specified with axis units or pixel units or percentage units, and these can be identified by using [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) property. When logicalPixel is specified, the annotation will be placed with respect to pixel values. When point is specified, the annotation will be placed with respect to series point values. **Positioning based on coordinateUnit as point** @@ -254,7 +254,7 @@ The following code example demonstrates how to set the [`horizontalAlignment`](h {% endhighlight %} {% endtabs %} -## Adding multiple annotation +## Adding multiple annotations You can add multiple annotations to the Chart by adding multiple widgets to the [`annotations`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property as depicted in below code snippet. diff --git a/Flutter/cartesian-charts/callbacks.md b/Flutter/cartesian-charts/callbacks.md index 119c9e263..2a0d38b74 100644 --- a/Flutter/cartesian-charts/callbacks.md +++ b/Flutter/cartesian-charts/callbacks.md @@ -9,7 +9,7 @@ documentation: ug # Callbacks in Flutter Cartesian Charts (SfCartesianChart) -The below Callbacks are for Cartesian chart. +This document describes the callbacks available for the Cartesian chart ## onTooltipRender @@ -431,7 +431,7 @@ Triggers when zoomed state is reset. The [`onZoomReset`](https://pub.dev/docume ## onPointTap -Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html) callback contains the following arguments. +Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -464,7 +464,7 @@ Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/do ## onPointDoubleTap -Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointDoubleTap.html) callback contains the following arguments. +Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -497,7 +497,7 @@ Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub. ## onPointLongPress -Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointLongPress.html) callback contains the following arguments. +Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -649,7 +649,7 @@ Triggers while selection changes. Here you can customize the selectedColor, unse Triggers when the indicator is rendering. Here you can customize the name, calculated data points, signal line color, signal line width, signal line dash array, and so on. -The [`onRenderDetailsUpdate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/onRenderDetailsUpdate.html) contains following arguments. +The [`onRenderDetailsUpdate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/onRenderDetailsUpdate.html) contains following arguments. * [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/IndicatorRenderParams/name.html) - used to get and set the indicator name. * [`calculatedDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/IndicatorRenderParams/calculatedDataPoints.html) - used to get the calculated indicator data points details. @@ -797,14 +797,14 @@ Triggers when the series renderer is created. This callback can be used to obtai ## onRendererCreated (Axis) -Triggers when the axis renderer is created and attached to its parent. It can be used to obtain the axis-wise [AxisController] which has the current visible range details and provides an option to change the visible range programmatically. Here, you can customize the following properties. +Triggers when the axis renderer is created and attached to its parent. It can be used to obtain the axis-wise [ChartAxisController](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxisController-class.html) which has the current visible range details and provides an option to change the visible range programmatically. Here, you can customize the following properties. -* [`visibleMinimum`] - to gets and sets the visible minimum of the axis. -* [`visibleMaximum`] - to gets and sets the visible maximum of the axis. -* [`zoomFactor`] - to gets and sets the zoom factor of the axis. -* [`zoomPosition`] - to gets and sets the zoom position of the axis. -* [`previousZoomFactor`] - to gets the previous zoom factor of the axis. -* [`previousZoomPosition`] - to gets the previous zoom position of the axis. +* `visibleMinimum` - to gets and sets the visible minimum of the axis. +* `visibleMaximum` - to gets and sets the visible maximum of the axis. +* `zoomFactor` - to gets and sets the zoom factor of the axis. +* `zoomPosition` - to gets and sets the zoom position of the axis. +* `previousZoomFactor` - to gets the previous zoom factor of the axis. +* `previousZoomPosition` - to gets the previous zoom position of the axis. {% tabs %} {% highlight dart %} @@ -1011,13 +1011,13 @@ Triggers when tapping on the data label of the data point in the series. The [`o ## onPlotAreaSwipe -Triggers while swiping on the plot area. Whenever the swiping happens on the plot area (the series rendering area), [`onPlotAreaSwipe`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onPlotAreaSwipe.html) callback will be called. It provides options to get the direction of swiping. If the chart is swiped from left to right direction, the direction is [`ChartSwipeDirection.start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection.html) and if the swipe happens from right to left direction, the direction is [`ChartSwipeDirection.end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection.html). Using this callback, the user will be able to achieve pagination functionality (i.e., on swiping over chart area, next set of data points can be loaded to the chart). +Triggers while swiping on the plot area. Whenever the swiping happens on the plot area (the series rendering area), [`onPlotAreaSwipe`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onPlotAreaSwipe.html) callback will be called. It provides options to get the direction of swiping. If the chart is swiped from left to right direction, the direction is [`ChartSwipeDirection.start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection.html#start) and if the swipe happens from right to left direction, the direction is [`ChartSwipeDirection.end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection.html#end). Using this callback, the user will be able to achieve pagination functionality (i.e., on swiping over chart area, next set of data points can be loaded to the chart). {% tabs %} {% highlight dart %} //Initialize the series controller - ChartSeriesController? SeriesController; + ChartSeriesController? seriesController; @override Widget build(BuildContext context) { diff --git a/Flutter/cartesian-charts/chart-appearance.md b/Flutter/cartesian-charts/chart-appearance.md index 15a70c373..efec50f7a 100644 --- a/Flutter/cartesian-charts/chart-appearance.md +++ b/Flutter/cartesian-charts/chart-appearance.md @@ -11,10 +11,10 @@ documentation: ug ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +Chart renders based on the parent widget's size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. You can also customize the following properties: -* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) - used to changes the background color of the chart. +* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) - used to change the background color of the chart. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - used to change the border width. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - used to change the color of the chart border. diff --git a/Flutter/cartesian-charts/export-cartesian-chart.md b/Flutter/cartesian-charts/export-cartesian-chart.md index bcbe4e16e..bf0702bac 100644 --- a/Flutter/cartesian-charts/export-cartesian-chart.md +++ b/Flutter/cartesian-charts/export-cartesian-chart.md @@ -9,11 +9,11 @@ documentation: ug # Exporting in Flutter Cartesian Charts (SfCartesianChart) -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to export the Cartesian chart as a PNG image or as PDF document. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to export the Cartesian chart as a PNG image or as a PDF document. ## Export image -To export the Cartesian chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. +To export the Cartesian chart as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in the repaint boundary. {% tabs %} {% highlight dart %} @@ -107,7 +107,7 @@ To export the Cartesian chart as a PNG image, we can get the image by calling [` ## Export PDF -Similar to the above way, we can also export the rendered Cartesian chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below. +Similar to the above way, we can also export the rendered Cartesian chart as a PDF document. We create the PDF document using the PDF component. This can be done at the application level itself. Please find the code snippet below. **Add dependency** diff --git a/Flutter/cartesian-charts/legend.md b/Flutter/cartesian-charts/legend.md index 4e4dba975..e12c0a059 100644 --- a/Flutter/cartesian-charts/legend.md +++ b/Flutter/cartesian-charts/legend.md @@ -9,7 +9,7 @@ documentation: ug # Legend in Flutter Cartesian Charts (SfCartesianChart) -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. {% tabs %} {% highlight dart hl_lines="9" %} @@ -57,7 +57,6 @@ The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char * [`padding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/padding.html) - used to add padding between the icon shape and the text. * [`iconHeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconHeight.html) - used to change the height of the icon shape. * [`iconWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconWidth.html) - used to change the width of the icon shape. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend icon shape. * [`iconBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconBorderColor.html) - used to change the stroke color of the legend icon shape. * [`itemPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/itemPadding.html) - used to add padding between the first legend text and the second legend icon shape. * [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/height.html) - the height of the legend. @@ -369,7 +368,7 @@ The legend items can be placed in multiple rows or scroll can be enabled using t child: SfCartesianChart( legend: Legend( isVisible: true, - // Overflowing legend content will be wraped + // Overflowing legend content will be wrapped overflowMode: LegendItemOverflowMode.wrap ), series: >[ @@ -425,7 +424,7 @@ The legend items can be placed in multiple rows or scroll can be enabled using t ## Positioning the legend -You can change the position of the legend inside the chart. The following properties can be used to customize the position of legend. auto position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. +You can change the position of the legend inside the chart. The following properties can be used to customize the position of legend. Auto position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. * [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). * [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is auto. Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). @@ -472,7 +471,7 @@ You can change the position of the legend inside the chart. The following proper ## Floating legend Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) is [`LegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#top), then the legend will be placed in the top but in the position added to the actual top position. -Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. +Also, the legend will not take a dedicated position and will be drawn on top of the chart's plot area. {% tabs %} {% highlight dart hl_lines="11" %} diff --git a/Flutter/cartesian-charts/marker-datalabel.md b/Flutter/cartesian-charts/marker-datalabel.md index dbd57114d..3749d5280 100644 --- a/Flutter/cartesian-charts/marker-datalabel.md +++ b/Flutter/cartesian-charts/marker-datalabel.md @@ -119,7 +119,7 @@ Markers can be assigned with different shapes using the [`shape`](https://pub.de ### Image marker -The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) as [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html) and provide the image using [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html#image) property. +The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) as [`DataMarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType.html) and provide the image using [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) property. {% tabs %} {% highlight dart hl_lines="17" %} @@ -165,12 +165,11 @@ The markers can be rendered with desired image as shape. For this you have to sp Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. * [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. * [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label. * [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label. @@ -505,7 +504,7 @@ The [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch #### Horizontal padding -In Horizontal padding, providing positive value for x moves the data label to right and negative value moves to left. +In Horizontal padding, providing positive value for x moves the data label to "right" and negative value moves to "left". {% tabs %} {% highlight dart hl_lines="10" %} diff --git a/Flutter/cartesian-charts/methods.md b/Flutter/cartesian-charts/methods.md index 86b9f32e2..012cd2b9c 100644 --- a/Flutter/cartesian-charts/methods.md +++ b/Flutter/cartesian-charts/methods.md @@ -689,7 +689,7 @@ The [`show`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char The [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/showByIndex.html) method is used to activate the crosshair at the specified point index. -[`pointIndex`] - index of point at which the crosshair needs to be shown. +[`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - index of point at which the crosshair needs to be shown. {% tabs %} {% highlight dart %} @@ -837,7 +837,7 @@ This following code sample defines how to enable or disable specific pointer eve // Add series. ); - class CustomCrosshair extends crosshairBehavior { + class CustomCrosshair extends CrosshairBehavior { @override bool get enable => true; diff --git a/Flutter/cartesian-charts/on-demand-loading.md b/Flutter/cartesian-charts/on-demand-loading.md index ac2836693..89a9bd930 100644 --- a/Flutter/cartesian-charts/on-demand-loading.md +++ b/Flutter/cartesian-charts/on-demand-loading.md @@ -18,9 +18,9 @@ To learn more about how to lazy load data while panning in Flutter Charts, you c ## Infinite scrolling -The [`loadMoreIndicatorBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/loadMoreIndicatorBuilder.html) builds the widget at the top of the chart area (ex., loading indicator or load more button) when horizontal scrolling reaches the start or end of the chart and if the chart is transposed then, this will be called when the vertical scrolling reaches the top or bottom of the chart. this can be used to achieve the functionalities like infinite scrolling in the chart. +The [`loadMoreIndicatorBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/loadMoreIndicatorBuilder.html) builds the widget at the top of the chart area (ex., loading indicator or load more button) when horizontal scrolling reaches the start or end of the chart and if the chart is transposed, then this will be called when the vertical scrolling reaches the top or bottom of the chart. This can be used to achieve functionalities like infinite scrolling in the chart. -The below example demonstrates the infinite scrolling by showing the circular progress indicator until the data is loaded when horizontal scrolling reaches the end of the chart. +The example below demonstrates the infinite scrolling by showing the circular progress indicator until the data is loaded when horizontal scrolling reaches the end of the chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/right-to-left.md b/Flutter/cartesian-charts/right-to-left.md index 7897bf9e2..2fa82a230 100644 --- a/Flutter/cartesian-charts/right-to-left.md +++ b/Flutter/cartesian-charts/right-to-left.md @@ -9,7 +9,7 @@ documentation: ug # Right To Left (RTL) in Flutter Cartesian Chart (SfCartesianChart) -Cartesian chart supports the right to left rendering. But chart axis, series, and other chart elements rendering will be the same for both LTR and RTL except trackball, tooltip, and legend. +Cartesian chart supports the right to left rendering. However chart axis, series, and other chart elements rendering will be the same for both LTR and RTL except trackball, tooltip, and legend. ## RTL rendering ways @@ -17,7 +17,7 @@ Right to left rendering can be switched in the following ways: ### Wrapping the SfCartesianChart with Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). +To change the rendering direction from right to left, you can wrap the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="5" %} @@ -77,10 +77,10 @@ To change the chart rendering direction from right to left, you can change the [ ### Legend -Right to left rendering is applicable for the [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html) in the chart. Legend items will be rendered from right to left direction. In right-to-left rendering, the legend text will appear on the left first, followed by the legend icon on the right. i.e. the legend text will appear on the left first, followed by the legend icon on the right. +Right to left rendering is applicable for the [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html) in the chart. Legend items will be rendered from right to left direction. In right-to-left rendering, the legend text will appear on the left first, followed by the legend icon on the right. i.e., the legend text will appear on the left first, followed by the legend icon on the right. {% tabs %} -{% highlight dart hl_lines="3 6" %} +{% highlight dart hl_lines="14 16" %} @override Widget build(BuildContext context) { @@ -126,7 +126,7 @@ Right to left rendering is applicable for the [`legend`](https://pub.dev/documen ### Tooltip -Right-to-left rendering is applicable for [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements. Here, the tooltip content renders at first and followed by that the marker on the right. By default, the tooltip content will be `point.x : point.y`, in RTL rendering the tooltip content will be `point.y : point.x`. There will not be any change in the header content. If you wish the format to be applied as it is despite RTL rendering in this case, you can make use of [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onTooltipRender.html) callback. +Right-to-left rendering is applicable for [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements. Here, the tooltip content renders first, followed by that the marker on the right. By default, the tooltip content will be `point.x : point.y`, in RTL rendering the tooltip content will be `point.y : point.x`. There will not be any change in the header content. If you wish the format to be applied as it is despite RTL rendering in this case, you can make use of [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onTooltipRender.html) callback. {% tabs %} {% highlight dart %} diff --git a/Flutter/cartesian-charts/selection.md b/Flutter/cartesian-charts/selection.md index b4edc00d2..cd408c505 100644 --- a/Flutter/cartesian-charts/selection.md +++ b/Flutter/cartesian-charts/selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in Flutter Cartesian Charts (SfCartesianChart) -The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series. +The selection feature in chart let you to select a segment in a series or the series itself. This feature allows you to select either individual or cluster of segments in the chart series. {% tabs %} {% highlight dart %} @@ -131,9 +131,9 @@ You can customize the segments using the below properties. The selection features allows you to select segments in following modes using [`selectionType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/selectionType.html) property of chart. -* [`SelectionType.Point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html) - selects the individual data point. -* [`SelectionType.Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html) - selects the entire series. -* [`SelectionType.Cluster`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html) - selects the cluster of points of different series i.e selects the points with same index in each series. +* [`SelectionType.Point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html#point) - selects the individual data point. +* [`SelectionType.Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html#series) - selects the entire series. +* [`SelectionType.Cluster`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType.html#cluster) - selects the cluster of points of different series i.e selects the points with same index in each series. {% tabs %} {% highlight dart %} @@ -149,34 +149,36 @@ The selection features allows you to select segments in following modes using [` @override Widget build(BuildContext context) { final List chartData = [ - ChartData('USA', 6, 8), - ChartData('China', 11, 7), - ChartData('UK', 9, 10), - ChartData('Japan', 14, 8), - ChartData('France', 10, 12), + ChartData('USA', 6, 8), + ChartData('China', 11, 7), + ChartData('UK', 9, 10), + ChartData('Japan', 14, 8), + ChartData('France', 10, 12), ]; return Scaffold( body: Center( child: Container( child: SfCartesianChart( - // Mode of selection - selectionType: SelectionType.cluster, - primaryXAxis: CategoryAxis(), - series: >[ - ColumnSeries( - dataSource: chartData, - selectionBehavior: _selectionBehavior, - xValueMapper: (ChartData data, _) => data.x, - yValueMapper: (ChartData data, _) => data.y), - ColumnSeries( - dataSource: chartData, - selectionBehavior: _selectionBehavior, - xValueMapper: (ChartData data, _) => data.x, - yValueMapper: (ChartData data, _) => data.y1)], - ) - ) - ) - ); + // Mode of selection + selectionType: SelectionType.cluster, + primaryXAxis: CategoryAxis(), + series: >[ + ColumnSeries( + dataSource: chartData, + selectionBehavior: _selectionBehavior, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y + ), + ColumnSeries( + dataSource: chartData, + selectionBehavior: _selectionBehavior, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y1 + )], + ) + ) + ) + ); } class ChartData { @@ -243,7 +245,7 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## Selection on initial rendering -You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/initialSelectedDataIndexes.html) property of the [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html). +You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/initialSelectedDataIndexes.html) property of the [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html). {% tabs %} {% highlight dart %} @@ -304,7 +306,7 @@ You can select a point or series programmatically on a chart using [`initialSele ## Toggle selection -You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected. +You can decide, whether to deselect the selected data point/series or remain selected when interacted with again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected. This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. diff --git a/Flutter/cartesian-charts/technical-indicators.md b/Flutter/cartesian-charts/technical-indicators.md index 06dbe74fb..bbb14e1c8 100644 --- a/Flutter/cartesian-charts/technical-indicators.md +++ b/Flutter/cartesian-charts/technical-indicators.md @@ -10,7 +10,7 @@ documentation: ug # Technical indicators in Flutter Cartesian Charts (SfCartesianChart) -The different types of technical indicators available in chart are follows: +The different types of technical indicators available in the chart are as follows: * [`Accumulation distribution indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AccumulationDistributionIndicator-class.html) - AD * [`Average true range indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AtrIndicator-class.html) - ATR @@ -34,7 +34,7 @@ To render any indicator, add it to the [`TechnicalIndicators`](https://pub.dev/d * [`signalLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/signalLineColor.html)- Used to defines the color for the respective indicator line. * [`signalLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/signalLineWidth.html) - Used to change the signal line width. * [`seriesName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/seriesName.html) - Used to bind the data source of chart series to technical indicators, including x and y axis. -* [`xAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/xAxisName.html),[`yAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/yAxisName.html) - Used to set the x and y axes +* [`xAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/xAxisName.html),[`yAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/yAxisName.html) - Used to set the x and y axes for the indicator. * [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/animationDuration.html) - To control the duration of animation. * [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/animationDelay.html) - Used to specify the delay duration of the indicator animation. This takes a millisecond value as input. By default, the indicator will get animated for the specified duration. If `animationDelay` is specified, then the indicator will begin to animate after the specified duration. * [`dataSource`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/dataSource.html) - Directly bind the values such as [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/xValueMapper.html),[`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/lowValueMapper.html),[`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/highValueMapper.html),[`openValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/openValueMapper.html),[`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/closeValueMapper.html) @@ -426,7 +426,7 @@ Refer the following example, legend: Legend(isVisible: true), indicators: [ StochasticIndicator( - seriesName: 'HiloOpenClose',, + seriesName: 'HiloOpenClose', kPeriod: 2, dPeriod: 3)], series: >[ @@ -727,8 +727,8 @@ Refer the following example below closeValueMapper: (ChartData data, _) => data.close, ) ], - series: >[ - LineSeries( + series: >[ + LineSeries( color: Colors.purple, dataSource: chartData, xValueMapper: (ChartData1 data, _) => data.x, diff --git a/Flutter/cartesian-charts/tooltip.md b/Flutter/cartesian-charts/tooltip.md index dd669a23b..b848c062c 100644 --- a/Flutter/cartesian-charts/tooltip.md +++ b/Flutter/cartesian-charts/tooltip.md @@ -9,12 +9,12 @@ documentation: ug # Tooltip in Flutter Cartesian Charts (SfCartesianChart) -Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/enableTooltip.html) property as *true*. +Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you can set the [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/enable.html) property of [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) to *true*. By default, the tooltip is set to *false*. You need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to *true* to enable tooltip for a particular series alone. The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="5 16 20" %} late TooltipBehavior _tooltipBehavior; @@ -30,11 +30,11 @@ The tooltip state will be preserved on the device's orientation change and on br child: Container( child: SfCartesianChart( primaryXAxis: CategoryAxis(), - //Enables the tooltip for all the series + //Enables the tooltip for all the series tooltipBehavior: _tooltipBehavior, series: [ LineSeries( - //Enables the tooltip for individual series + //Enables the tooltip for individual series enableTooltip: true, ) ] @@ -116,7 +116,7 @@ You can use the following properties to customize the tooltip appearance. ## Label format -By default, x and y value will be displayed in the tooltip, and it can be customized using [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property as depicted in the below code snippet. You can show the below values in the tooltip. Also you can add prefix or suffix to these values. +By default, x and y value will be displayed in the tooltip, and it can be customized using [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property as depicted in the below code snippet. You can show the below values in the tooltip. Also, you can add prefix or suffix to these values. * X value - `point.x` * Y value - `point.y` @@ -156,7 +156,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom ## Tooltip positioning -The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html). +The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). {% tabs %} {% highlight dart hl_lines="7" %} @@ -237,14 +237,14 @@ You can customize the appearance of the tooltip with your own widget by using th ## Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). The ActivationMode enum contains the following values: -* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - Activates tooltip only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - Activates tooltip only when performing single tap action. -* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - Activates tooltip only when performing double tap action. -* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - Hides the visibility of tooltip when setting activation mode to none. +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - Activates tooltip only when performing the long press action. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - Activates tooltip only when performing single tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - Activates tooltip only when performing double tap action. +* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - Hides the visibility of tooltip when setting activation mode to none. {% tabs %} {% highlight dart hl_lines="8" %} diff --git a/Flutter/cartesian-charts/trackball-crosshair.md b/Flutter/cartesian-charts/trackball-crosshair.md index aa5028b22..d11a4c201 100644 --- a/Flutter/cartesian-charts/trackball-crosshair.md +++ b/Flutter/cartesian-charts/trackball-crosshair.md @@ -282,7 +282,7 @@ The ActivationMode enum contains the following values: ### Trackball tooltip overlap -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to avoid the overlapping of two or more tooltips of the trackball and no API is required for this feature as it will be done by default. For example, If we have 2 or more series data points rendered close to each other then, the trackball tooltips of each data point will not be overlap with each other. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to avoid the overlapping of two or more tooltips of the trackball and no API is required for this feature as it will be done by default. For example, If we have 2 or more series data points rendered close to each other, then the trackball tooltips of each data point will not be overlap with each other. {% tabs %} {% highlight dart %} @@ -425,7 +425,7 @@ And moreover, the trackball tooltip will render on the right side of the trackba ### Trackball marker settings -Trackball markers are used to provide information about the exact point location. You can add a shape to adorn each data point when the trackball is visible. Trackball markers can be enabled by using the [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property of [`TrackballMarkerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings-class.html). The below [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property determines whether the trackball marker should be visible or not when the trackball is enabled in the chart +Trackball markers are used to provide information about the exact point location. You can add a shape to adorn each data point when the trackball is visible. Trackball markers can be enabled by using the [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property of [`TrackballMarkerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings-class.html). The below [`markerVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballMarkerSettings/markerVisibility.html) property determines whether the trackball marker should be visible or not when the trackball is enabled in the chart. * [`TrackballVisibilityMode.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html#auto) - If the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property in the series [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html) is set to true, then the trackball marker will also be displayed for that particular series, else it will not be displayed. * [`TrackballVisibilityMode.visible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballVisibilityMode.html#visible) - Makes the trackball marker visible for all the series irrespective of considering the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property's value in the [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings-class.html). @@ -641,7 +641,7 @@ Defaults to `true`. } class ChartData { - ChartData(this.x, this.y, this,y1, this.y2, this.y3); + ChartData(this.x, this.y, this.y1, this.y2, this.y3); final String x; final double? y; final double? y1; diff --git a/Flutter/cartesian-charts/trendline.md b/Flutter/cartesian-charts/trendline.md index 35aaf20cd..a99352cb1 100644 --- a/Flutter/cartesian-charts/trendline.md +++ b/Flutter/cartesian-charts/trendline.md @@ -9,7 +9,7 @@ documentation: ug # Trendlines in Flutter Cartesian Charts (SfCartesianChart) -Trendlines are used to show the direction and speed of price. +Trendlines are used to show the direction and speed of price movement. Trendlines can be generated for the Cartesian type series (Line, Column, Scatter, Area, Candle, HiLo, etc.) except bar type series. You can add more than one trendline to a series. @@ -22,7 +22,7 @@ You can use the following properties to customize the behavior and appearance of * [`forwardForecast`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/forwardForecast.html) - used to specify the range of forward forecast for the trendline. * [`intercept`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/intercept.html) - used to provide the trendline intercept values * [`period`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/period.html) - used to determine the starting point for the trendline. -* [`polynomialOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/polynomialOrder.html) -used to provide the polynomial order for polynomial type trendlines. +* [`polynomialOrder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/polynomialOrder.html) - used to provide the polynomial order for polynomial type trendlines. * [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/animationDuration.html) - used to animate the trendlines. By default, animationDuration has a value of 1500. When animationDuration is set to zero no animation takes place. * [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/animationDelay.html) - Used to specify the delay duration of the trendline animation. This takes a millisecond value as input. By default, the trendline will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/animationDelay.html) is specified, then the trendline will begin to animate after the specified duration. * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLine/dashArray.html) - pattern of dashes and gaps used to stroke the trendline. @@ -255,7 +255,7 @@ To render a power trendline, use trendline type as Power ![power trendline](images/trendline/power.png) ### Moving Average -A moving average trendline smoothen out fluctuations in data to show a pattern or trend more clearly. +A moving average trendline smooths out fluctuations in data to show a pattern or trend more clearly. To render a moving average trendline, use trendline type as MovingAverage @@ -275,7 +275,7 @@ To render a moving average trendline, use trendline type as MovingAverage dataSource: chartData, trendlines:[ Trendline( - type: TrendlineType.MovingAverage, + type: TrendlineType.movingAverage, color: Colors.blue) ], ) @@ -387,7 +387,7 @@ The value set for the backwardForecast is used to determine the past trends. {% endhighlight %} {% endtabs %} -![forward forecast](images/trendline/backwardforecast.png) +![backward forecast](images/trendline/backwardforecast.png) ## Legend for TrendLine @@ -436,7 +436,7 @@ Legend for trendline gets rendered together with the series legend when the lege ## Markers -Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point.Trendlines support markers that can be enabled using the property [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/markerSettings.html) . +Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point. Trendlines support markers that can be enabled using the property [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Trendline/markerSettings.html) . {% tabs %} {% highlight dart hl_lines="16" %} @@ -480,7 +480,7 @@ Data markers are used to provide information about the data points in the series ## Tooltip for Trendline -Chart will display details about the points through tooltip, when user interaction is done over the point.Trendline Tooltip has the same [`ActivationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) that has been given in the [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) of the series. +Chart will display details about the points through tooltip when user interaction occurs over the point. Trendline Tooltip has the same [`ActivationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) that has been given in the [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) of the series. {% tabs %} {% highlight dart hl_lines="5" %} diff --git a/Flutter/cartesian-charts/zoom-pan.md b/Flutter/cartesian-charts/zoom-pan.md index c6ae19a06..6f382764d 100644 --- a/Flutter/cartesian-charts/zoom-pan.md +++ b/Flutter/cartesian-charts/zoom-pan.md @@ -12,7 +12,7 @@ documentation: ug ## Pinch zooming -Pinch zooming can be enabled by [`enablePinching`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enablePinching.html) property and defaults to `false`. Pinching can be performed by moving two fingers over the chart. +Pinch zooming can be enabled by setting the [`enablePinching`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enablePinching.html) property to `true`. It defaults to `false`. Pinching can be performed by moving two fingers over the chart. {% tabs %} {% highlight dart hl_lines="7" %} @@ -96,7 +96,7 @@ The directional zooming feature improves the zoom experience by allowing users t ## Double tap zooming -Double tap zooming can be enabled using [`enableDoubleTapZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDoubleTapZooming.html) property. Defaults to `false`. +Double tap zooming can be enabled by setting the [`enableDoubleTapZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDoubleTapZooming.html) property to `true`. It defaults to `false`. {% tabs %} {% highlight dart hl_lines="7" %} @@ -134,7 +134,7 @@ Double tap zooming can be enabled using [`enableDoubleTapZooming`](https://pub.d ## Selection zooming -By specifying [`enableSelectionZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableSelectionZooming.html) property to true, you can long press and drag to select a range on the chart to be zoomed in. +By setting the [`enableSelectionZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableSelectionZooming.html) property to true, you can long press and drag to select a range on the chart to be zoomed in. **Selection rectangle customization** @@ -350,7 +350,7 @@ The [`maximumZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_charts Panning can be performed on a zoomed axis. You can pan the zoomed chart with [`enablePanning`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enablePanning.html) property. Defaults to `false`. -If zoom mode is set to [`zoomMode.x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#x) means you can only pan to the horizontal direction, in case the [`zoomMode.y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#y) means you can pan only to the vertical direction and [`zoomMode.xy`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#xy) means you can pan to both horizontal and vertical directions on the chart. +If zoom mode is set to [`zoomMode.x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#x), you can only pan in the horizontal direction, in case the [`zoomMode.y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#y), you can pan only in the vertical direction and [`zoomMode.xy`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomMode.html#xy) means you can pan to both horizontal and vertical directions on the chart. {% tabs %} {% highlight dart hl_lines="7" %} From 2c935cfe43af639149fc4e9b09e42d0bd1618eab Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Thu, 31 Jul 2025 12:52:35 +0530 Subject: [PATCH 09/13] FLUT-969263-[others][flutter]: Updated broken API link --- Flutter/cartesian-charts/callbacks.md | 2 +- Flutter/cartesian-charts/chart-appearance.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Flutter/cartesian-charts/callbacks.md b/Flutter/cartesian-charts/callbacks.md index 2a0d38b74..27b8235db 100644 --- a/Flutter/cartesian-charts/callbacks.md +++ b/Flutter/cartesian-charts/callbacks.md @@ -1298,7 +1298,7 @@ Triggers while rendering the multi-level labels. Text and text styles such as co * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/text.html) - specifies the multi-level label to be rendered. * [`actualLevel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/actualLevel.html) - specifies the re-ordered level value of the current multi-level label. * [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/axisName.html) - specifies the axis name. -* [`index`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/index.html) - specifies the index of the multi-level label. and the index will be in the same order as specified in [`multiLevelLabels`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/multiLevelLabels.html) property. +* [`index`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/index.html) - specifies the index of the multi-level label. and the index will be in the same order as specified in [`multiLevelLabels`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/multiLevelLabels.html) property. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails/textStyle.html) - used to change the text color, size, font family, font style, etc. {% tabs %} diff --git a/Flutter/cartesian-charts/chart-appearance.md b/Flutter/cartesian-charts/chart-appearance.md index efec50f7a..3d2d584ce 100644 --- a/Flutter/cartesian-charts/chart-appearance.md +++ b/Flutter/cartesian-charts/chart-appearance.md @@ -15,8 +15,8 @@ Chart renders based on the parent widget's size. If you need the chart to be ren You can also customize the following properties: * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) - used to change the background color of the chart. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderWidth.html) - used to change the border width. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/borderColor.html) - used to change the color of the chart border. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - used to change the border width. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - used to change the color of the chart border. {% tabs %} {% highlight dart hl_lines="8 10" %} From 0f25126bfc8f1fd0863a6c07192d09a0fca9a921 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Fri, 1 Aug 2025 17:26:49 +0530 Subject: [PATCH 10/13] FLUT-969263-[others][flutter]: Addressed review suggestion --- Flutter/cartesian-charts/marker-datalabel.md | 3 ++- Flutter/cartesian-charts/overview.md | 2 +- Flutter/cartesian-charts/selection.md | 2 +- Flutter/cartesian-charts/trendline.md | 2 +- Flutter/pyramid-chart/accessibility.md | 2 +- Flutter/pyramid-chart/export-pyramid-chart.md | 4 ++-- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/Flutter/cartesian-charts/marker-datalabel.md b/Flutter/cartesian-charts/marker-datalabel.md index 3749d5280..00043ef92 100644 --- a/Flutter/cartesian-charts/marker-datalabel.md +++ b/Flutter/cartesian-charts/marker-datalabel.md @@ -165,11 +165,12 @@ The markers can be rendered with desired image as shape. For this you have to sp Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. * [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. * [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label. * [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label. diff --git a/Flutter/cartesian-charts/overview.md b/Flutter/cartesian-charts/overview.md index 60da0cbec..5a2908c6f 100644 --- a/Flutter/cartesian-charts/overview.md +++ b/Flutter/cartesian-charts/overview.md @@ -43,4 +43,4 @@ To get started quickly with our Flutter chart widget, you can check out this vid #### See Also -* [Integrating Syncfusion® flutter charts in a flutter web application](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). \ No newline at end of file +* [Integrating syncfusion® flutter charts in a flutter web application](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). \ No newline at end of file diff --git a/Flutter/cartesian-charts/selection.md b/Flutter/cartesian-charts/selection.md index cd408c505..1e76e40e4 100644 --- a/Flutter/cartesian-charts/selection.md +++ b/Flutter/cartesian-charts/selection.md @@ -306,7 +306,7 @@ You can select a point or series programmatically on a chart using [`initialSele ## Toggle selection -You can decide, whether to deselect the selected data point/series or remain selected when interacted with again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected. +You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected. This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. diff --git a/Flutter/cartesian-charts/trendline.md b/Flutter/cartesian-charts/trendline.md index a99352cb1..b2b22c012 100644 --- a/Flutter/cartesian-charts/trendline.md +++ b/Flutter/cartesian-charts/trendline.md @@ -9,7 +9,7 @@ documentation: ug # Trendlines in Flutter Cartesian Charts (SfCartesianChart) -Trendlines are used to show the direction and speed of price movement. +Trendlines are used to show the direction and speed of price. Trendlines can be generated for the Cartesian type series (Line, Column, Scatter, Area, Candle, HiLo, etc.) except bar type series. You can add more than one trendline to a series. diff --git a/Flutter/pyramid-chart/accessibility.md b/Flutter/pyramid-chart/accessibility.md index 49a6cb9e4..8c192631c 100644 --- a/Flutter/pyramid-chart/accessibility.md +++ b/Flutter/pyramid-chart/accessibility.md @@ -25,7 +25,7 @@ The customization of colors can be done for the following chart elements. ## Large fonts -The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the Pyramid chart. +The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the Pyramid chart. * [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title) * [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel) * [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title) diff --git a/Flutter/pyramid-chart/export-pyramid-chart.md b/Flutter/pyramid-chart/export-pyramid-chart.md index 2ad578ab9..02d471ec5 100644 --- a/Flutter/pyramid-chart/export-pyramid-chart.md +++ b/Flutter/pyramid-chart/export-pyramid-chart.md @@ -13,7 +13,7 @@ documentation: ug ## Export image -To export the pyramid chart as a PNG image, you can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. +To export the pyramid chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. {% tabs %} {% highlight dart %} @@ -122,7 +122,7 @@ To export the pyramid chart as a PNG image, you can get the image by calling [`t ### Export PDF -Similar to the above method, we can also export the rendered Pyramid chart as a PDF document. You create the PDF document using PDF component. This can be done at the application level itself. Please find the code snippet below. +Similar to the above way, we can also export the rendered Pyramid chart as a PDF document. We create the PDF document using PDF component. This can be done in the application level itself. Please find the code snippet below. **Add dependency** From a5ff7b0e25d70123cce79bcb6819e8fb0afd29a7 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Wed, 6 Aug 2025 08:38:31 +0530 Subject: [PATCH 11/13] FLUT-969263-[others][flutter]: Updated API link or missed API --- Flutter/cartesian-charts/chart-appearance.md | 6 +++--- Flutter/cartesian-charts/chart-types/histogram-chart.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Flutter/cartesian-charts/chart-appearance.md b/Flutter/cartesian-charts/chart-appearance.md index 3d2d584ce..3c5a11039 100644 --- a/Flutter/cartesian-charts/chart-appearance.md +++ b/Flutter/cartesian-charts/chart-appearance.md @@ -11,12 +11,12 @@ documentation: ug ## Chart sizing -Chart renders based on the parent widget's size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. You can also customize the following properties: * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) - used to change the background color of the chart. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - used to change the border width. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BarSeries/borderColor.html) - used to change the color of the chart border. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/borderWidth.html) - used to change the border width. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/borderColor.html) - used to change the color of the chart border. {% tabs %} {% highlight dart hl_lines="8 10" %} diff --git a/Flutter/cartesian-charts/chart-types/histogram-chart.md b/Flutter/cartesian-charts/chart-types/histogram-chart.md index f2dfca624..224c32c73 100644 --- a/Flutter/cartesian-charts/chart-types/histogram-chart.md +++ b/Flutter/cartesian-charts/chart-types/histogram-chart.md @@ -19,7 +19,7 @@ For example, if the [`binInterval`](https://pub.dev/documentation/syncfusion_flu If no value is specified for this property, then the interval will be calculated automatically based on the data points count and value. -You can hide the normal distribution curve using the [`showNormalDistributionCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/showNormalDistributionCurve.html) property. You can use the following properties to customize the appearance. +You can collapse the normal distribution curve using the [`showNormalDistributionCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/HistogramSeries/showNormalDistributionCurve.html) property. You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. From 9fbe052b08d1f5371a781c062d11ca4a91d2be12 Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Thu, 7 Aug 2025 15:40:38 +0530 Subject: [PATCH 12/13] FLUT-969263-[others][flutter]: Addressed review suggestions --- Flutter/funnel-chart/chart-appearance.md | 2 +- Flutter/funnel-chart/export-funnel-chart.md | 2 +- Flutter/pyramid-chart/selection.md | 4 ++-- Flutter/pyramid-chart/tooltip.md | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Flutter/funnel-chart/chart-appearance.md b/Flutter/funnel-chart/chart-appearance.md index 9dfd91ef7..15b6d42ae 100644 --- a/Flutter/funnel-chart/chart-appearance.md +++ b/Flutter/funnel-chart/chart-appearance.md @@ -11,7 +11,7 @@ documentation: ug ## Chart sizing -Chart renders based on the parent widget's size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. {% tabs %} {% highlight dart hl_lines="7 8" %} diff --git a/Flutter/funnel-chart/export-funnel-chart.md b/Flutter/funnel-chart/export-funnel-chart.md index 6b4782c8b..c2cc81d50 100644 --- a/Flutter/funnel-chart/export-funnel-chart.md +++ b/Flutter/funnel-chart/export-funnel-chart.md @@ -122,7 +122,7 @@ To export the funnel chart as a PNG image, we can get the image by calling [`toI ## Export PDF -Similar to the above method, we can also export the rendered Funnel chart as a PDF document. We create the pdf document using PDF component. This can be done at the application level itself. Please find the code snippet below. +Similar to the above way, we can also export the rendered Funnel chart as a PDF document. We create the PDF document using PDF component. This can be done in the application level itself. Please find the code snippet below. **Add dependency** diff --git a/Flutter/pyramid-chart/selection.md b/Flutter/pyramid-chart/selection.md index 6bdb1cb6e..aadbad902 100644 --- a/Flutter/pyramid-chart/selection.md +++ b/Flutter/pyramid-chart/selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in Flutter Pyramid Chart (SfPyramidChart) -The selection feature in chart lets you to select in a segment in a series or the series itself. This feature allows you select either individual or cluster of segments in the chart series. +The selection feature in chart lets you to select in a segment in a series or the series itself. This feature allows you to select either individual or cluster of segments in the chart series. {% tabs %} {% highlight dart %} @@ -99,7 +99,7 @@ You can customize the segments using the below properties. ## Multi-selection -Multiple segment selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) property of chart. +Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) property of chart. {% tabs %} {% highlight dart %} diff --git a/Flutter/pyramid-chart/tooltip.md b/Flutter/pyramid-chart/tooltip.md index bf048765b..5282462ea 100644 --- a/Flutter/pyramid-chart/tooltip.md +++ b/Flutter/pyramid-chart/tooltip.md @@ -167,7 +167,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom ## Tooltip positioning -The tooltip can be configured to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). +The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). {% tabs %} {% highlight dart %} @@ -259,8 +259,8 @@ The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/l The ActivationMode enum includes the following values: -* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) - activates tooltip only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates tooltip only when performing single tap action. +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates tooltip only when performing the long press action. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - activates tooltip only when performing single tap action. * [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates tooltip only when performing double tap action. * [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - hides the visibility of tooltip when setting activation mode to none. From 41b4a8a75e80f2221989b975c27ef43b5263222a Mon Sep 17 00:00:00 2001 From: AswiniDileep Date: Thu, 7 Aug 2025 15:54:49 +0530 Subject: [PATCH 13/13] FLUT-969263-[others][flutter]: Updated proper letter --- Flutter/pyramid-chart/chart-appearance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flutter/pyramid-chart/chart-appearance.md b/Flutter/pyramid-chart/chart-appearance.md index 7a01bf76d..1f1624be2 100644 --- a/Flutter/pyramid-chart/chart-appearance.md +++ b/Flutter/pyramid-chart/chart-appearance.md @@ -11,7 +11,7 @@ documentation: ug ## Chart sizing -The chart renders based on the parent widget's size. If you need the chart to be rendered in a specific size, then set the size(width/height) to the parent widget. +The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, then set the size(width/height) to the parent widget. {% tabs %} {% highlight dart hl_lines="13 14" %}