diff --git a/Flutter/DateRangePicker/customizations.md b/Flutter/DateRangePicker/customizations.md index d1ccbb97d..0025b4084 100644 --- a/Flutter/DateRangePicker/customizations.md +++ b/Flutter/DateRangePicker/customizations.md @@ -66,6 +66,9 @@ Widget build(BuildContext context) { ![Customizations Date Range Picker](images/customizations/customizations.png) +>**NOTE** +* Based on the given decoration, cell decoration will be rendered in the following order: blackout dates, special dates, disable dates, today date, weekend dates, leading or trailing dates, and dates decoration. + ## Month format You can customize the month format of the `DateRangePicker` using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property. @@ -169,6 +172,9 @@ Widget build(BuildContext context) { ![Year cell customization Date Range Picker](images/customizations/yearcell_customization.png) +>**NOTE** +* Based on the given decoration, cell decoration will be rendered in the following order: disable dates, today date, leading or trailing dates, and dates decoration. + ## See also * [How to customize the month cell of the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11307/how-to-customize-the-month-cell-of-the-flutter-date-range-picker-sfdaterangepicker) diff --git a/Flutter/DateRangePicker/localization.md b/Flutter/DateRangePicker/localization.md index eecd21cb0..bc28e7ce0 100644 --- a/Flutter/DateRangePicker/localization.md +++ b/Flutter/DateRangePicker/localization.md @@ -11,8 +11,6 @@ documentation: ug By default, the calendar widget supports US English localizations. You can change other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. -As of February 2020, [flutter package](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) supports 77 languages. - To use `flutter_localizations`, add the package as a dependency to `pubspec.yaml` file. {% highlight dart %} diff --git a/Flutter/Licensing/licensing.md b/Flutter/Licensing/licensing.md index 8ea1f8da7..72e06b6be 100644 --- a/Flutter/Licensing/licensing.md +++ b/Flutter/Licensing/licensing.md @@ -14,4 +14,4 @@ The License key registration is no longer required for Flutter from version 18.3 The Flutter controls from Syncfusion can be used without registering the license keys. -N> If you are using Syncfusion controls prior to version 18.3.0.x, please follow this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key#flutter) to register your license key. \ No newline at end of file +>**Note**: If you are using Syncfusion controls prior to version 18.3.0.x, please follow this [link](https://help.syncfusion.com/common/essential-studio/licensing/registering-license-keys#flutter) to register your license key. \ No newline at end of file diff --git a/Flutter/Release-notes/v20.1.0.47.md b/Flutter/Release-notes/v20.1.0.47.md new file mode 100644 index 000000000..fbe16b8f8 --- /dev/null +++ b/Flutter/Release-notes/v20.1.0.47.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Flutter 2022 volume 1 Main release Release Notes +description: Essential Studio for Flutter 2022 volume 1 Main release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 4, 2022" version="v20.1.0.47" %} + +{% directory path: _includes/release-notes/v20.1.0.47 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/Flutter/calendar/appointments.md b/Flutter/calendar/appointments.md index cb8794bde..dc451cb28 100644 --- a/Flutter/calendar/appointments.md +++ b/Flutter/calendar/appointments.md @@ -408,6 +408,47 @@ class _AppointmentDataSource extends CalendarDataSource { ![Adding recurrence appointment](images/appointments/recurrence-appointment.png) +### Recurrence appointments on last day of month + +To create recurring appointments on the last day of the month, use BYMONTHDAY=-1 in the flutter event calendar. + +{% tabs %} +{% highlight Dart %} + +@override + Widget build(BuildContext context) { + return Scaffold( + body: SfCalendar( + view: CalendarView.month, + dataSource: _getCalendarDataSource(), + monthViewSettings: const MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), + )); + } +} + +DataSource _getCalendarDataSource() { + final List appointments = []; + appointments.add(Appointment( + startTime: DateTime(2022, 2, 27, 9), + endTime: DateTime(2022, 2, 27, 10), + subject: 'Last day of month', + color: Colors.purple, + recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=-1;INTERVAL=1;COUNT=10')); + return DataSource(appointments); +} + +class DataSource extends CalendarDataSource { + DataSource(List source) { + appointments = source; + } +} + +{% endhighlight %} +{% endtabs %} + +![Recurrence appointment on last day of month](images/appointments/lastDayOfMonth.png) + ### Creating custom recurrence appointment For creating custom recurrence appointment, you need to create a custom class `Meeting` with mandatory fields `from`, `to`, and `recurrenceRule`. diff --git a/Flutter/calendar/images/appointments/lastDayOfMonth.png b/Flutter/calendar/images/appointments/lastDayOfMonth.png new file mode 100644 index 000000000..c4aaa2faf Binary files /dev/null and b/Flutter/calendar/images/appointments/lastDayOfMonth.png differ diff --git a/Flutter/calendar/images/timeslot-views/numberOfDaysInView.png b/Flutter/calendar/images/timeslot-views/numberOfDaysInView.png new file mode 100644 index 000000000..dba1eb9dd Binary files /dev/null and b/Flutter/calendar/images/timeslot-views/numberOfDaysInView.png differ diff --git a/Flutter/calendar/localization.md b/Flutter/calendar/localization.md index 50b086fc8..bc9045809 100644 --- a/Flutter/calendar/localization.md +++ b/Flutter/calendar/localization.md @@ -11,8 +11,6 @@ documentation: ug By default, the calendar widget supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. -As of February 2020, [flutter package](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) supports 77 languages. - To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file. {% highlight dart %} diff --git a/Flutter/calendar/timeslot-views.md b/Flutter/calendar/timeslot-views.md index 456baf97f..677b481a1 100644 --- a/Flutter/calendar/timeslot-views.md +++ b/Flutter/calendar/timeslot-views.md @@ -118,6 +118,28 @@ Widget build(BuildContext context) { ![Flexible working days and working hours](images/timeslot-views/starthour-endhour.png) +## Number of days in view +You can customize the days count by setting the [numberOfDaysInView]() property of `timeSlotViewSettings` in the calendar. + +{% tabs %} +{% highlight Dart %} + +@override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings(numberOfDaysInView: 3), + )), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Number of days in view](images/timeslot-views/numberOfDaysInView.png) + >**NOTE** * The `nonWorkingDays` property will applicable only for `workWeek` and `timelineWorkWeek` views only, and not applicable for the remaining views. * Calendar Appointments UI, which does not fall within the `startHour` and `endHour` will not be visible and if it falls partially, it will be clipped. @@ -530,6 +552,9 @@ Widget build(BuildContext context) { ![Allday panel Background color](images/getting-started/alldayPanelColor.jpg) +>**NOTE** +* It is applicable for day, week, workweek, timeline day, timeline week, and timeline workweek views. + ## See also * [Time label customization in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/11008/how-to-customize-the-time-label-in-the-flutter-event-calendar-sfcalendar) diff --git a/Flutter/cartesian-charts/annotations.md b/Flutter/cartesian-charts/annotations.md index 2334d6287..81aa42e4e 100644 --- a/Flutter/cartesian-charts/annotations.md +++ b/Flutter/cartesian-charts/annotations.md @@ -52,7 +52,7 @@ The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ 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). -{% highlight dart %} +{% highlight dart hl_lines="15 17" %} @override Widget build(BuildContext context) { @@ -67,8 +67,10 @@ To position the annotation based on axis, set the [`x`](https://pub.dev/document child: const Text('Text') ), coordinateUnit: CoordinateUnit.point, - x: 20, // x position of annotation - y: 40 // y position of annotation + // x position of annotation + x: 20, + // y position of annotation + y: 40 ) ] ) @@ -84,7 +86,7 @@ To position the annotation based on axis, set the [`x`](https://pub.dev/document 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. -{% highlight dart %} +{% highlight dart hl_lines="15" %} @override Widget build(BuildContext context) { @@ -121,7 +123,7 @@ To position the annotation based on the pixel values, set the [`CoordinateUnit`] 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. -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -175,7 +177,7 @@ To position the annotation based on the percentage values, set the [`CoordinateU 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. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -210,7 +212,7 @@ Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](h The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/horizontalAlignment.html) for annotation -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { diff --git a/Flutter/cartesian-charts/axis-customization.md b/Flutter/cartesian-charts/axis-customization.md index 7c2a09d79..f6bc09648 100644 --- a/Flutter/cartesian-charts/axis-customization.md +++ b/Flutter/cartesian-charts/axis-customization.md @@ -879,6 +879,10 @@ When you specify the same value for both [`start`](https://pub.dev/documentation ![plotband_line](images/axis-customization/plotband_line.png) +#### See Also + +* [Render a line at a specific axis value in Cartesian charts](https://www.syncfusion.com/kb/12951/how-to-render-a-line-at-a-specific-axis-value-in-cartesian-charts-sfcartesianchart). + ### Plot band padding Padding to the plot band text can be added using the [`verticalTextPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PlotBand/verticalTextPadding.html) or [`horizontalTextPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PlotBand/horizontalTextPadding.html) properties. The [`verticalTextPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PlotBand/verticalTextPadding.html) is used to move the plot band text vertically and [`horizontalTextPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PlotBand/horizontalTextPadding.html) is used to move the plot band text horizontally. @@ -1117,6 +1121,10 @@ To toggle this functionality, [`anchorRangeToVisiblePoints`](https://pub.dev/doc ![Auto_Range_Calculation](images/axis-customization/auto_range_calculation.gif) +#### See Also + +* [Synchronize on-demand loading in the Cartesian charts](https://www.syncfusion.com/kb/13021/how-to-synchronize-on-demand-loading-in-the-cartesian-charts-sfcartesianchart). + ## Axis label width customization The maximum width for axis labels and the space occupied by the axis labels can be controlled by using the [`maximumLabelWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/maximumLabelWidth.html) and [`labelsExtent`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelsExtent.html) properties of the axis respectively. If the provided width is lesser than the axis label's width, the label gets trimmed and the tooltip is shown when clicking/tapping the axis label in both cases. Both properties default to `null`. @@ -1789,3 +1797,5 @@ The different types of multi-level label's border are mentioned below, * [Creating a flutter master-detail chart using range controller in the Cartesian chart](https://www.syncfusion.com/kb/12318/how-to-create-flutter-master-detail-chart-using-the-cartesian-charts-widget). * [Changing the visible range of chart using range selector in the Cartesian chart](https://www.syncfusion.com/kb/12053/how-to-change-the-visible-chart-range-using-the-range-selector-widget-sfcartesianchart). + +* [Add vertical line and update it dynamically in the Cartesian charts](https://www.syncfusion.com/kb/13028/how-to-add-a-vertical-line-and-update-it-dynamically-in-the-cartesian-charts). diff --git a/Flutter/cartesian-charts/callbacks.md b/Flutter/cartesian-charts/callbacks.md index 29240246d..c17f9cdc0 100644 --- a/Flutter/cartesian-charts/callbacks.md +++ b/Flutter/cartesian-charts/callbacks.md @@ -677,9 +677,12 @@ Triggers when the trendline gets rendered. The `onRenderDetailsUpdate` callback print('rSquare value: ' + args.rSquaredValue.toString()); print('Intercept value (x): ' + args.intercept.toString()); }) - ]) - ], - ))); + ] + ) + ], + ) + ) + ); } {% endhighlight %} @@ -932,6 +935,12 @@ Triggers while swiping on the plot area. Whenever the swiping happens on th {% endhighlight %} +#### See Also + +* [Achieve sliding viewport functionality using Cartesian chart](https://www.syncfusion.com/kb/12841/how-to-achieve-sliding-viewport-functionality-using-cartesian-chart-sfcartesianchart). + +* [Perform an action on swiping over the Cartesian chart](https://www.syncfusion.com/kb/12532/how-to-perform-an-action-on-swiping-over-the-cartesian-chart-sfcartesianchart). + ## onRenderDetailsUpdate (ErrorBarSeries) Triggers when the error bar is being rendered. In this `onRenderDetailsUpdate` callback, you can get the following arguments. @@ -1133,9 +1142,9 @@ the data points and legend. For further reference on this callback, Check the [` ## axisLabelFormatter -Called while rendering each axis label in the chart. Provides label text, axis name, orientation of the axis, trimmed text and text styles such as color, font size, and font weight to the user using the `AxisLabelRenderDetails` class. +Called while rendering each axis label in the chart. Provides label text, axis name, orientation of the axis, trimmed text and text styles such as color, font size, and font weight to the user using the [`AxisLabelRenderDetails`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderDetails-class.html) class. -You can customize the text and text style using the `ChartAxisLabel` class and can return it. +You can customize the text and text style using the [`ChartAxisLabel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxisLabel-class.html) class and can return it. Defaults to `null`. @@ -1155,6 +1164,10 @@ Defaults to `null`. } {% endhighlight %} +#### See Also + +* [Format the date-time axis labels in Cartesian chart](https://www.syncfusion.com/kb/13044/how-to-format-the-date-time-axis-labels-in-cartesian-chart-sfcartesianchart). + ## multiLevelLabelFormatter Triggers while rendering the multi-level labels. Text and text styles such as color, font size, font-weight, etc can be customized by using [`ChartAxisLabel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxisLabel-class.html) class. The [`MultiLevelLabelRenderDetails`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MultiLevelLabelRenderDetails-class.html) contains the following arguments. @@ -1233,8 +1246,11 @@ Triggers while rendering the multi-level labels. Text and text styles such as co #### See Also * [Customize the tooltip using its callback event](https://www.syncfusion.com/kb/11507/how-to-customize-the-tooltip-using-callback-events-sfcartesianchart). + * [Customize the axis labels using its callback event](https://www.syncfusion.com/kb/11678/how-to-customize-the-axis-labels-using-callback-events-sfcartesianchart). + * [Customize the data labels using its callback event](https://www.syncfusion.com/kb/11679/how-to-customize-data-labels-using-callback-events-sfcartesianchart). + * [Disabling trackball tooltip for particular series using its callback event](https://www.syncfusion.com/kb/11638/how-to-disable-trackball-tooltip-for-particular-series-in-cartesian-charts-sfcartesianchart). * [To Synchronize panning in multiple charts](https://www.syncfusion.com/kb/11533/how-to-synchronize-panning-in-multiple-charts-sfcartesianchart). diff --git a/Flutter/cartesian-charts/chart-appearance.md b/Flutter/cartesian-charts/chart-appearance.md index 2269e03db..c7e779717 100644 --- a/Flutter/cartesian-charts/chart-appearance.md +++ b/Flutter/cartesian-charts/chart-appearance.md @@ -109,4 +109,9 @@ You can customize the plot area of the chart using the below properties. #### See Also * [Rendering a background image in the plot area of the Cartesian chart](https://www.syncfusion.com/kb/11049/how-to-render-the-cartesian-chart-sfcartesianchart-with-background-image-for-plot-area). + * [Rendering the Cartesian chart in dark theme](https://www.syncfusion.com/kb/11025/how-to-render-the-flutter-cartesian-chart-sfcartesianchart-in-dark-theme). + +* [Hide the plot area border line in the Flutter chart](https://www.syncfusion.com/kb/12573/how-to-hide-the-plot-area-border-line-in-the-flutter-chart-sfcartesianchart). + +* [Render the Flutter chart with background image](https://www.syncfusion.com/kb/12536/how-to-render-the-flutter-chart-with-background-image-sfcartesianchart). \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/area-chart.md b/Flutter/cartesian-charts/chart-types/area-chart.md index 0d3c75a71..5a7bb1f4f 100644 --- a/Flutter/cartesian-charts/chart-types/area-chart.md +++ b/Flutter/cartesian-charts/chart-types/area-chart.md @@ -222,7 +222,7 @@ Data points with a null value are considered empty points. Empty data points are The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/isTransposed.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to transpose the horizontal and vertical axes, to view the data in a different perspective. Using this feature, you can render vertical area chart. -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -250,11 +250,13 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat ![Vertical area chart](cartesian-chart-types-images/vertical_area.png) #### See Also -* [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) - * [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) - * [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) - * [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) - * [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) + +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) >**Note**: You can refer to our [Flutter Area Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/area-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Area Chart example](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/area/default-area-chart) that shows how to easily configure with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/bar-chart.md b/Flutter/cartesian-charts/chart-types/bar-chart.md index 9a93de156..cee04e2b3 100644 --- a/Flutter/cartesian-charts/chart-types/bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/bar-chart.md @@ -53,7 +53,7 @@ The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c 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. -{% highlight dart %} +{% highlight dart hl_lines="13 15" %} @override Widget build(BuildContext context) { @@ -66,8 +66,10 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - width: 0.6, // Width of the bars - spacing: 0.3 // Spacing between the bars + // Width of the bars + width: 0.6, + // Spacing between the bars + spacing: 0.3 ) ] ) @@ -84,7 +86,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. -{% highlight dart %} +{% highlight dart hl_lines="12" %} @override Widget build(BuildContext context) { @@ -119,7 +121,7 @@ You can render the bar chart with track. Track is a rectangular bar rendered fro * [`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. -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -152,6 +154,6 @@ Also refer, [color palette](./series-customization#color-palette), [color mappin #### See Also -* [Create vertical bar chart](https://www.syncfusion.com/kb/12348/how-to-create-vertical-bar-chart-in-flutter-using-cartesian-charts-widget-sfcartesianchart) +* [Create vertical bar chart](https://www.syncfusion.com/kb/12348/how-to-create-vertical-bar-chart-in-flutter-using-cartesian-charts-widget-sfcartesianchart). -* [Create horizontal bar chart](https://www.syncfusion.com/kb/12347/how-to-create-horizontal-bar-chart-in-flutter-using-cartesian-charts-widget) +* [Create horizontal bar chart](https://www.syncfusion.com/kb/12347/how-to-create-horizontal-bar-chart-in-flutter-using-cartesian-charts-widget). 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 fd3b930a6..41c646a9d 100644 --- a/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md +++ b/Flutter/cartesian-charts/chart-types/box-and-whisker-chart.md @@ -49,9 +49,9 @@ To render a Box and Whisker chart, create an instance of [`BoxAndWhiskerSeries`] #### See Also -* [Color palette](../cartesian-charts/series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/bubble-chart.md b/Flutter/cartesian-charts/chart-types/bubble-chart.md index b5afbddfa..9da225cba 100644 --- a/Flutter/cartesian-charts/chart-types/bubble-chart.md +++ b/Flutter/cartesian-charts/chart-types/bubble-chart.md @@ -65,7 +65,7 @@ Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, [`siz The [`minimumRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/minimumRadius.html) property is used to change the minimum size of the series and the [`maximumRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/maximumRadius.html) property is used to change the maximum size of the series. -{% highlight dart %} +{% highlight dart hl_lines="13 15" %} @override Widget build(BuildContext context) { @@ -78,8 +78,10 @@ The [`minimumRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/la BubbleSeries( dataSource: chartData, sizeValueMapper: (ChartData data, _) => data.size, - minimumRadius:9, // Minimum radius of bubble - maximumRadius: 15, // Maximum radius of bubble + // Minimum radius of bubble + minimumRadius:9, + // Maximum radius of bubble + maximumRadius: 15, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y ) diff --git a/Flutter/cartesian-charts/chart-types/candle-chart.md b/Flutter/cartesian-charts/chart-types/candle-chart.md index d39fe5e0d..c5f2f1379 100644 --- a/Flutter/cartesian-charts/chart-types/candle-chart.md +++ b/Flutter/cartesian-charts/chart-types/candle-chart.md @@ -64,10 +64,12 @@ To render a Candle chart, create an instance of [` CandleSeries`](https://pub.de ![candle chart](cartesian-chart-types-images/candle.png) -### See Also +#### See Also * [Rendering flutter candlestick chart](https://www.syncfusion.com/kb/12288/how-to-render-flutter-candlestick-chart-using-the-charts-widget-sfcartesianchart). +* [Display volume data of financial series](https://www.syncfusion.com/kb/12965/display-volume-data-of-financial-series-in-flutter-cartesian-chart) + ## Indication for same values In the Candle 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/CandleSeries/showIndicationForSameValues.html) property can be set to `true`. @@ -78,7 +80,7 @@ The following are the types of indication when the combination of high, low, ope * If the high and low values are same and with [`showIndicationForSameValues`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CandleSeries/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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -125,8 +127,8 @@ The following are the types of indication when the combination of high, low, ope #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/column-chart.md b/Flutter/cartesian-charts/chart-types/column-chart.md index 125484aaa..5a8678f00 100644 --- a/Flutter/cartesian-charts/chart-types/column-chart.md +++ b/Flutter/cartesian-charts/chart-types/column-chart.md @@ -58,7 +58,7 @@ To render a column chart, create an instance of [`ColumnSeries`](https://pub.dev 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. -{% highlight dart %} +{% highlight dart hl_lines="16" %} @override Widget build(BuildContext context) { @@ -112,7 +112,7 @@ The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c 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. -{% highlight dart %} +{% highlight dart hl_lines="20 22" %} @override Widget build(BuildContext context) { @@ -132,8 +132,10 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - width: 0.8, // Width of the columns - spacing: 0.2 // Spacing between the columns + // Width of the columns + width: 0.8, + // Spacing between the columns + spacing: 0.2 ) ] ) @@ -150,7 +152,7 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/borderRadius.html) property is used to add the rounded corners to the rectangle. -{% highlight dart %} +{% highlight dart hl_lines="20" %} @override Widget build(BuildContext context) { @@ -186,9 +188,11 @@ The [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [Rendering each data points with different border radius in column charts](https://www.syncfusion.com/kb/12074/how-to-set-different-border-radius-for-each-rect-series-data-points-by-extending-the) +* [Rendering each data points with different border radius in column charts](https://www.syncfusion.com/kb/12074/how-to-set-different-border-radius-for-each-rect-series-data-points-by-extending-the). -* [Adding rounded corners for the specific sides in column charts](https://www.syncfusion.com/kb/12059/how-to-add-rounded-corners-for-specific-sides-in-the-rect-series-types-sfcartesianchart) +* [Adding rounded corners for the specific sides in column charts](https://www.syncfusion.com/kb/12059/how-to-add-rounded-corners-for-specific-sides-in-the-rect-series-types-sfcartesianchart). + +* [Render a customized column chart](https://www.syncfusion.com/kb/13033/how-to-render-a-customized-column-chart-sfcartesianchart). ## Track customization @@ -199,7 +203,7 @@ Renders column with track. Track is a rectangular bar rendered from the start to * [`trackBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/trackBorderColor.html) - changes the stroke color of the track. * [`trackPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/trackPadding.html) - adds padding to the track. -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -235,11 +239,11 @@ Renders column with track. Track is a rectangular bar rendered from the start to #### See Also -* [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) -* [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) -* [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](https://help.syncfusion.com/flutter/cartesian-charts/series-customization##sorting) +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) >**Note**: You can refer to our [Flutter Column Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart) feature tour page for its groundbreaking feature representations. \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/error-bar-chart.md b/Flutter/cartesian-charts/chart-types/error-bar-chart.md index f438b5a9f..9b9f23d75 100644 --- a/Flutter/cartesian-charts/chart-types/error-bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/error-bar-chart.md @@ -71,7 +71,7 @@ You can customize the error bar depending on the error value by setting the valu * [`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`. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -93,7 +93,8 @@ You can customize the error bar depending on the error value by setting the valu xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, width: 1.5, - type: ErrorBarType.standardError) + type: ErrorBarType.standardError + ) ], ) ); @@ -159,7 +160,7 @@ The default value is [`RenderingMode.vertical`](https://pub.dev/documentation/sy * [`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. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -204,7 +205,7 @@ The default value is [`Direction.both`](https://pub.dev/documentation/syncfusion * [`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. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -241,7 +242,7 @@ The default value is [`Direction.both`](https://pub.dev/documentation/syncfusion The [`capLength`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ErrorBarSeries/capLength.html) property is used to customize the length of the error bar's cap. The default value is `10`. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -276,9 +277,9 @@ The [`capLength`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) -* [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) -* [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](https://help.syncfusion.com/flutter/cartesian-charts/series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/fast-line-chart.md b/Flutter/cartesian-charts/chart-types/fast-line-chart.md index 55eb0ea81..78525756f 100644 --- a/Flutter/cartesian-charts/chart-types/fast-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/fast-line-chart.md @@ -43,4 +43,11 @@ documentation: ug ![Fast line chart](cartesian-chart-types-images/fastline.jpg) -Also refer, [color palette](./series-customization#color-palette), [color mapping](./series-customization#color-mapping-for-data-points), [animation](./series-customization#animation), [gradient](./series-customization#gradient-fill) and [empty points](./series-customization#empty-points) for customizing the fast line series further. \ No newline at end of file +#### See Also + +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/hilo-chart.md b/Flutter/cartesian-charts/chart-types/hilo-chart.md index 487a36f7b..96b4a683e 100644 --- a/Flutter/cartesian-charts/chart-types/hilo-chart.md +++ b/Flutter/cartesian-charts/chart-types/hilo-chart.md @@ -55,8 +55,8 @@ To render a HiLo chart, create an instance of [`HiloSeries`](https://pub.dev/doc #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/histogram-chart.md b/Flutter/cartesian-charts/chart-types/histogram-chart.md index 3d7300344..32ac5c6dd 100644 --- a/Flutter/cartesian-charts/chart-types/histogram-chart.md +++ b/Flutter/cartesian-charts/chart-types/histogram-chart.md @@ -164,9 +164,9 @@ You can collapse the normal distribution curve using the [`showNormalDistributio #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/line-chart.md b/Flutter/cartesian-charts/chart-types/line-chart.md index 17f2ade3a..c7761b09b 100644 --- a/Flutter/cartesian-charts/chart-types/line-chart.md +++ b/Flutter/cartesian-charts/chart-types/line-chart.md @@ -64,7 +64,7 @@ To render a line chart, create an instance of [`LineSeries`](https://pub.dev/doc 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. -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -149,8 +149,9 @@ To render a multi-colored line series, map the individual colors to the data usi #### See Also - * [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) - * [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) - * [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) - * [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) - * [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/ohlc-chart.md b/Flutter/cartesian-charts/chart-types/ohlc-chart.md index a966d030b..869e21d42 100644 --- a/Flutter/cartesian-charts/chart-types/ohlc-chart.md +++ b/Flutter/cartesian-charts/chart-types/ohlc-chart.md @@ -63,6 +63,10 @@ To render a OpenHighLowClose chart, create an instance of [` hiloOpenCloseSeries ![hiLoopenclose chart](cartesian-chart-types-images/hilo_open_close.png) +#### See Also + +* [Display volume data of financial series](https://www.syncfusion.com/kb/12965/display-volume-data-of-financial-series-in-flutter-cartesian-chart). + ## 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`. @@ -72,7 +76,7 @@ The following are the types of indication when the combination of high, low, ope * 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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -120,8 +124,8 @@ The following are the types of indication when the combination of high, low, ope #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/range-area-chart.md b/Flutter/cartesian-charts/chart-types/range-area-chart.md index e3b297dd7..c932bd654 100644 --- a/Flutter/cartesian-charts/chart-types/range-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/range-area-chart.md @@ -91,9 +91,9 @@ The borders of the range area chart can be customized using the [`borderDrawMode #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/range-column-chart.md b/Flutter/cartesian-charts/chart-types/range-column-chart.md index 8958b408b..930adfc3a 100644 --- a/Flutter/cartesian-charts/chart-types/range-column-chart.md +++ b/Flutter/cartesian-charts/chart-types/range-column-chart.md @@ -100,7 +100,7 @@ In the range column chart when data label is enabled, by default there will be t The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/isTransposed.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to transpose the horizontal and vertical axes, to view the data in a different perspective. Using this feature, you can render range column chart. -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -141,9 +141,9 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/scatter-chart.md b/Flutter/cartesian-charts/chart-types/scatter-chart.md index 714f47b66..6c5bf252c 100644 --- a/Flutter/cartesian-charts/chart-types/scatter-chart.md +++ b/Flutter/cartesian-charts/chart-types/scatter-chart.md @@ -43,13 +43,13 @@ To render a scatter chart, create an instance of [`ScatterSeries`](https://pub.d ![Scatter chart](cartesian-chart-types-images/scatter.jpg) -### Change shape and size of the scatter +## 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 [`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. -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { @@ -83,8 +83,9 @@ The [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch #### See Also -* [color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](/flutter/cartesian-charts/series-customization#animation) -* [gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](/flutter/cartesian-charts/series-customization#empty-points) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) diff --git a/Flutter/cartesian-charts/chart-types/spline-area-chart.md b/Flutter/cartesian-charts/chart-types/spline-area-chart.md index ac6424e33..e633b6f4d 100644 --- a/Flutter/cartesian-charts/chart-types/spline-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-area-chart.md @@ -62,18 +62,18 @@ To render a spline area chart, create an instance of [`SplineAreaSeries`](https: ## Spline area rendering types -The `splineType` allows you to change the spline area curve in series. The following types can be used in `SplineAreaSeries`: +The [`splineType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries/splineType.html) allows you to change the spline area curve in series. The following types can be used in [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html): * natural * monotonic * cardinal * clamped -By default, the value of `splineType` is `natural`. +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). -The following code sample demonstrates how to set the `splineType` value to `cardinal`. When you set the cardinal type, you can specify the desired line tension of the `cardinal` spline using the `cardinalSplineTension` 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 [`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. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -115,7 +115,7 @@ The following code sample demonstrates how to set the `splineType` value to `car 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. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -156,9 +156,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) -* [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) -* [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](https://help.syncfusion.com/flutter/cartesian-charts/series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/spline-chart.md b/Flutter/cartesian-charts/chart-types/spline-chart.md index 66b8a72ad..f85cf346f 100644 --- a/Flutter/cartesian-charts/chart-types/spline-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-chart.md @@ -67,7 +67,7 @@ By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion 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. -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -107,7 +107,7 @@ The following code sample demonstrates how to set the [`splineType`](https://pub 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. -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -146,7 +146,7 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/isTransposed.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to transpose the horizontal and vertical axes, to view the data in a different perspective. Using this feature, you can render vertical Spline chart. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -195,8 +195,9 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) -* [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) -* [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file 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 04ca33224..a6c456a45 100644 --- a/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/spline-range-area-chart.md @@ -74,7 +74,7 @@ By default, the value of [`splineType`](https://pub.dev/documentation/syncfusion 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. -{% highlight dart %} +{% highlight dart hl_lines="9" %} @override Widget build(BuildContext context) { @@ -133,9 +133,9 @@ The borders of the spline range area chart can be customized using the [`borderD #### See Also -* [color palette](./cartesian-charts/series-customization#color-palette) -* [color mapping](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [animation](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation) -* [gradient](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [empty points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](https://help.syncfusion.com/flutter/cartesian-charts/series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file 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 9b5863243..aaff5a340 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-area-100-chart.md @@ -21,7 +21,7 @@ To render a 100% stacked area chart, create an instance of `StackingArea100Serie * [`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` - specifies the type of the border mode and it defaults to `top`. +* [`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). {% highlight dart %} @@ -66,9 +66,9 @@ To render a 100% stacked area chart, create an instance of `StackingArea100Serie #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/stacked-area-chart.md b/Flutter/cartesian-charts/chart-types/stacked-area-chart.md index 694146f8a..fd930579c 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-area-chart.md @@ -117,7 +117,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/StackedAreaSeries/groupName.html), then cumulative values will be shown based on grouping. -{% highlight dart %} +{% highlight dart hl_lines="13 24 35" %} @override Widget build(BuildContext context) { @@ -173,9 +173,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file 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 e2a9b004e..e2c7ea82b 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-bar-100-chart.md @@ -69,7 +69,7 @@ The [`spacing`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c 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. -{% highlight dart %} +{% highlight dart hl_lines="13 14 20 21" %} @override Widget build(BuildContext context) { @@ -106,9 +106,9 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization##sorting) diff --git a/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md b/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md index 13dabf6a7..a7edec7a3 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-bar-chart.md @@ -66,7 +66,7 @@ To render a stacked bar chart, create an instance of [`StackedBarSeries`](https: You can group and stack the similar stacked series types using the [`groupName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBarSeries/groupName.html) property of stacked series. The stacked series that contains the same [`groupName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedBarSeries/groupName.html) will be stacked in a single group. -{% highlight dart %} +{% highlight dart hl_lines="10 16 22 28" %} @override Widget build(BuildContext context) { @@ -166,9 +166,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file 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 a21304f09..5129fd28b 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-column-100-chart.md @@ -65,11 +65,11 @@ To render a 100% stacked column chart, create an instance of [`StackedColumn100S ## Column width and spacing -The `spacing` 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 [`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` 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/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. -{% highlight dart %} +{% highlight dart hl_lines="13 14 20 21" %} @override Widget build(BuildContext context) { @@ -106,9 +106,9 @@ The `width` property is used to change the width of the rectangle. The default v #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/stacked-column-chart.md b/Flutter/cartesian-charts/chart-types/stacked-column-chart.md index 5d6472401..280b0871b 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-column-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-column-chart.md @@ -83,7 +83,7 @@ To render a stacked column chart, create an instance of [`StackedColumnSeries`]( You can group and stack the similar stacked series types using the [`groupName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries/groupName.html) property of stacked series. The stacked series that contains the same [`groupName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeries/groupName.html) will be stacked in a single group. -{% highlight dart %} +{% highlight dart hl_lines="10 16 22 28" %} @override Widget build(BuildContext context) { @@ -141,7 +141,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. -{% highlight dart %} +{% highlight dart hl_lines="13 23 33 43" %} @override Widget build(BuildContext context) { @@ -153,28 +153,40 @@ You can show the cumulative data label values using the [`showCumulativeValues`] series: [ StackedColumnSeries( groupName: 'Group A', - dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true), + dataLabelSettings: DataLabelSettings( + isVisible:true, + showCumulativeValues: true + ), dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y1 ), StackedColumnSeries( groupName: 'Group B', - dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true), + dataLabelSettings: DataLabelSettings( + isVisible:true, + showCumulativeValues: true + ), dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y2 ), StackedColumnSeries( groupName: 'Group A', - dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true), + dataLabelSettings: DataLabelSettings( + isVisible:true, + showCumulativeValues: true + ), dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y3 ), StackedColumnSeries( groupName: 'Group B', - dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true), + dataLabelSettings: DataLabelSettings( + isVisible:true, + showCumulativeValues: true + ), dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y4 @@ -201,9 +213,11 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Cumulative and non-cumulative values on the stacked column charts](https://www.syncfusion.com/kb/13029/how-to-show-cumulative-and-non-cumulative-values-on-the-stacked-column-charts). + +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file 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 99044a481..d790e0710 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-line-100-chart.md @@ -63,9 +63,9 @@ To render a 100% stacked line chart, create an instance of [`StackedLine100Serie ## Dashed line -The `dashArray` property of `StackedLine100Series` 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/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. -{% highlight dart %} +{% highlight dart hl_lines="11 17 23 29" %} @override Widget build(BuildContext context) { @@ -112,8 +112,9 @@ The `dashArray` property of `StackedLine100Series` is used to render line series #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/stacked-line-chart.md b/Flutter/cartesian-charts/chart-types/stacked-line-chart.md index 6170ed9a0..3ca6e19dd 100644 --- a/Flutter/cartesian-charts/chart-types/stacked-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/stacked-line-chart.md @@ -121,7 +121,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/StackedLineSeries/groupName.html), then cumulative values will be shown based on grouping. -{% highlight dart %} +{% highlight dart hl_lines="13 24 35" %} @override Widget build(BuildContext context) { @@ -177,8 +177,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/step-area-chart.md b/Flutter/cartesian-charts/chart-types/step-area-chart.md index 250e1247a..9996f618c 100644 --- a/Flutter/cartesian-charts/chart-types/step-area-chart.md +++ b/Flutter/cartesian-charts/chart-types/step-area-chart.md @@ -50,7 +50,7 @@ To render a spline area chart, create an instance of `StepAreaSeries`, and add i 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 spline area series with dashes. Odd value is considered as rendering size and even value is considered as gap. -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -79,9 +79,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) \ No newline at end of file +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/step-line-chart.md b/Flutter/cartesian-charts/chart-types/step-line-chart.md index 8b0b0a78b..92538395c 100644 --- a/Flutter/cartesian-charts/chart-types/step-line-chart.md +++ b/Flutter/cartesian-charts/chart-types/step-line-chart.md @@ -46,7 +46,7 @@ To render a step line chart, create an instance of [`StepLineSeries`](https://pu 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. -{% highlight dart %} +{% highlight dart hl_lines="12" %} @override Widget build(BuildContext context) { @@ -74,4 +74,11 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ![Step line chart](cartesian-chart-types-images/dashed_stepline.jpg) -Also refer, [color palette](./series-customization#color-palette), [color mapping](./series-customization#color-mapping-for-data-points), [animation](./series-customization#animation), [gradient](./series-customization#gradient-fill) and [empty points](./series-customization#empty-points) for customizing the step line series further. \ No newline at end of file +#### See Also + +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file diff --git a/Flutter/cartesian-charts/chart-types/waterfall-chart.md b/Flutter/cartesian-charts/chart-types/waterfall-chart.md index 0e1a8ec80..8a07fe1a4 100644 --- a/Flutter/cartesian-charts/chart-types/waterfall-chart.md +++ b/Flutter/cartesian-charts/chart-types/waterfall-chart.md @@ -80,10 +80,9 @@ To render a waterfall chart, create an instance of [`WaterfallSeries`](https://p #### See Also -* [Color palette](./series-customization#color-palette) -* [Color mapping](./series-customization#color-mapping-for-data-points) -* [Animation](./series-customization#animation) -* [Gradient](./series-customization#gradient-fill) -* [Empty points](./series-customization#empty-points) -* [Sorting](./series-customization##sorting) - +* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) +* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) +* [Animation](/flutter/cartesian-charts/series-customization#animation) +* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) +* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) +* [Sorting](/flutter/cartesian-charts/series-customization#sorting) diff --git a/Flutter/cartesian-charts/getting-started.md b/Flutter/cartesian-charts/getting-started.md index cfd32f317..5cf62ef89 100644 --- a/Flutter/cartesian-charts/getting-started.md +++ b/Flutter/cartesian-charts/getting-started.md @@ -58,7 +58,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. -{% highlight dart %} +{% highlight dart hl_lines="2 7" %} @override Widget build(BuildContext context) { @@ -121,6 +121,12 @@ Based on your data, initialize the appropriate axis type and series type. In the ![Bind data source](images/getting-started/data_source.jpg) +#### See Also + +* [Bind data from the list to the Flutter Cartesian chart](https://www.syncfusion.com/kb/12592/how-to-bind-data-from-the-list-to-the-flutter-cartesian-chart-sfcartesianchart). + +* [Bind data from the array to the Flutter Cartesian chart](https://www.syncfusion.com/kb/12591/how-to-bind-data-from-the-array-to-the-flutter-cartesian-chart-sfcartesianchart). + ## Add title You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. diff --git a/Flutter/cartesian-charts/images/localization/localization.jpg b/Flutter/cartesian-charts/images/localization/localization.jpg new file mode 100644 index 000000000..60804f823 Binary files /dev/null and b/Flutter/cartesian-charts/images/localization/localization.jpg differ diff --git a/Flutter/cartesian-charts/images/localization/localization_built-in_text.gif b/Flutter/cartesian-charts/images/localization/localization_built-in_text.gif new file mode 100644 index 000000000..e2bcaeec8 Binary files /dev/null and b/Flutter/cartesian-charts/images/localization/localization_built-in_text.gif differ diff --git a/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.jpg b/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.jpg new file mode 100644 index 000000000..a8e52990c Binary files /dev/null and b/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.jpg differ diff --git a/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.png b/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.png deleted file mode 100644 index 461aa309e..000000000 Binary files a/Flutter/cartesian-charts/images/rtl-support/cartesian_legend_rtl.png and /dev/null differ diff --git a/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.jpg b/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.jpg new file mode 100644 index 000000000..90e45d258 Binary files /dev/null and b/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.jpg differ diff --git a/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.png b/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.png deleted file mode 100644 index 56a4e59ca..000000000 Binary files a/Flutter/cartesian-charts/images/rtl-support/cartesian_tooltip_rtl.png and /dev/null differ diff --git a/Flutter/cartesian-charts/images/rtl-support/series_axis_rtl.jpg b/Flutter/cartesian-charts/images/rtl-support/series_axis_rtl.jpg deleted file mode 100644 index f916cb359..000000000 Binary files a/Flutter/cartesian-charts/images/rtl-support/series_axis_rtl.jpg and /dev/null differ diff --git a/Flutter/cartesian-charts/images/rtl-support/series_rtl.jpg b/Flutter/cartesian-charts/images/rtl-support/series_rtl.jpg new file mode 100644 index 000000000..dcddf2fb3 Binary files /dev/null and b/Flutter/cartesian-charts/images/rtl-support/series_rtl.jpg differ diff --git a/Flutter/cartesian-charts/images/rtl-support/trackball_rtl.jpg b/Flutter/cartesian-charts/images/rtl-support/trackball_rtl.jpg new file mode 100644 index 000000000..ba3bd7a6e Binary files /dev/null and b/Flutter/cartesian-charts/images/rtl-support/trackball_rtl.jpg differ diff --git a/Flutter/cartesian-charts/images/trackball-crosshair/trackball_smart_positioning.gif b/Flutter/cartesian-charts/images/trackball-crosshair/trackball_smart_positioning.gif new file mode 100644 index 000000000..00cdfe888 Binary files /dev/null and b/Flutter/cartesian-charts/images/trackball-crosshair/trackball_smart_positioning.gif differ diff --git a/Flutter/cartesian-charts/localization.md b/Flutter/cartesian-charts/localization.md new file mode 100644 index 000000000..2e52aa0e8 --- /dev/null +++ b/Flutter/cartesian-charts/localization.md @@ -0,0 +1,144 @@ +--- +layout: post +title: Localization in Flutter Cartesain Charts widget | Syncfusion +description: Learn here all about Localization feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +platform: flutter +control: Chart +documentation: ug +--- + +# Localization in Flutter Cartesian Charts (SfCartesianChart) + +By default, the Cartesian charts widget supports US English localizations. You can change the other languages by specifying the [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html) properties and adding the [`flutter_localizations`](https://pub.dev/packages/localization) package to your application. + +To use [`flutter_localizations`](https://pub.dev/packages/localization), add the package as dependency to `pubspec.yaml` file. + +{% highlight dart %} + + dependencies: + flutter_localizations: + sdk: flutter + +{% endhighlight %} + +Next, import the [`flutter_localizations`](https://pub.dev/packages/localization) library and specify [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) and [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) for [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html). + +{% highlight dart %} + + import 'package:flutter_localizations/flutter_localizations.dart'; + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + const Locale('en'), + const Locale('fr'), + const Locale('ar'), + ], + locale: const Locale('ar'), + title: 'Cartesian Chart Localization', + home: Scaffold( + body: SfCartesianChart( + + // Other Configurations.. + + ), + ), + ); + } + +{% endhighlight %} + +## Localization support for built-in text + +Based on the current locale, the built-in text in the legend and tooltips are translated automatically. + +![Localization with built-in text](images/localization/localization_built-in_text.gif) + +## Localize the custom text in chart + +Cartesian chart custom text can be localized using the [`syncfusion_localizations`](https://pub.dev/packages/syncfusion_localizations) package and specifying [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) in [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html). + +To use [`syncfusion_localizations`](https://pub.dev/packages/syncfusion_localizations), add the package as dependency to `pubspec.yaml` file. + +{% highlight dart %} + + dependencies: + syncfusion_localizations: ^xx.x.xx + +{% endhighlight %} + +>**Note**: Here xx.x.xx denotes the current version of [`syncfusion_localizations`](https://pub.dev/packages/syncfusion_localizations) package. + +Next, import the [`syncfusion_localizations`](https://pub.dev/packages/syncfusion_localizations) library. + +{% highlight dart %} + + import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + +{% endhighlight %} + +Then, declare the [`SfGlobalLocalizations.delegate`](https://pub.dev/documentation/syncfusion_localizations/latest/syncfusion_localizations/SfGlobalLocalizations-class.html) in the [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), which is used to localize the custom string (series name displayed in legend) in the Cartesian chart and specify the [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) as well. + +{% highlight dart %} + + late TooltipBehavior _tooltipBehavior; + + @override + void initState(){ + _tooltipBehavior = TooltipBehavior(enable: true); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData(x: 'الصين', y: 34), + ChartData(x: 'إيطاليا', y: 42), + ChartData(x: 'ديك رومى', y: 18), + ChartData(x: 'المكسيك', y: 24), + ChartData(x: 'تايلاند', y: 22), + ChartData(x: 'ألمانيا', y: 38) + ]; + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + SfGlobalLocalizations.delegate + ], + supportedLocales: [ + const Locale('en'), + const Locale('fr'), + const Locale('ar'), + ], + locale: const Locale('ar'), + home: Scaffold( + body: SfCartesianChart( + legend: Legend(isVisible: true), + tooltipBehavior: _tooltipBehavior, + primaryAxis: CategoryAxis(), + series: >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ), + ] + ), + ), + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } + +{% endhighlight %} + +![Localization Chart](images/localization/localization.jpg) diff --git a/Flutter/cartesian-charts/methods.md b/Flutter/cartesian-charts/methods.md index 46b7d2de6..e1a3abb56 100644 --- a/Flutter/cartesian-charts/methods.md +++ b/Flutter/cartesian-charts/methods.md @@ -1259,7 +1259,7 @@ Widget build(BuildContext context) { #### See Also -*[Rendering real time live charts using updateDataSource method](https://www.syncfusion.com/kb/12316/how-to-create-flutter-real-time-charts-using-the-cartesian-charts-widget-sfcartesianchart). +* [Rendering real time live charts using updateDataSource method](https://www.syncfusion.com/kb/12316/how-to-create-flutter-real-time-charts-using-the-cartesian-charts-widget-sfcartesianchart). ## PixelToPoint diff --git a/Flutter/cartesian-charts/on-demand-loading.md b/Flutter/cartesian-charts/on-demand-loading.md index 1426db2e3..29d490c0a 100644 --- a/Flutter/cartesian-charts/on-demand-loading.md +++ b/Flutter/cartesian-charts/on-demand-loading.md @@ -63,3 +63,7 @@ The below example demonstrates the infinite scrolling by showing the ci ![Infinite_scrolling](images/on-demand-loading/infinite_scrolling.gif) >**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. + +#### See Also + +* [Lazily load more data to the chart](https://www.syncfusion.com/kb/12535/how-to-lazily-load-more-data-to-the-chart-sfcartesianchart). \ No newline at end of file diff --git a/Flutter/cartesian-charts/right-to-left.md b/Flutter/cartesian-charts/right-to-left.md index 9ba5a13a6..f7ed4879f 100644 --- a/Flutter/cartesian-charts/right-to-left.md +++ b/Flutter/cartesian-charts/right-to-left.md @@ -9,9 +9,9 @@ documentation: ug # Right To Left (RTL) in Flutter Cartesian Chart (SfCartesianChart) -Cartesian chart supports right to left rendering. But chart axis, series, and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed. +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. -## RLT rendering ways +## RTL rendering ways Right to left rendering can be switched in the following ways: @@ -19,28 +19,28 @@ Right to left rendering can be switched in the following ways: 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). -{% highlight dart %} +{% highlight dart hl_lines="5" %} @override Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfCartesianChart( - //... - ), - ), - ); + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCartesianChart( + //... + ), + ), + ); } {% endhighlight %} ### Changing the locale to RTL languages -To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. +To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, Urdu. {% highlight dart %} - + /// Package import import 'package:flutter_localizations/flutter_localizations.dart'; @@ -48,69 +48,223 @@ To change the chart rendering direction from right to left, you can change the [ @override Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale('en'), - Locale('ar'), - // ... other locales the app supports - ], - locale: Locale('ar'), - home: Scaffold( - body: SfCartesianChart( - //... - ), - ) - ); + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + Locale('en'), + Locale('ar'), + // ... other locales the app supports + ], + locale: Locale('ar'), + home: Scaffold( + body: SfCartesianChart( + //... + ), + ) + ); } - {% endhighlight %} ## RTL supported chart elements -Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction. +### Legend -![legend RTL](images/rtl-support/cartesian_legend_rtl.png) +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. -In addition, if you want the chart series and axis to look like it is rendering from right to left direction, set the [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property in [`primaryXAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) to true and [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property in [`primaryYAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) to true. +{% highlight dart hl_lines="3 6" %} -{% highlight dart %} + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData(1, 24), + ChartData(2, 20), + ChartData(3, 35), + ChartData(4, 27), + ChartData(5, 30), + ChartData(6, 41), + ChartData(7, 26) + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCartesianChart( + legend: Legend( + isVisible: true + ), + series: >[ + LineSeries( + name: 'Weekly expenses', + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ) + ); + } - SfCartesianChart( - primaryXAxis: NumericAxis( - opposedPosition: true - ), - primaryYAxis: NumericAxis( - isInversed: true - ), - //... - ) + class ChartData { + ChartData(this.x, this.y); + final int x; + final int y; + } {% endhighlight %} -![series axis RTL](images/rtl-support/series_axis_rtl.jpg) +![Legend RTL](images/rtl-support/cartesian_legend_rtl.jpg) -Also, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `point.y : point.x`. By default, the tooltip format will be `point.x : point.y`. +### 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. {% highlight dart %} - - late TooltipBehavior _tooltipBehavior; + late TooltipBehavior _tooltipBehavior; @override void initState(){ - _tooltipBehavior = TooltipBehavior(enable: true, - format: 'point.y : point.x'); + _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } - SfCartesianChart( - tooltipBehavior: _tooltipBehavior, - //... - ) + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData(1, 24), + ChartData(2, 20), + ChartData(3, 35), + ChartData(4, 27), + ChartData(5, 30), + ChartData(6, 41), + ChartData(7, 26) + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCartesianChart( + tooltipBehavior = _tooltipBehavior; + series: >[ + LineSeries( + name: 'Weekly expenses', + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final int x; + final int y; + } + +{% endhighlight %} + +![Tooltip RTL](images/rtl-support/cartesian_tooltip_rtl.jpg) + +### Trackball + +Right-to-left rendering is applicable for trackball tooltip elements. + +* The trackball tooltip will render on the right side of the trackball line in LTR rendering if adequate space is available else will be moved to the left. +* The trackball tooltip will render on the left side of the trackball line in RTL rendering if adequate space is available else moved to the right and this is the default behavior. + +{% highlight dart %} + + late TrackballBehavior _trackballBehavior; + + @override + void initState() { + _trackballBehavior = TrackballBehavior(enable: true); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData(1, 24), + ChartData(2, 20), + ChartData(3, 35), + ChartData(4, 27), + ChartData(5, 30), + ChartData(6, 41), + ChartData(7, 26) + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCartesianChart( + trackballBehavior = _trackballBehavior; + series: >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final int x; + final int y; + } + +{% endhighlight %} + +![Trackball RTL](images/rtl-support/trackball_rtl.jpg) + +In addition, if you want the chart series and axis to look like it is rendering from right to left direction, set the [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property in [`primaryYAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) to true and [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property in [`primaryXAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) to true. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData(1, 24), + ChartData(2, 20), + ChartData(3, 35), + ChartData(4, 27), + ChartData(5, 30), + ChartData(6, 41), + ChartData(7, 26) + ]; + return Scaffold( + body: SfCartesianChart( + primaryXAxis: NumericAxis( + isInversed: true, + ), + primaryYAxis: NumericAxis( + opposedPosition: true, + ), + series: >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final int x; + final int y; + } {% endhighlight %} -![Tooltip RTL](images/rtl-support/cartesian_tooltip_rtl.png) \ No newline at end of file +![Series axis RTL](images/rtl-support/series_rtl.jpg) diff --git a/Flutter/cartesian-charts/series-customization.md b/Flutter/cartesian-charts/series-customization.md index 22e8ab2de..43f5d873d 100644 --- a/Flutter/cartesian-charts/series-customization.md +++ b/Flutter/cartesian-charts/series-customization.md @@ -208,6 +208,8 @@ Defaults to `0` for all the series except [`ErrorBarSeries`](https://pub.dev/doc * [Dynamically animate chart using public methods](https://www.syncfusion.com/kb/12205/how-to-animate-the-chart-series-dynamically-using-the-public-method-sfcartesianchart). +* [Change the series delay duration in Flutter Cartesian charts](https://www.syncfusion.com/kb/12972/change-the-series-delay-duration-in-flutter-cartesian-charts). + ## Transpose the series The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/isTransposed.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to transpose the horizontal and vertical axes, to view the data in a different perspective. Using this feature, you can render vertical charts. diff --git a/Flutter/cartesian-charts/technical-indicators.md b/Flutter/cartesian-charts/technical-indicators.md index bae321ac8..4ca403feb 100644 --- a/Flutter/cartesian-charts/technical-indicators.md +++ b/Flutter/cartesian-charts/technical-indicators.md @@ -219,7 +219,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 `Line`, `Histogram` MACD or `Both` 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), [`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, 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. @@ -473,7 +473,7 @@ Legend provides information about the series rendered in the chart. Legend for t The following code example can define the legend. -{% highlight dart %} +{% highlight dart hl_lines="10 11" %} @override Widget build(BuildContext context){ @@ -515,7 +515,7 @@ Also refer [`technical indicators event`](https://pub.dev/documentation/syncfusi The chart will display the segment information through the tooltip. It is used to show information about the segment when you tap on the segment. The technical indicator 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. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late TooltipBehavior _tooltipBehavior; @@ -620,7 +620,9 @@ Refer the following example below * [Refer this link for technical indicators callback](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderdetailsupdate). -_Note_ : Each indicators has their own number of value mappers available, +* [Bind data source to technical indicators in Flutter Cartesian chart](https://www.syncfusion.com/kb/12966/bind-data-source-to-technical-indicators-in-flutter-cartesian-chart). + +>**Note**: Each indicators has their own number of value mappers available, * [`Accumulation distribution indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AccumulationDistributionIndicator-class.html) (AD) - can be rendered with five value mappers ([`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/xValueMapper.html), [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/lowValueMapper.html), [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/highValueMapper.html), [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/closeValueMapper.html), [`volumeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AccumulationDistributionIndicator/volumeValueMapper.html)). * [`Average true range indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AtrIndicator-class.html) (ATR) - can be rendered with four value mappers ([`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/xValueMapper.html), [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/lowValueMapper.html), [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/highValueMapper.html), [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/closeValueMapper.html)). diff --git a/Flutter/cartesian-charts/tooltip.md b/Flutter/cartesian-charts/tooltip.md index 2eada425a..4f3d38dec 100644 --- a/Flutter/cartesian-charts/tooltip.md +++ b/Flutter/cartesian-charts/tooltip.md @@ -13,14 +13,13 @@ Chart provides tooltip support for all the series. It is used to show informatio 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. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late TooltipBehavior _tooltipBehavior; @override void initState() { - _tooltipBehavior = TooltipBehavior( - enable: true); + _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } @override @@ -121,7 +120,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom * Name of the series - `series.name` * Stores the cumulative value for stacked series - `point.cumulative ` -{% highlight dart %} +{% highlight dart hl_lines="8" %} late TooltipBehavior _tooltipBehavior; @@ -153,7 +152,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom 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). -{% highlight dart %} +{% highlight dart hl_lines="7" %} late TooltipBehavior _tooltipBehavior; @@ -237,7 +236,7 @@ The ActivationMode enum contains the following values: * [`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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} late TooltipBehavior _tooltipBehavior; diff --git a/Flutter/cartesian-charts/trackball-crosshair.md b/Flutter/cartesian-charts/trackball-crosshair.md index ae56e1988..33fffdfc1 100644 --- a/Flutter/cartesian-charts/trackball-crosshair.md +++ b/Flutter/cartesian-charts/trackball-crosshair.md @@ -87,7 +87,7 @@ The [`tooltipDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_char * [`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. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late TrackballBehavior _trackballBehavior; @@ -136,7 +136,7 @@ The position of trackball tooltip can be changed using the [`tooltipAlignment`]( >**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). -{% highlight dart %} +{% highlight dart hl_lines="7" %} late TrackballBehavior _trackballBehavior; @@ -181,7 +181,7 @@ The position of trackball tooltip can be changed using the [`tooltipAlignment`]( 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. -{% highlight dart %} +{% highlight dart hl_lines="9" %} late TrackballBehavior _trackballBehavior; @@ -232,7 +232,7 @@ The ActivationMode enum contains the following values: * [`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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} late TrackballBehavior _trackballBehavior; @@ -331,6 +331,84 @@ The ActivationMode enum contains the following values: ![Trackball tooltip overlap](images/trackball-crosshair/trackball_overlap.png) +And moreover, the trackball tooltip will render on the right side of the trackball line if adequate space is available else will be moved to the left by default. The trackball tooltip is smartly positioned above the trackball line if there is no space on the right and left sides of the trackball line. However, the trackball tooltip size must be smaller than the chart's plot area size. + +{% highlight dart %} + + late TrackballBehavior _trackballBehavior; + final List data = [ + ChartData('Jan', 15, 39, 60), + ChartData('Feb', 20, 30, 55), + ChartData('Mar', 25, 28, 48), + ChartData('Apr', 21, 35, 57), + ChartData('May', 13, 39, 62), + ChartData('Jun', 18, 41, 64), + ChartData('Jul', 24, 45, 57), + ChartData('Aug', 23, 48, 53), + ChartData('Sep', 19, 54, 63), + ChartData('Oct', 31, 55, 50), + ChartData('Nov', 39, 57, 66), + ChartData('Dec', 50, 60, 65), + ]; + + @override + void initState(){ + _trackballBehavior = TrackballBehavior( + enable: true, + tooltipDisplayMode: TrackballDisplayMode.groupAllPoints + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return SfCartesianChart( + primaryXAxis: CategoryAxis(), + trackballBehavior: _trackballBehavior, + series: >[ + LineSeries( + dataSource: data, + markerSettings: MarkerSettings(isVisible: true), + name: 'United States of America', + xValueMapper: (ChartData sales, _) => sales.month, + yValueMapper: (ChartData sales, _) => sales.firstSale, + ), + LineSeries( + dataSource: data, + markerSettings: MarkerSettings(isVisible: true), + name: 'Germany', + xValueMapper: (ChartData sales, _) => sales.month, + yValueMapper: (ChartData sales, _) => sales.secondSale, + ), + LineSeries( + dataSource: data, + markerSettings: MarkerSettings(isVisible: true), + name: 'United Kingdom', + xValueMapper: (ChartData sales, _) => sales.month, + yValueMapper: (ChartData sales, _) => sales.thirdSale, + ) + ] + ); + } + + class ChartData { + ChartData( + this.month, + this.firstSale, + this.secondSale, + this.thirdSale + ); + + final String month; + final double firstSale; + final double secondSale; + final double thirdSale; + } + +{% endhighlight %} + +![Trackball tooltip smart positioning](images/trackball-crosshair/trackball_smart_positioning.gif) + ### 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 @@ -341,7 +419,7 @@ Trackball markers are used to provide information about the exact point location Also refer, [marker customization](./marker-datalabel#Marker) for customizing the appearance of trackball marker. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late TrackballBehavior _trackballBehavior; @@ -349,8 +427,7 @@ Also refer, [marker customization](./marker-datalabel#Marker) for customizing th void initState(){ _trackballBehavior = TrackballBehavior( enable: true, - markerSettings: TrackballMarkerSettings( - markerVisibility: TrackballVisibilityMode.visible) + markerSettings: TrackballMarkerSettings(markerVisibility: TrackballVisibilityMode.visible) ); super.initState(); } @@ -407,62 +484,66 @@ You can customize the appearance of the trackball tooltip with your own widgets late TrackballBehavior _trackballBehavior; @override - void initState(){ + void initState() { _trackballBehavior = TrackballBehavior( - enable: true, - builder: (BuildContext context, - TrackballDetails trackballDetails) { - return Container( - height: 50, - width: 150, - decoration: BoxDecoration( - color: Color.fromRGBO(0, 8, 22, 0.75), - borderRadius: - BorderRadius.all(Radius.circular(6.0)), - ), - child: Row(children: [ - Padding( - padding: EdgeInsets.only(left: 5), - child: SizedBox( - child: - Image.asset('images/People_Circle16.png'), - height: 30, - width: 30, - )), - Center( - child: Container( - padding: EdgeInsets.only(top: 11, left: 7), - height: 40, - width: 100, - child: Text( - '${trackballDetails.point.x.toString()} : \$${trackballDetails.point.y.toString()}', - style: TextStyle( - fontSize: 13, - color: Color.fromRGBO( - 255, 255, 255, 1))))) - ])); - }, - ); + enable: true, + builder: (BuildContext context, TrackballDetails trackballDetails) { + return Container( + height: 50, + width: 150, + decoration: BoxDecoration( + color: Color.fromRGBO(0, 8, 22, 0.75), + borderRadius: BorderRadius.all(Radius.circular(6.0)), + ), + child: Row( + children: [ + Padding( + padding: EdgeInsets.only(left: 5), + child: SizedBox( + child: Image.asset('images/People_Circle16.png'), + height: 30, + width: 30, + ) + ), + Center( + child: Container( + padding: EdgeInsets.only(top: 11, left: 7), + height: 40, + width: 100, + child: Text( + '${trackballDetails.point!.x.toString()} : \$${trackballDetails.point!.y.toString()}', + style: TextStyle( + fontSize: 13, + color: Color.fromRGBO(255, 255, 255, 1) + ) + ) + ) + ) + ], + ), + ); + }, + ); super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - child: Center( - child: Container( + return Scaffold( + body: Center( + child: Container( child: SfCartesianChart( primaryXAxis: CategoryAxis(), trackballBehavior: _trackballBehavior, - series: >[ + series: >[ SplineSeries( - dataSource: ChartData, + dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) - ] - ) - ) - ) + ], + ), + ), + ), ); } @@ -470,7 +551,7 @@ You can customize the appearance of the trackball tooltip with your own widgets ChartData(this.x, this.y); final String x; final double? y; - } + } {% endhighlight %} @@ -557,6 +638,8 @@ Defaults to `true`. * [Synchronize trackball with multiple charts in Cartesian charts](https://www.syncfusion.com/kb/11881/how-to-synchronize-trackball-in-multiple-charts-sfcartesianchart). +* [Hide the marker displayed in the trackball tooltip](https://www.syncfusion.com/kb/12534/how-to-hide-the-marker-displayed-in-the-trackball-tooltip-sfcartesianchart). + ## Crosshair Crosshair has a vertical and horizontal line to view the value of the axis. diff --git a/Flutter/cartesian-charts/trendline.md b/Flutter/cartesian-charts/trendline.md index dd7d8bb0b..22b5aea1a 100644 --- a/Flutter/cartesian-charts/trendline.md +++ b/Flutter/cartesian-charts/trendline.md @@ -40,7 +40,7 @@ Chart supports 6 types of trendlines. A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline type as Linear. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -82,7 +82,7 @@ An exponential trendline is a curved line that is most useful when data values r To render an exponential trendline, use trendline type as Exponential. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -124,7 +124,7 @@ A logarithmic trendline is a best-fit curved line that is most useful when the r To render a logarithmic trendline, use trendline type as Logarithmic -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -166,7 +166,7 @@ A polynomial trendline is a curved line that is used when data fluctuates. To render a polynomial trendline, use trendline type as Polynomial. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -208,7 +208,7 @@ A power trendline is a curved line that is best used with data sets that compare To render a power trendline, use trendline type as Power -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -249,7 +249,7 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o To render a moving average trendline, use trendline type as MovingAverage -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -295,7 +295,7 @@ Forward Forecasting and Backward Forecasting are the two types of forecasting. The value set for forwardForecast is used to determine the distance moving towards the future trend. -{% highlight dart %} +{% highlight dart hl_lines="15" %} @override Widget build(BuildContext context) { @@ -336,7 +336,7 @@ The value set for forwardForecast is used to determine the distance moving towar The value set for the backwardForecast is used to determine the past trends. -{% highlight dart %} +{% highlight dart hl_lines="15" %} @override Widget build(BuildContext context) { @@ -375,9 +375,9 @@ The value set for the backwardForecast is used to determine the past trends. ## Legend for TrendLine -Legend for trendline gets rendered together 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/Trendline/name.html) property is assigned to a trendline, the name of the legend is changed based on the name of the trendlines. +Legend for trendline gets rendered together 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/Trendline/name.html) property is assigned to a trendline, the name of the legend is changed based on the name of the trendlines. -{% highlight dart %} +{% highlight dart hl_lines="16" %} @override Widget build(BuildContext context) { @@ -420,7 +420,7 @@ Legend for trendline gets rendered together with the series legend when the lege 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) . -{% highlight dart %} +{% highlight dart hl_lines="16" %} @override Widget build(BuildContext context) { @@ -462,7 +462,7 @@ Data markers are used to provide information about the data points in the series 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. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late TooltipBehavior _tooltipBehavior; diff --git a/Flutter/cartesian-charts/zoom-pan.md b/Flutter/cartesian-charts/zoom-pan.md index abebbacfa..f2b1f405c 100644 --- a/Flutter/cartesian-charts/zoom-pan.md +++ b/Flutter/cartesian-charts/zoom-pan.md @@ -14,7 +14,7 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late ZoomPanBehavior _zoomPanBehavior; @@ -50,7 +50,7 @@ Pinch zooming can be enabled by [`enablePinching`](https://pub.dev/documentation Double tap zooming can be enabled using [`enableDoubleTapZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDoubleTapZooming.html) property. Defaults to `false`. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late ZoomPanBehavior _zoomPanBehavior; @@ -94,7 +94,7 @@ You can customize the selection rectangle using the below properties. * [`selectionRectBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/selectionRectBorderColor.html) - used to change the stroke color of the selection rectangle. * [`selectionRectColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/selectionRectColor.html) - used to change the background color of the selection rectangle. -{% highlight dart %} +{% highlight dart hl_lines="6" %} late ZoomPanBehavior _zoomPanBehavior; @@ -200,14 +200,13 @@ The axis tooltip on selection zooming can be enabled using [`enable`](https://pu The [`enableMouseWheelZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableMouseWheelZooming.html) can be performed by rolling the mouse wheel up or down. The place where the cursor is hovering gets zoomed in or out according to the mouse wheel rolling up or down. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late ZoomPanBehavior _zoomPanBehavior; @override void initState(){ - _zoomPanBehavior = ZoomPanBehavior( - enableMouseWheelZooming : true); + _zoomPanBehavior = ZoomPanBehavior(enableMouseWheelZooming : true); super.initState(); } @@ -234,7 +233,7 @@ The [`enableMouseWheelZooming`](https://pub.dev/documentation/syncfusion_flutter The [`enableAutoIntervalOnZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/enableAutoIntervalOnZooming.html) property determines the update of axis interval based on the current visible range while zooming and panning the chart. Default value of this property is true. If this property is false, the nice interval will not be calculated for new range after zoom in and actual interval will be sustained. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -260,14 +259,13 @@ The [`enableAutoIntervalOnZooming`](https://pub.dev/documentation/syncfusion_flu The [`maximumZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/maximumZoomLevel.html) property defines the maximum zooming level. Zooming will be stopped after reaching this value. This defaults to `null`. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late ZoomPanBehavior _zoomPanBehavior; @override void initState(){ - _zoomPanBehavior = ZoomPanBehavior( - maximumZoomLevel: 3); + _zoomPanBehavior = ZoomPanBehavior(maximumZoomLevel: 3); super.initState(); } @@ -294,7 +292,7 @@ Panning can be performed on a zoomed axis. You can pan the zoomed chart with [`e 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. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late ZoomPanBehavior _zoomPanBehavior; diff --git a/Flutter/circular-charts/annotations.md b/Flutter/circular-charts/annotations.md index fd0f34e92..434fec2be 100644 --- a/Flutter/circular-charts/annotations.md +++ b/Flutter/circular-charts/annotations.md @@ -113,8 +113,8 @@ Chart supports watermark which allows you to mark the specific area of interest ChartData('apr', 38), ChartData('may', 40), ], - xValueMapper: (ChartData sales, _) => sales.year, - yValueMapper: (ChartData sales, _) => sales.sales), + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y), ], ) ) @@ -125,9 +125,9 @@ Chart supports watermark which allows you to mark the specific area of interest } class ChartData { - ChartData(this.year, this.sales); - final String year; - final double sales; + ChartData(this.x, this.y); + final String x; + final double y; } {% endhighlight %} diff --git a/Flutter/circular-charts/callbacks.md b/Flutter/circular-charts/callbacks.md index 7cc0afc1f..a999dc4a8 100644 --- a/Flutter/circular-charts/callbacks.md +++ b/Flutter/circular-charts/callbacks.md @@ -149,6 +149,10 @@ Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/do {% endhighlight %} +#### See Also + +* [Show the tapped point value at the center of the doughnut chart](https://www.syncfusion.com/kb/13045/how-to-show-the-tapped-point-value-at-the-center-of-the-doughnut-chart-sfcircularchart). + ## onPointDoubleTap Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onPointDoubleTap.html) callback contains the following arguments. @@ -311,8 +315,8 @@ Triggers when tapping on the data label of the data point in the series. The [`o series: >[ PieSeries( dataSource: sample, - xValueMapper: (Sample sales, _) => sales.x, - yValueMapper: (Sample sales, _) => sales.y, + xValueMapper: (Sample data, _) => data.x, + yValueMapper: (Sample data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true), ) diff --git a/Flutter/circular-charts/chart-appearance.md b/Flutter/circular-charts/chart-appearance.md index 1620ff06f..c39bc3d33 100644 --- a/Flutter/circular-charts/chart-appearance.md +++ b/Flutter/circular-charts/chart-appearance.md @@ -13,7 +13,7 @@ documentation: ug 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. By default initializing only the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) without defining any of its properties renders a white screen. -{% highlight dart %} +{% highlight dart hl_lines="8 10" %} @override Widget build(BuildContext context) { @@ -21,8 +21,10 @@ Chart renders based on the parent widget size. If you need the chart to be rende body: SafeArea( child: Center( child: Container( - height: 300, // height of the Container widget - width: 350, // width of the Container widget + // height of the Container widget + height: 300, + // width of the Container widget + width: 350, child: SfCircularChart() ) ) @@ -36,7 +38,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/SfCircularChart/margin.html) property. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { diff --git a/Flutter/circular-charts/chart-title.md b/Flutter/circular-charts/chart-title.md index 460751b5a..4507c6c58 100644 --- a/Flutter/circular-charts/chart-title.md +++ b/Flutter/circular-charts/chart-title.md @@ -51,18 +51,18 @@ You can align the title text content horizontally to the near, center or far of ), series: [ // Initialize line series - PieSeries( + PieSeries( dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - pointColorMapper: (SalesData sales, _) => sales.color, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + pointColorMapper: (ChartData data, _) => data.color, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ] ) diff --git a/Flutter/circular-charts/chart-types/doughnut-chart.md b/Flutter/circular-charts/chart-types/doughnut-chart.md index bff7b65f5..e1aad068e 100644 --- a/Flutter/circular-charts/chart-types/doughnut-chart.md +++ b/Flutter/circular-charts/chart-types/doughnut-chart.md @@ -68,7 +68,7 @@ To render a doughnut chart, create an instance of [`DoughnutSeries`](https://pub The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/cornerStyle.html) property specifies the corner type for doughnut chart. The corners can be customized using the [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), [`CornerStyle.bothCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), [`CornerStyle.startCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), and [`CornerStyle.endCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html) options. The default value of this property is [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html). -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -179,7 +179,7 @@ You can use the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_fl You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the doughnut chart with respect to the plot area. The default value of this property is 80%. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -211,7 +211,7 @@ You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_char You can change the inner radius of doughnut chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from 0% to 100%. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -246,7 +246,7 @@ You can explode a doughnut segment by enabling the [`explode`](https://pub.dev/d * [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeOffset.html) - specifies the offset of exploded slice. The value ranges from 0% to 100%. * [`explodeGesture`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeGesture.html) - gesture for activating the explode. Explode can be activated in single tap, double tap, and long press. The available gesture types are [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), and [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). The default value is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). -{% highlight dart %} +{% highlight dart hl_lines="13 14" %} @override Widget build(BuildContext context) { @@ -279,7 +279,7 @@ You can explode a doughnut segment by enabling the [`explode`](https://pub.dev/d Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeAll.html) property of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html), you can explode all the doughnut segments. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -312,7 +312,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) allows you to render all the data points or segments in semi-pie, quarter-pie, or in any sector using the [`startAngle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/startAngle.html) and [`endAngle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/endAngle.html) properties. -{% highlight dart %} +{% highlight dart hl_lines="13 15" %} @override Widget build(BuildContext context) { @@ -325,8 +325,10 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - startAngle: 270, // Starting angle of doughnut - endAngle: 90 // Ending angle of doughnut + // Starting angle of doughnut + startAngle: 270, + // Ending angle of doughnut + endAngle: 90 ) ] ) @@ -344,7 +346,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts The small segments in the doughnut chart can be grouped into **others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is used to specify the grouping type based on the actual data point value or by points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as **Others** in legend and toggled as any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is null, and the default value of [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html). -{% highlight dart %} +{% highlight dart hl_lines="13 14" %} @override Widget build(BuildContext context) { diff --git a/Flutter/circular-charts/chart-types/pie-chart.md b/Flutter/circular-charts/chart-types/pie-chart.md index c0dd70c16..3ef184f98 100644 --- a/Flutter/circular-charts/chart-types/pie-chart.md +++ b/Flutter/circular-charts/chart-types/pie-chart.md @@ -65,9 +65,9 @@ To render a pie chart, create an instance of [`PieSeries`](https://pub.dev/docum ## Changing pie size -You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the pie chart with respect to the plot area. The default value is 80%. +You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the pie chart with respect to the plot area. The default value is `80%`. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -102,7 +102,7 @@ You can explode a pie segment by enabling the [`explode`](https://pub.dev/docume * [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeOffset.html) - specifies the offset of exploded slice. The value ranges from 0% to 100%. * [`explodeGesture`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeGesture.html) - gesture for activating the explode. Explode can be activated in single tap, double tap, and long press. The available gesture types are [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html), and [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html) and the default value is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html). -{% highlight dart %} +{% highlight dart hl_lines="13 15" %} @override Widget build(BuildContext context) { @@ -135,7 +135,7 @@ You can explode a pie segment by enabling the [`explode`](https://pub.dev/docume Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/explodeAll.html) property of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html), you can explode all the pie segments. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -167,7 +167,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) allows you to render all the data points or segments in semi-pie, quarter-pie, or in any sector using the [`startAngle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/startAngle.html) and [`endAngle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/endAngle.html) properties. -{% highlight dart %} +{% highlight dart hl_lines="13 15" %} @override Widget build(BuildContext context) { @@ -180,8 +180,10 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - startAngle: 270, // starting angle of pie - endAngle: 90 // ending angle of pie + // starting angle of pie + startAngle: 270, + // ending angle of pie + endAngle: 90 ) ] ) @@ -198,7 +200,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts The small segments in the pie chart can be grouped into **others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property specifies the grouping type based on the actual data point value or by points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property sets the limit to group data points into a single slice. The grouped segment is labeled as **Others** in legend and toggled as any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is null, and the default value of [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html). -{% highlight dart %} +{% highlight dart hl_lines="12 14" %} @override Widget build(BuildContext context) { diff --git a/Flutter/circular-charts/chart-types/radial-bar-chart.md b/Flutter/circular-charts/chart-types/radial-bar-chart.md index 80c74a1a2..1f1d8aeeb 100644 --- a/Flutter/circular-charts/chart-types/radial-bar-chart.md +++ b/Flutter/circular-charts/chart-types/radial-bar-chart.md @@ -33,6 +33,12 @@ The radial bar chart is used for showing the comparisons among the categories us @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('David', 25), + ChartData('Steve', 38), + ChartData('Jack', 34), + ChartData('Others', 52) + ]; return Scaffold( body: Center( child: Container( @@ -50,6 +56,11 @@ The radial bar chart is used for showing the comparisons among the categories us ) ); } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double y; + } {% endhighlight %} @@ -59,7 +70,7 @@ The radial bar chart is used for showing the comparisons among the categories us You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the radial bar chart with respect to the plot area. The default value is 80%. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -91,7 +102,7 @@ You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_char You can change the inner radius of radial bar chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from 0% to 100%. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -120,7 +131,7 @@ You can change the inner radius of radial bar chart using the [`innerRadius`](ht The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/cornerStyle.html) property specifies the corner type for radial bar chart. The corners can be customized using the [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), [`CornerStyle.bothCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), [`CornerStyle.startCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html), and [`CornerStyle.endCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html) options. The default value of this property is [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html). -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { @@ -164,7 +175,7 @@ Data labels can be enabled using the [`isVisible`](https://pub.dev/documentation * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - changes the stroke color of the data label shape. * [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) - uses the series color for filling the data label shape. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { diff --git a/Flutter/circular-charts/circular-series-customization.md b/Flutter/circular-charts/circular-series-customization.md index e578a7665..cdbfcaaec 100644 --- a/Flutter/circular-charts/circular-series-customization.md +++ b/Flutter/circular-charts/circular-series-customization.md @@ -13,7 +13,7 @@ documentation: ug [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-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/CircularSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -39,11 +39,11 @@ documentation: ug {% endhighlight %} -## Animation delay +### Animation delay The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/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/CircularSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { @@ -78,6 +78,11 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l {% endhighlight %} +### Dynamic animation + +[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) also provide the dynamic animation support for the series. The series can be dynamically added to the charts, it will animated by setting the timer value. when you set the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/animationDuration.html) value to 0, the series won't be animated. + + ## Color Palette [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides support for color palette property called [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/palette.html) for the data points in the chart series. If the series color is not specified, then the series will be rendered with appropriate palette color. Ten colors are available by default. @@ -119,25 +124,25 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts @override Widget build(BuildContext context) { - static List chartData = [ - SalesData('Rent', 1000,Colors.teal), - SalesData('Food', 2500,Colors.lightBlue), - SalesData('Savings', 760,Colors.brown), - SalesData('Tax', 1897,Colors.grey), - SalesData('Others', 2987,Colors.blueGrey) + static List chartData = [ + ChartData('Rent', 1000,Colors.teal), + ChartData('Food', 2500,Colors.lightBlue), + ChartData('Savings', 760,Colors.brown), + ChartData('Tax', 1897,Colors.grey), + ChartData('Others', 2987,Colors.blueGrey) ]; return Scaffold( body: Center( child: Container( child: SfCircularChart( primaryXAxis: CategoryAxis(), - series: >[ - PieSeries( + series: >[ + PieSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, //map Color for each dataPoint datasource. - pointColorMapper: (SalesData sales,_) => sales.color, + pointColorMapper: (ChartData data,_) => data.color, ) ] ) @@ -189,11 +194,11 @@ The data points of pie, doughnut and radial bar charts can be filled with three return Gradient.linear(chartShaderDetails.outerRect.topRight, chartShaderDetails.outerRect.centerLeft, colors, stops); }, - series: >[ - PieSeries<_SalesData, String>( + series: >[ + PieSeries<_ChartData, String>( dataSource: chartData, - xValueMapper: (_SalesData sales, _) => sales.year, - xValueMapper: (_SalesData sales, _) => sales.year, + xValueMapper: (_ChartData data, _) => data.x, + xValueMapper: (_ChartData data, _) => data.x, ) ] )); @@ -222,14 +227,15 @@ The data points of pie, doughnut and radial bar charts can be filled with three _resolveTransform(chartShaderDetails.outerRect, TextDirection.ltr) ); }, - series: >[ - RadialBarSeries<_SalesData, String>( + series: >[ + RadialBarSeries<_ChartData, String>( dataSource: chartData, - xValueMapper: (_SalesData sales, _) => sales.year, - xValueMapper: (_SalesData sales, _) => sales.year, + xValueMapper: (_ChartData data, _) => data.x, + xValueMapper: (_ChartData data, _) => data.x, ) ] - )); + ) + ); } // Rotate the sweep gradient according to the start angle @@ -261,11 +267,11 @@ The data points of pie, doughnut and radial bar charts can be filled with three stops ); }, - series: >[ - DoughnutSeries<_SalesData, String>( + series: >[ + DoughnutSeries<_ChartData, String>( dataSource: chartData, - xValueMapper: (_SalesData sales, _) => sales.year, - xValueMapper: (_SalesData sales, _) => sales.year, + xValueMapper: (_ChartData data, _) => data.x, + xValueMapper: (_ChartData data, _) => data.x, ) ] )); @@ -311,11 +317,11 @@ The data points of pie, doughnut and radial bar charts can also be filled with i Matrix4.identity().scaled(0.4).storage ); }, - series: >[ - PieSeries<_SalesData, String>( + series: >[ + PieSeries<_ChartData, String>( dataSource: chartData, - xValueMapper: (_SalesData sales, _) => sales.year, - xValueMapper: (_SalesData sales, _) => sales.year, + xValueMapper: (_ChartData data, _) => data.x, + xValueMapper: (_ChartData data, _) => data.x, ) ] )); @@ -325,6 +331,12 @@ The data points of pie, doughnut and radial bar charts can also be filled with i ![Image shader](images/circular-customization/pie_imageshader.jpg) +#### See Also + +* [Fill the Flutter Pie Chart with gradient](https://www.syncfusion.com/kb/12558/how-to-fill-the-flutter-pie-chart-with-gradient-sfcircularchart). + +* [Fill the Flutter Pie Chart with desired images](https://www.syncfusion.com/kb/12533/how-to-fill-the-flutter-pie-chart-with-desired-images-sfcircularchart). + ## Shader mapping for data points The [`pointShaderMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/pointShaderMapper.html) property is used to map the shader field from the chart data source. You can map different [`gradient`](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) types and [`ImageShader`](https://api.flutter.dev/flutter/dart-ui/ImageShader-class.html) for individual data points using this mapper callback. @@ -461,13 +473,9 @@ The [`pointShaderMapper`](https://pub.dev/documentation/syncfusion_flutter_chart class _ChartShaderData { _ChartShaderData(this.x, this.y, this.text, this.shader); - final String x; - final num y; - final String text; - final Shader shader; } @@ -485,20 +493,20 @@ The [`pointRenderMode`](https://pub.dev/documentation/syncfusion_flutter_charts/ >**Note**: This property is applicable only if the [`onCreateShader`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onCreateShader.html) and [`pointShaderMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/pointShaderMapper.html) are null. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { getImage(); return Container( child: SfCircularChart( - series: >[ - PieSeries<_SalesData, String>( + series: >[ + PieSeries<_ChartData, String>( dataSource: chartData, // Sweep gradient will be formed with default palette colors. pointRenderMode: PointRenderMode.gradient, - xValueMapper: (_SalesData sales, _) => sales.year, - xValueMapper: (_SalesData sales, _) => sales.year, + xValueMapper: (_ChartData data, _) => data.x, + xValueMapper: (_ChartData data, _) => data.x, ) ] ) @@ -509,10 +517,6 @@ The [`pointRenderMode`](https://pub.dev/documentation/syncfusion_flutter_charts/ ![Image pointshadermapper](images/circular-customization/pie_rendermode.jpg) -## Dynamic animation - -[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) also provide the dynamic animation support for the series. The series can be dynamically added to the charts, it will animated by setting the timer value. when you set the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/animationDuration.html) value to 0, the series won't be animated. - ## Empty points @@ -632,4 +636,4 @@ The chart’s data source can be sorted using the [`sortingOrder`](https://pub.d #### See Also -* [Creating a circular drilldown chart using SfCircular charts](https://www.syncfusion.com/kb/11640/how-to-drilldown-with-syncfusion-flutter-chart-widget-sfcircularchart) +* [Creating a circular drilldown chart using SfCircular charts](https://www.syncfusion.com/kb/11640/how-to-drilldown-with-syncfusion-flutter-chart-widget-sfcircularchart). diff --git a/Flutter/circular-charts/datalabel.md b/Flutter/circular-charts/datalabel.md index 6d16cac9d..af0bce6d4 100644 --- a/Flutter/circular-charts/datalabel.md +++ b/Flutter/circular-charts/datalabel.md @@ -107,7 +107,7 @@ The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/l The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the circular 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 circular chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html) the series. -{% highlight dart %} +{% highlight dart hl_lines="15" %} @override Widget build(BuildContext context) { @@ -156,7 +156,7 @@ When the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutt >**Note**: The smart label positioning is applicable only for the pie and doughnut series. -{% highlight dart %} +{% highlight dart hl_lines="35" %} @override Widget build(BuildContext context) { @@ -215,7 +215,7 @@ When the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutt The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) property is used to apply the series color to background color of the data labels. The default value of this property is `false`. -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { @@ -256,7 +256,7 @@ This feature is used to connect label and data point using a line. It is applica * [`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). -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -384,14 +384,14 @@ You can customize the appearance of the data label with your own template using Data label and its connector line in the Circular charts for the point value 0 can be hidden using the [`showZeroValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showZeroValue.html) property. This defaults to `true`. -{% highlight dart %} +{% highlight dart hl_lines="21" %} - final List chartData = [ - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('March', 0), - SalesData('April', 32), - SalesData('May', 40) + final List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('March', 0), + ChartData('April', 32), + ChartData('May', 40) ]; @override @@ -400,11 +400,11 @@ Data label and its connector line in the Circular charts for the point value 0 c body: Center( child: Container( child:SfCircularChart( - series: >[ - PieSeries( + series: >[ + PieSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.xValue, - yValueMapper: (SalesData sales, _) => sales.yValue, + xValueMapper: (ChartData data, _) => data.xValue, + yValueMapper: (ChartData data, _) => data.yValue, dataLabelSettings: DataLabelSettings( showZeroValue : false, isVisible: true @@ -435,7 +435,7 @@ Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutt >**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. -{% highlight dart %} +{% highlight dart hl_lines="8" %} Widget build(BuildContext context) { return Container( @@ -451,5 +451,6 @@ Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutt ) ); } + {% endhighlight %} ![dataLabel_overflow](images/datalabel/circular_overflow.jpg) diff --git a/Flutter/circular-charts/getting-started.md b/Flutter/circular-charts/getting-started.md index a41a1e9a9..2bce43ad6 100644 --- a/Flutter/circular-charts/getting-started.md +++ b/Flutter/circular-charts/getting-started.md @@ -27,7 +27,6 @@ Add the Syncfusion [Flutter Chart](https://www.syncfusion.com/flutter-widgets/fl {% highlight dart %} dependencies: - syncfusion_flutter_charts: ^xx.x.xx {% endhighlight %} @@ -58,7 +57,7 @@ Import the following package in your Dart code. Once the package has been imported, initialize the chart as a child of any widget. SfCircularChart can be used to render pie, doughnut and radial bar charts. Here, as we are rendering pie chart, initialize SfCircularChart widget as a child of Container widget. -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -121,7 +120,7 @@ Based on your data, initialize the series type. In the series, you need to map t You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -162,7 +161,7 @@ You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/ You can add data labels to improve the readability of the chart using the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/dataLabelSettings.html) property. -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -172,17 +171,17 @@ You can add data labels to improve the readability of the chart using the [`data child: SfCircularChart( series: [ // Initialize line series - PieSeries( + PieSeries( dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, // Render the data label dataLabelSettings:DataLabelSettings(isVisible : true) ) @@ -203,7 +202,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). -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -215,18 +214,18 @@ You can use legend in chart by setting the [`isVisible`](https://pub.dev/documen legend: Legend(isVisible: true), series: [ // Initialize line series - PieSeries( + PieSeries( dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, - name: 'Sales' + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + name: 'Data' ) ] ) @@ -245,7 +244,8 @@ The tooltip is used when you cannot display information using the data labels du The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for all the series whereas the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property in series is used to toggle the tooltip visibility of each series. The tooltip can be enabled as demonstrated in the following code snippet. -{% highlight dart %} +{% highlight dart hl_lines="5" %} + late TooltipBehavior _tooltipBehavior; @@ -267,19 +267,19 @@ The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/ tooltipBehavior: _tooltipBehavior, series: [ // Initialize line series - PieSeries( + PieSeries( // Enables the tooltip for individual series enableTooltip: true, dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ] ) diff --git a/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.jpg b/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.jpg new file mode 100644 index 000000000..3ba78fc55 Binary files /dev/null and b/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.jpg differ diff --git a/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.png b/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.png deleted file mode 100644 index 2fc169f3f..000000000 Binary files a/Flutter/circular-charts/images/rtl-support/circular_legend_rtl.png and /dev/null differ diff --git a/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.jpg b/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.jpg new file mode 100644 index 000000000..ccafb3ee1 Binary files /dev/null and b/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.jpg differ diff --git a/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.png b/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.png deleted file mode 100644 index c18f15068..000000000 Binary files a/Flutter/circular-charts/images/rtl-support/circular_tooltip_rtl.png and /dev/null differ diff --git a/Flutter/circular-charts/legend.md b/Flutter/circular-charts/legend.md index 18983dc86..e8bc40531 100644 --- a/Flutter/circular-charts/legend.md +++ b/Flutter/circular-charts/legend.md @@ -11,10 +11,15 @@ documentation: ug The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) contains list of data points in chart. The information provided in each legend item helps to identify the corresponding data points in chart. -{% highlight dart %} +{% highlight dart hl_lines="13" %} @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('USA', 20), + ChartData('China', 35), + ChartData('UK', 38), + ]; return Scaffold( body: Center( child: Container( @@ -33,6 +38,11 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ) ); } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} @@ -142,7 +152,7 @@ The following properties can be used to define and customize the [`title`](https You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -174,7 +184,7 @@ You can control the visibility of the series by tapping the legend item. You can The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) is used to toggle the visibility of legend. -{% highlight dart %} +{% highlight dart hl_lines="9" %} @override Widget build(BuildContext context) { @@ -205,7 +215,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest 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). -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -243,7 +253,7 @@ You can change the position of the legend inside the chart. The following proper * [`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 this to [`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). -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -278,7 +288,7 @@ You can change the position of the legend inside the chart. The following proper 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. Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -295,7 +305,11 @@ Also, the legend will not take a dedicated position for it and will be drawn on dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y), - ])))); + ] + ) + ) + ) + ); } class ChartData { diff --git a/Flutter/circular-charts/right-to-left.md b/Flutter/circular-charts/right-to-left.md index 1efe588df..8b5bcd8de 100644 --- a/Flutter/circular-charts/right-to-left.md +++ b/Flutter/circular-charts/right-to-left.md @@ -9,28 +9,28 @@ documentation: ug # Right To Left (RTL) in Flutter Circular Chart (SfCircularChart) -Circular chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed. +Circular 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. -## RLT rendering ways +## RTL rendering ways Right to left rendering can be switched in the following ways: ### Wrapping the SfCircularChart with Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-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-class.html). +To change the rendering direction from right to left, you can wrap the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-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). -{% highlight dart %} +{% highlight dart hl_lines="5" %} @override Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfCircularChart( - //... - ), - ), - ); + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCircularChart( + //... + ), + ), + ); } {% endhighlight %} @@ -41,56 +41,127 @@ To change the chart rendering direction from right to left, you can change the [ {% highlight dart %} + /// Package import + import 'package:flutter_localizations/flutter_localizations.dart'; + import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + + // ... + @override Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale('en'), - Locale('ar'), - // ... other locales the app supports - ], - locale: Locale('ar'), - home: Scaffold( - body: SfCircularChart( - //... - ), - ) - ); + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + Locale('en'), + Locale('ar'), + // ... other locales the app supports + ], + locale: Locale('ar'), + home: Scaffold( + body: SfCircularChart( + //... + ), + ) + ); } - {% endhighlight %} ## RTL supported chart elements -Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction. +### 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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCircularChart( + legend: Legend( + isVisible: true + ), + series: >[ + PieSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } + +{% endhighlight %} + +![Legend RTL](images/rtl-support/circular_legend_rtl.jpg) -![legend RTL](images/rtl-support/circular_legend_rtl.png) +### Tooltip -In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `point.y : point.x`. By default, the tooltip format will be `point.x : point.y`. +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`. 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/SfCircularChart/onTooltipRender.html) callback. {% highlight dart %} - + late TooltipBehavior _tooltipBehavior; @override void initState(){ - _tooltipBehavior = TooltipBehavior( - enable: true, - format: “point.y : point.x” - ); + _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } - SfCircularChart( - tooltipBehavior: _tooltipBehavior, - //... - ) + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCircularChart( + tooltipBehavior = _tooltipBehavior; + series: >[ + PieSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ] + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } {% endhighlight %} -![Tooltip RTL](images/rtl-support/circular_tooltip_rtl.png) \ No newline at end of file +![Tooltip RTL](images/rtl-support/circular_tooltip_rtl.jpg) diff --git a/Flutter/circular-charts/selection.md b/Flutter/circular-charts/selection.md index 0215de39c..e64cace5b 100644 --- a/Flutter/circular-charts/selection.md +++ b/Flutter/circular-charts/selection.md @@ -11,7 +11,7 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late SelectionBehavior _selectionBehavior; @@ -99,7 +99,7 @@ You can customize the segments using the below properties. Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/enableMultiSelection.html) property of chart. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -125,7 +125,7 @@ You can decide, whether to deselect the selected data point/series or remain sel This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. -{% highlight dart %} +{% highlight dart hl_lines="7" %} late SelectionBehavior _selectionBehavior; @@ -134,7 +134,7 @@ Defaults to `true`. _selectionBehavior = SelectionBehavior( enable: true, toggleSelection: false, - ); + ); super.initState(); } diff --git a/Flutter/circular-charts/tooltip.md b/Flutter/circular-charts/tooltip.md index 58638e158..a205dc856 100644 --- a/Flutter/circular-charts/tooltip.md +++ b/Flutter/circular-charts/tooltip.md @@ -13,14 +13,13 @@ Chart provides tooltip support for all the series. It is used to show informatio 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. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late TooltipBehavior _tooltipBehavior; @override void initState(){ - _tooltipBehavior = TooltipBehavior( - enable: true); + _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } @@ -108,7 +107,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom * Y value - `point.y` * Name of the series - `series.name` -{% highlight dart %} +{% highlight dart hl_lines="8" %} late TooltipBehavior _tooltipBehavior; @@ -141,7 +140,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom 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). -{% highlight dart %} +{% highlight dart hl_lines="7" %} late TooltipBehavior _tooltipBehavior; @@ -224,7 +223,7 @@ The ActivationMode enum contains the following values: * [`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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} late TooltipBehavior _tooltipBehavior; diff --git a/Flutter/datagrid/editing.md b/Flutter/datagrid/editing.md index 073b2fdb6..883b264d4 100644 --- a/Flutter/datagrid/editing.md +++ b/Flutter/datagrid/editing.md @@ -564,6 +564,90 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} +## How to check whether the current cell is in editing mode + +You can check whether the current cell is in editing mode or not by using the `DataGridController.isCurrentCellInEditing` property. + +{% tabs %} +{% highlight dart %} + + final DataGridController _dataGridController = DataGridController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('SfDataGrid Editing'), + ), + body: Column( + children: [ + TextButton( + onPressed: () { + showDialog( + context: context, + builder: (context) => AlertDialog( + content: Text( + 'Cell is in Edit Mode: ${_dataGridController.isCurrentCellInEditing}'), + )); + }, + child: const Text('In Edit Mode')), + Expanded( + child: SfDataGrid( + source: _employeeDataSource, + allowEditing: true, + controller: _dataGridController, + selectionMode: SelectionMode.single, + navigationMode: GridNavigationMode.cell, + columnWidthMode: ColumnWidthMode.fitByCellValue, + editingGestureType: EditingGestureType.tap, + columns: [ + GridColumn( + columnName: 'id', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'ID', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'name', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Name', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'designation', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Designation', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'salary', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Salary', + overflow: TextOverflow.ellipsis, + ))) + ], + ), + ), + ], + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ## Restrict specific cell or column from being entered into edit mode at run time In order to cancel the editing for specific cell or column at run time, you can override the [onCellBeginEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellBeginEdit.html) method in `DataGridSource` class and return false for specific cell or column. diff --git a/Flutter/datagrid/images/sorting/flutter-datagrid-custom-sort-icon.png b/Flutter/datagrid/images/sorting/flutter-datagrid-custom-sort-icon.png new file mode 100644 index 000000000..a9a3daf27 Binary files /dev/null and b/Flutter/datagrid/images/sorting/flutter-datagrid-custom-sort-icon.png differ diff --git a/Flutter/datagrid/localization.md b/Flutter/datagrid/localization.md index 378c43aba..350eb7134 100644 --- a/Flutter/datagrid/localization.md +++ b/Flutter/datagrid/localization.md @@ -11,8 +11,6 @@ documentation: ug By default, the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) widget supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. -As of February 2020, [flutter package](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) supports 77 languages. - To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file. {% highlight dart %} diff --git a/Flutter/datagrid/sorting.md b/Flutter/datagrid/sorting.md index ca55f0759..0d475608b 100644 --- a/Flutter/datagrid/sorting.md +++ b/Flutter/datagrid/sorting.md @@ -473,6 +473,89 @@ Widget build(BuildContext context) { ![flutter datagrid shows customized the sort icon color](images/sorting/flutter-datagrid-customized-sorticon-color.png) +## Set a custom sorting icon + +`SfDataGrid` allows you to change the sort icon by using the `SfDataGridThemeData.sortIcon` property. The DataGrid should be wrapped inside the `SfDataGridTheme`. + +The `SfDataGridThemeData` and `SfDataGridTheme` classes are available in [syncfusion_flutter_core](https://pub.dev/packages/syncfusion_flutter_core) package. So, import the following file. + +{% tabs %} +{% highlight Dart %} + +import 'package:syncfusion_flutter_core/theme.dart'; + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight Dart %} + +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_datagrid/datagrid.dart'; + +@override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + leading: const BackButton(), + title: const Text('Syncfusion Flutter DataGrid'), + ), + body: SfDataGridTheme( + data: + SfDataGridThemeData(sortIcon: const Icon(Icons.arrow_circle_up)), + child: SfDataGrid( + source: _employeeDataSource, + allowSorting: true, + selectionMode: SelectionMode.multiple, + navigationMode: GridNavigationMode.cell, + columnWidthMode: ColumnWidthMode.fill, + columns: [ + GridColumn( + columnName: 'id', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'ID', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'name', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Name', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'designation', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Designation', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'salary', + label: Container( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + alignment: Alignment.center, + child: const Text( + 'Salary', + overflow: TextOverflow.ellipsis, + ))), + ]), + )); + } + + +{% endhighlight %} +{% endtabs %} + +![flutter datagrid shows custom the sort icon](images/sorting/flutter-datagrid-custom-sort-icon.png) + ## Custom sorting The datagrid allows to sort columns based on custom logic. For each column, you can provide different sorting criteria by overriding the following methods from [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html), diff --git a/Flutter/funnel-chart/accessibility.md b/Flutter/funnel-chart/accessibility.md index a2f020d6b..527616c52 100644 --- a/Flutter/funnel-chart/accessibility.md +++ b/Flutter/funnel-chart/accessibility.md @@ -34,7 +34,7 @@ The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/la ## Easily tappable targets -The `SfFunnelChart` Provides callback support to notify when tapping on the essential elements in the chart. +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 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 b30655c45..53f7cadf0 100644 --- a/Flutter/funnel-chart/callbacks.md +++ b/Flutter/funnel-chart/callbacks.md @@ -211,8 +211,8 @@ Triggers when tapping on the data label of the data point in the series. The [`o }, series: FunnelSeries( dataSource: sample, - xValueMapper: (Sample sales, _) => sales.x, - yValueMapper: (Sample sales, _) => sales.y, + xValueMapper: (Sample data, _) => data.x, + yValueMapper: (Sample data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true), ) diff --git a/Flutter/funnel-chart/chart-appearance.md b/Flutter/funnel-chart/chart-appearance.md index efc1c6a34..ff3768514 100644 --- a/Flutter/funnel-chart/chart-appearance.md +++ b/Flutter/funnel-chart/chart-appearance.md @@ -13,7 +13,7 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="13 14" %} @override Widget build(BuildContext context) { @@ -36,10 +36,17 @@ 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. -{% highlight dart %} +{% highlight dart hl_lines="9" %} @override Widget build(BuildContext context) { + List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: SafeArea( child: Center( @@ -51,6 +58,11 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume borderWidth: 2, // Sets 15 logical pixels as margin for all the 4 sides. margin: EdgeInsets.all(15) + ), + series: FunnelSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, ) ) ) @@ -60,6 +72,9 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume {% endhighlight %} +![margin](images\chart-title\chart_margin.png) + + ## Chart area customization You can customize the area of the chart using the below properties. @@ -78,8 +93,15 @@ You can customize the area of the chart using the below properties. height: 300, width: 350, child: SfFunnelChart( + borderColor: Colors.red, + borderWidth: 2, + margin: EdgeInsets.all(15), backgroundColor: Colors.lightGreen, - backgroundImage: 'images/livechart.png', + backgroundImage: const AssetImage('images/train.png'), + series: FunnelSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, ) ) ) @@ -88,3 +110,5 @@ You can customize the area of the chart using the below properties. } {% endhighlight %} + +![margin](images\chart-title\background_image.png) diff --git a/Flutter/funnel-chart/chart-title.md b/Flutter/funnel-chart/chart-title.md index a25e34827..96d6e4bc8 100644 --- a/Flutter/funnel-chart/chart-title.md +++ b/Flutter/funnel-chart/chart-title.md @@ -49,17 +49,17 @@ You can align the title text content horizontally to the near, center or far of ) ), // Initialize category axis - series: FunnelSeries( + series: FunnelSeries( dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) diff --git a/Flutter/funnel-chart/datalabel.md b/Flutter/funnel-chart/datalabel.md index 9109104a2..6cd312de6 100644 --- a/Flutter/funnel-chart/datalabel.md +++ b/Flutter/funnel-chart/datalabel.md @@ -27,19 +27,25 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// * [`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. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { + List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - pointColorMapper: (SalesData data, _) => data.color, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( // Renders the data label isVisible: true @@ -50,6 +56,11 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// ) ); } + class ChartData{ + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} @@ -61,7 +72,7 @@ The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/l 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. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -69,10 +80,10 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, // Positioning the data label @@ -95,7 +106,7 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) property is used to apply the series color to background color of the data labels. The default value of this property is `false`. -{% highlight dart %} +{% highlight dart hl_lines="16" %} @override Widget build(BuildContext context) { @@ -103,10 +114,10 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, // Positioning the data label @@ -129,23 +140,23 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l Data label and its connector line in the Funnel charts for the point value 0 can be hidden using the [`showZeroValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showZeroValue.html) property. This defaults to `true`. -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { return Scaffold( body: Center( child:SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: [ - SalesData(11, 35), - SalesData(12, 28), - SalesData(13, 0), - SalesData(14, 32), - SalesData(15, 40) + ChartData(11, 35), + ChartData(12, 28), + ChartData(13, 0), + ChartData(14, 32), + ChartData(15, 40) ], - xValueMapper: (SalesData sales, _) => sales.xValue, - yValueMapper: (SalesData sales, _) => sales.yValue, + xValueMapper: (ChartData data, _) => data.xValue, + yValueMapper: (ChartData data, _) => data.yValue, dataLabelSettings: DataLabelSettings( showZeroValue: false, isVisible: true @@ -171,14 +182,14 @@ Action on data labels when it’s overflowing from its region area. The overflow Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html). -N> This is applicable for pie, doughnut, pyramid, and funnel series types alone. +>**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. -{% highlight dart %} +{% highlight dart hl_lines="7" %} Widget build(BuildContext context) { return Container( child: SfFunnelChart( - series: PieSeries( + series: FunnelSeries( dataLabelSettings: DataLabelSettings( isVisible: true, overflowMode: OverflowMode.trim diff --git a/Flutter/funnel-chart/funnel-customization.md b/Flutter/funnel-chart/funnel-customization.md index 9cfd45763..ebe76fcce 100644 --- a/Flutter/funnel-chart/funnel-customization.md +++ b/Flutter/funnel-chart/funnel-customization.md @@ -42,10 +42,9 @@ To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev } class ChartData { - ChartData(this.x, this.y, [this.color]); + ChartData(this.x, this.y); final String x; final double y; - final Color color; } {% endhighlight %} @@ -67,6 +66,16 @@ You can modify the size of funnel series using the [`height`](https://pub.dev/do series: FunnelSeries( height: '50%', width: '50%', + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -93,6 +102,16 @@ You can modify the neck size of funnel series using the [`neckHeight`](https://p series: FunnelSeries( neckHeight: '40%', neckWidth: '10%', + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -118,6 +137,16 @@ You can control the gap between the two segments using the [`gapRatio`](https:// child: SfFunnelChart( series: FunnelSeries( gapRatio: 0.1, + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -147,6 +176,16 @@ Also, the segments can be exploded by tapping the segment. explode: true, explodeOffset: '5%', explodeIndex: 2, + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -158,37 +197,6 @@ Also, the segments can be exploded by tapping the segment. ![Explode](images/funnel-charts/funnel_explode.jpg) -## Smart data labels - -The [`smartLabelMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/smartLabelMode.html) property is used to place the data labels smartly. The [`smartLabelMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/smartLabelMode.html) supports the following values: - -* [`SmartLabelMode.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - shifts the data label position when a label intersects with other label. -* [`SmartLabelMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - renders all the data labels when intersect. -* [`SmartLabelMode.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - hides the intersecting data label, and it is the default value. - -{% highlight dart %} - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfFunnelChart( - smartLabelMode: SmartLabelMode.shift, - series: FunnelSeries( - dataLabelSettings: DataLabelSettings( - isVisible: true, - labelPosition: ChartDataLabelPosition.inside - ), - ) - ) - ) - ) - ); - } - -{% endhighlight %} - ## Applying palette color The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/palette.html) property is used to define colors for the series available in chart. By default, a set of 10 colors is predefined for applying it to the series. If the colors specified in the series are less than the number of series, then the remaining series will be filled with the specified palette colors rotationally. @@ -205,7 +213,12 @@ The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c Colors.teal, Colors.orange, Colors.brown - ] + ], + series: FunnelSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) ) ) ) diff --git a/Flutter/funnel-chart/getting-started.md b/Flutter/funnel-chart/getting-started.md index d3dddf3ba..32d22b763 100644 --- a/Flutter/funnel-chart/getting-started.md +++ b/Flutter/funnel-chart/getting-started.md @@ -27,7 +27,6 @@ Add the Syncfusion [Flutter Chart](https://www.syncfusion.com/flutter-widgets/fl {% highlight dart %} dependencies: - syncfusion_flutter_charts: ^xx.x.xx {% endhighlight %} @@ -58,7 +57,7 @@ Import the following package in your Dart code. Once the package has been imported, initialize the chart as a child of any widget. SfFunnelChart can be used to render Funnel charts. Here, as we are rendering Funnel chart, initialize SfFunnelChart widget as a child of Container widget. -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -107,10 +106,9 @@ Based on your data, initialize the series type. In the series, you need to map t } class ChartData { - ChartData(this.x, this.y, [this.color]); + ChartData(this.x, this.y); final String x; final double y; - final Color color; } {% endhighlight %} diff --git a/Flutter/funnel-chart/images/Funnel-customization/animation-delay.gif b/Flutter/funnel-chart/images/Funnel-customization/animation-delay.gif new file mode 100644 index 000000000..a5f7dda5e Binary files /dev/null and b/Flutter/funnel-chart/images/Funnel-customization/animation-delay.gif differ diff --git a/Flutter/funnel-chart/images/chart-title/background_image.png b/Flutter/funnel-chart/images/chart-title/background_image.png new file mode 100644 index 000000000..922025b4f Binary files /dev/null and b/Flutter/funnel-chart/images/chart-title/background_image.png differ diff --git a/Flutter/funnel-chart/images/chart-title/chart_margin.png b/Flutter/funnel-chart/images/chart-title/chart_margin.png new file mode 100644 index 000000000..b8c31ecec Binary files /dev/null and b/Flutter/funnel-chart/images/chart-title/chart_margin.png differ diff --git a/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.jpg b/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.jpg new file mode 100644 index 000000000..6b49d189d Binary files /dev/null and b/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.jpg differ diff --git a/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.png b/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.png deleted file mode 100644 index d9c57578f..000000000 Binary files a/Flutter/funnel-chart/images/rtl-support/funnel_legend_rtl.png and /dev/null differ diff --git a/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.jpg b/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.jpg new file mode 100644 index 000000000..4c5fe8e19 Binary files /dev/null and b/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.jpg differ diff --git a/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.png b/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.png deleted file mode 100644 index 736b35b3b..000000000 Binary files a/Flutter/funnel-chart/images/rtl-support/funnel_tooltip_rtl.png and /dev/null differ diff --git a/Flutter/funnel-chart/legend.md b/Flutter/funnel-chart/legend.md index 0e9b99dca..6ed2dd6e4 100644 --- a/Flutter/funnel-chart/legend.md +++ b/Flutter/funnel-chart/legend.md @@ -11,25 +11,37 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { + List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: Container( child: SfFunnelChart( legend: Legend(isVisible: true), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) ) ); } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double y; + } {% endhighlight %} @@ -63,10 +75,10 @@ The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char borderColor: Colors.black, borderWidth: 2 ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -110,10 +122,10 @@ The following properties can be used to define and customize the [`title`](https ) ), ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -129,7 +141,7 @@ The following properties can be used to define and customize the [`title`](https You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -142,10 +154,10 @@ You can control the visibility of the series by tapping the legend item. You can // Toogles the series visibility on tapping the legend item toggleSeriesVisibility: true ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -159,7 +171,7 @@ You can control the visibility of the series by tapping the legend item. You can The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) is used to toggle the visibility of legend. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -172,10 +184,10 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest // Visibility of legend isVisible: false ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -189,7 +201,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest 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). -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -203,10 +215,10 @@ The legend items can be placed in multiple rows or scroll can be enabled using t // Overflowing legend content will be wraped overflowMode: LegendItemOverflowMode.wrap ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -226,7 +238,7 @@ You can change the position of the legend inside the chart. The following proper * [`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). -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -240,10 +252,10 @@ You can change the position of the legend inside the chart. The following proper // Legend will be placed at the left position: LegendPosition.left ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -260,7 +272,7 @@ You can change the position of the legend inside the chart. The following proper 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. Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -272,7 +284,7 @@ Also, the legend will not take a dedicated position for it and will be drawn on isVisible: true, // Legend will placed at the specified offset offset: Offset(20, 40)), - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y), @@ -312,10 +324,10 @@ You can customize the appearance of legend items with your template by using [`l ); } ), - series: FunnelSeries( + series: FunnelSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) diff --git a/Flutter/funnel-chart/right-to-left.md b/Flutter/funnel-chart/right-to-left.md index eb988bc1c..ca582a43a 100644 --- a/Flutter/funnel-chart/right-to-left.md +++ b/Flutter/funnel-chart/right-to-left.md @@ -9,28 +9,28 @@ 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. Only, the legend rendering will be changed. +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. -## RLT rendering ways +## RTL rendering ways 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-class.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). -{% highlight dart %} +{% highlight dart hl_lines="5" %} @override Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfFunnelChart( - //... - ), - ), - ); + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfFunnelChart( + //... + ), + ), + ); } {% endhighlight %} @@ -41,48 +41,121 @@ To change the chart rendering direction from right to left, you can change the [ {% highlight dart %} + /// Package import + import 'package:flutter_localizations/flutter_localizations.dart'; + import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + + // ... + @override Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale('en'), - Locale('ar'), - // ... other locales the app supports - ], - locale: Locale('ar'), - home: Scaffold( - body: SfFunnelChart( - //... - ), - ) - ); + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + Locale('en'), + Locale('ar'), + // ... other locales the app supports + ], + locale: Locale('ar'), + home: Scaffold( + body: SfFunnelChart( + //... + ), + ) + ); } - {% endhighlight %} ## RTL supported chart elements -Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction. +### 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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfFunnelChart( + legend: Legend(isVisible: true), + series: FunnelSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } + +{% endhighlight %} -![legend RTL](images/rtl-support/funnel_legend_rtl.png) +![Legend RTL](images/rtl-support/funnel_legend_rtl.jpg) -In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `point.y : point.x`. By default, the tooltip format will be `point.x : point.y`. +### 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/SfFunnelChart/onTooltipRender.html) callback. {% highlight dart %} - SfFunnelChart( - tooltipBehavior: TooltipBehavior( - enable: true, - format: “point.y : point.x” + late TooltipBehavior _tooltipBehavior; + + @override + void initState(){ + _tooltipBehavior = TooltipBehavior(enable: true); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfFunnelChart( + tooltipBehavior = _tooltipBehavior; + series: FunnelSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ) ) - //... - ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } {% endhighlight %} -![Tooltip RTL](images/rtl-support/funnel_tooltip_rtl.png) \ No newline at end of file +![Tooltip RTL](images/rtl-support/funnel_tooltip_rtl.jpg) diff --git a/Flutter/funnel-chart/selection.md b/Flutter/funnel-chart/selection.md index 85a1eb2b9..8ae575891 100644 --- a/Flutter/funnel-chart/selection.md +++ b/Flutter/funnel-chart/selection.md @@ -30,10 +30,10 @@ The selection feature in chart let you to select a segment in a series or the se body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, selectionBehavior: _selectionBehavior ) ) @@ -78,10 +78,10 @@ You can customize the segments using the below properties. body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, selectionBehavior: _selectionBehavior ) ) @@ -166,7 +166,7 @@ Defaults to `true`. body: Center( child: Container( child: SfFunnelChart( - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData1, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, diff --git a/Flutter/funnel-chart/series-customization.md b/Flutter/funnel-chart/series-customization.md index 1518f7a82..d2be3dead 100644 --- a/Flutter/funnel-chart/series-customization.md +++ b/Flutter/funnel-chart/series-customization.md @@ -35,7 +35,7 @@ documentation: ug {% endhighlight %} -## Animation delay +### 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`. @@ -72,6 +72,8 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l {% endhighlight %} +![Animation delay](images/Funnel-customization/animation-delay.gif) + ## 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). @@ -152,12 +154,12 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts @override Widget build(BuildContext context) { - static dynamic chartData = [ - SalesData('Rent', 1000,Colors.teal), - SalesData('Food', 2500,Colors.lightBlue), - SalesData('Savings', 760,Colors.brown), - SalesData('Tax', 1897,Colors.grey), - SalesData('Others', 2987,Colors.blueGrey) + static dynamic chartData = [ + ChartData('Rent', 1000,Colors.teal), + ChartData('Food', 2500,Colors.lightBlue), + ChartData('Savings', 760,Colors.brown), + ChartData('Tax', 1897,Colors.grey), + ChartData('Others', 2987,Colors.blueGrey) ]; return Scaffold( body: Center( @@ -168,7 +170,7 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, //map Color for each dataPoint datasource. - pointColorMapper: (ChartData sales,_) => sales.color, + pointColorMapper: (ChartData data,_) => data.color, ) ) ) diff --git a/Flutter/funnel-chart/tooltip.md b/Flutter/funnel-chart/tooltip.md index 4180678ff..60db831af 100644 --- a/Flutter/funnel-chart/tooltip.md +++ b/Flutter/funnel-chart/tooltip.md @@ -25,21 +25,33 @@ The tooltip state will be preserved on the device's orientation change and on br @override Widget build(BuildContext context) { + List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: Container( child: SfFunnelChart( tooltipBehavior: _tooltipBehavior, - series: FunnelSeries( + series: FunnelSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) - ) + ) ) ) ); } + class ChartData{ + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} diff --git a/Flutter/globalization.md b/Flutter/globalization.md index 430a5bf46..c28efd52b 100644 --- a/Flutter/globalization.md +++ b/Flutter/globalization.md @@ -156,13 +156,12 @@ To accomplish this add to your pub spec file the [`syncfusion_localizations`](ht {% highlight dart %} dependencies: - syncfusion_flutter_calendar: ^xx.x.xx syncfusion_localizations: ^xx.x.xx {% endhighlight %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter`](https://pub.dev/publishers/syncfusion.com/packages ) widgets. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter`](https://pub.dev/publishers/syncfusion.com/packages ) widgets. To use the [`Syncfusion Localization`](https://pub.dev/packages/syncfusion_localizations) and [`Syncfusion Flutter Calendar`](https://pub.dev/packages/syncfusion_flutter_calendar) widgets, import the following libraries in your Dart code. @@ -173,7 +172,7 @@ To use the [`Syncfusion Localization`](https://pub.dev/packages/syncfusion_local {% endhighlight %} -After importing the required packages, initialize the [`calendar`](https://pub.dev/packages/syncfusion_flutter_calendar) widget as a child of any widget and specify `localizationsDelegates` and `supportedLocales` for the MaterialApp. +After importing the required packages, initialize the [`calendar`](https://pub.dev/packages/syncfusion_flutter_calendar) widget as a child of any widget and specify [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) and [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) for the MaterialApp. {% highlight dart %} @@ -215,9 +214,14 @@ And some languages may require more than language code to differentiate properly {% highlight dart %} supportedLocales: [ - const Locale.fromSubtags(languageCode: 'zh'), // generic Chinese 'zh' - const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // generic traditional Chinese 'zh_Hant' - const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'), // 'zh_Hant_TW' + // generic Chinese 'zh' + const Locale.fromSubtags(languageCode: 'zh'), + + // generic traditional Chinese 'zh_Hant' + const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), + + // 'zh_Hant_TW' + const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'), ], {% endhighlight %} @@ -233,9 +237,11 @@ If you wish to add your own custom culture apart from the supported 74 languages Create a dart file in your application and import the required packages. {% highlight dart %} + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_core/localizations.dart'; + {% endhighlight %} **Step 2** @@ -253,6 +259,8 @@ Create a dart file in your application and import the required packages. @override String get noSelectedDateCalendarLabel => 'Üritusi pole'; + + // other properties } {% endhighlight %} @@ -283,7 +291,7 @@ Create a delegate for the `Estonian` language. **Step 4** -Import the created dart file in your application and specify the `localizationsDelegates`, `supportedLocales` and `locale`. Then run your application. +Import the created dart file in your application and specify the [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) and [`locale`](https://api.flutter.dev/flutter/package-intl_locale/package-intl_locale-library.html). Then run your application. {% highlight dart %} diff --git a/Flutter/installation-and-upgrade/Download.md b/Flutter/installation-and-upgrade/Download.md index 81f652e10..16e5e7f9b 100644 --- a/Flutter/installation-and-upgrade/Download.md +++ b/Flutter/installation-and-upgrade/Download.md @@ -10,13 +10,9 @@ documentation: ug # Download Flutter Installer -The Syncfusion Flutter installer can be downloaded from the [Syncfusion](https://www.syncfusion.com/flutter-widgets) website. You can either download the licensed installer or try our trial installer depending on your license. +The Syncfusion Flutter installer can be downloaded from the [Syncfusion](https://www.syncfusion.com/flutter-widgets) website. - - Trial Installer - - Licensed Installer - - -## Download the Trial Version +## Download using trial login Our 30-day trial can be downloaded in two ways. @@ -27,18 +23,18 @@ Our 30-day trial can be downloaded in two ways. ### Download Free Trial Setup 1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Flutter platform. -2. After completing the required form or logging in with your registered Syncfusion account, you can download the Flutter trial installer from the confirmation page. (as shown in below screenshot.) +2. After completing the required form or logging in with your registered Syncfusion account, you can download the Flutter installer from the confirmation page. (as shown in below screenshot.) ![Trial and downloads of Syncfusion Essential Studio](download-images/trial-confirmation.png) -3. With a trial license, only the latest version’s trial installer can be downloaded. -4. After downloading, the Syncfusion Flutter trial installer can be unlocked using either the trial unlock key or the Syncfusion registered login credential. More information on generating an unlock key can be found in [this](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) article. -5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) +3. With a trial license, only the latest version’s installer can be downloaded. +4. After downloading, the Syncfusion Flutter installer can be unlocked using either the trial unlock key or the Syncfusion registered login credential. More information on generating an unlock key can be found in [this](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) article. +5. Before the trial expires, you can download the installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) 6. Click the Download (element 1 in the screenshot below) button to get the Syncfusion Essential Studio Flutter web installer. ![Trial and downloads of Syncfusion Essential Studio](download-images/trial-download.png) -7. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio Flutter Offline trial installer which is available in EXE and ZIP format. +7. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio Flutter Offline installer which is available in EXE and ZIP format. ![License and downloads of Syncfusion Essential Studio](download-images/start-trial-download-offline-installer.png) @@ -55,14 +51,14 @@ You should initiate an evaluation if you have already obtained our components th N> If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. -4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (as shown in below screenshot.) +4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (as shown in below screenshot.) ![License and downloads of Syncfusion Essential Studio](download-images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. -## Download the License Version +## Download using licensed login 1. Syncfusion licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion account. 2. You can view all the licenses (both active and expired) associated with your account. diff --git a/Flutter/installation-and-upgrade/Flutter-Mac-Installer.md b/Flutter/installation-and-upgrade/Flutter-Mac-Installer.md index 154f94f2b..6d0598c93 100644 --- a/Flutter/installation-and-upgrade/Flutter-Mac-Installer.md +++ b/Flutter/installation-and-upgrade/Flutter-Mac-Installer.md @@ -12,7 +12,7 @@ documentation: ug ## How to download Flutter Mac installer? -1. Essential Studio Flutter Mac installer can be downloaded from your account’s [download](https://help.syncfusion.com/common/essential-studio/download) section. You can download trial\licensed Mac installer based on your license. +1. Essential Studio Flutter Mac installer can be downloaded from your account’s [download](https://help.syncfusion.com/common/essential-studio/download) section. You can download Syncfusion Mac installer based on your license. 2. In the downloads page, click the "Mac" button and download the required Essential Studio Flutter Mac installer. diff --git a/Flutter/installation-and-upgrade/Install-using-the-Offline-Installer.md b/Flutter/installation-and-upgrade/Install-using-the-Offline-Installer.md index 663ce4dc6..251819bdb 100644 --- a/Flutter/installation-and-upgrade/Install-using-the-Offline-Installer.md +++ b/Flutter/installation-and-upgrade/Install-using-the-Offline-Installer.md @@ -10,7 +10,7 @@ documentation: ug # Installation using Offline Installer -You can refer to the [**Download**](https://help.syncfusion.com/flutter/installation-and-upgrade/download) section to learn how to get the WinUI trial or licensed installer. +You can refer to the [**Download**](https://help.syncfusion.com/flutter/installation-and-upgrade/download) section to learn how to get the Flutter installer. ## Installing with UI diff --git a/Flutter/installation-and-upgrade/Install-using-the-Web-Installer.md b/Flutter/installation-and-upgrade/Install-using-the-Web-Installer.md index ede08b67b..2347f3b66 100644 --- a/Flutter/installation-and-upgrade/Install-using-the-Web-Installer.md +++ b/Flutter/installation-and-upgrade/Install-using-the-Web-Installer.md @@ -10,7 +10,7 @@ documentation: ug # Installation using Web Installer -You can refer to the [**Download**](https://help.syncfusion.com/flutter/installation-and-upgrade/download) section to learn how to get the Flutter trial or licensed installer. +You can refer to the [**Download**](https://help.syncfusion.com/flutter/installation-and-upgrade/download) section to learn how to get the Flutter installer. ## Overview @@ -86,9 +86,7 @@ The steps below show how to install Essential Studio Flutter Web Installer. 9. The login wizard will appear. You must enter your Syncfusion email address and password. If you do not already have a Syncfusion account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. - ![Login wizard install](WebInstaller/Step-by-Step-Installation_img9.png) - - I> The products you have chosen will be installed based on your Syncfusion License (Trial or Licensed). + ![Login wizard install](WebInstaller/Step-by-Step-Installation_img9.png) 10. The download and installation\uninstallation progress will be displayed as shown below. @@ -170,9 +168,7 @@ N> If the **Syncfusion Essential Studio for Flutter {version}** entry is selecte 7. The login wizard will appear. You must enter your Syncfusion email address and password. If you do not already have a Syncfusion account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. - ![Login wizard install/uninstall](WebInstaller/Step-by-Step-Installation_img9.png) - - I> The products you have chosen will be installed based on your Syncfusion License (Trial or Licensed). + ![Login wizard install/uninstall](WebInstaller/Step-by-Step-Installation_img9.png) 8. The download, installation, and uninstallation progresses will be shown. diff --git a/Flutter/installation-and-upgrade/Upgrade.md b/Flutter/installation-and-upgrade/Upgrade.md index fa010cfb8..03b04fe09 100644 --- a/Flutter/installation-and-upgrade/Upgrade.md +++ b/Flutter/installation-and-upgrade/Upgrade.md @@ -30,8 +30,6 @@ It is not required to install the Volume release before installing the Service P ## Upgrade from trial version to license version -Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads) section of our website to upgrade from the trial version. - N> * The License key registration is no longer required for Flutter from version 18.3.0.x. So, there is no need to generate or register Syncfusion Flutter license keys in your Flutter projects. * If you are using Syncfusion controls prior to version 18.3.0.x, please follow this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key#flutter) to register your license key. diff --git a/Flutter/installation-and-upgrade/download-images/download_img1.png b/Flutter/installation-and-upgrade/download-images/download_img1.png index 782a031fc..ba0d5eb23 100644 Binary files a/Flutter/installation-and-upgrade/download-images/download_img1.png and b/Flutter/installation-and-upgrade/download-images/download_img1.png differ diff --git a/Flutter/installation-and-upgrade/download-images/download_img2.png b/Flutter/installation-and-upgrade/download-images/download_img2.png index 42b8d438e..c49d5c2a6 100644 Binary files a/Flutter/installation-and-upgrade/download-images/download_img2.png and b/Flutter/installation-and-upgrade/download-images/download_img2.png differ diff --git a/Flutter/installation-and-upgrade/download-images/download_img3.png b/Flutter/installation-and-upgrade/download-images/download_img3.png index 42b8d438e..c49d5c2a6 100644 Binary files a/Flutter/installation-and-upgrade/download-images/download_img3.png and b/Flutter/installation-and-upgrade/download-images/download_img3.png differ diff --git a/Flutter/installation-and-upgrade/download-images/license-download.png b/Flutter/installation-and-upgrade/download-images/license-download.png index 9def7f1e9..700f41730 100644 Binary files a/Flutter/installation-and-upgrade/download-images/license-download.png and b/Flutter/installation-and-upgrade/download-images/license-download.png differ diff --git a/Flutter/installation-and-upgrade/download-images/start-trial-download-installer.png b/Flutter/installation-and-upgrade/download-images/start-trial-download-installer.png index 7c5fc3de8..c628ef7d6 100644 Binary files a/Flutter/installation-and-upgrade/download-images/start-trial-download-installer.png and b/Flutter/installation-and-upgrade/download-images/start-trial-download-installer.png differ diff --git a/Flutter/installation-and-upgrade/download-images/start-trial-download-offline-installer.png b/Flutter/installation-and-upgrade/download-images/start-trial-download-offline-installer.png index cb5904b36..1f4a322cd 100644 Binary files a/Flutter/installation-and-upgrade/download-images/start-trial-download-offline-installer.png and b/Flutter/installation-and-upgrade/download-images/start-trial-download-offline-installer.png differ diff --git a/Flutter/installation-and-upgrade/download-images/start-trial-download.png b/Flutter/installation-and-upgrade/download-images/start-trial-download.png index cbba902ba..cfb7ea844 100644 Binary files a/Flutter/installation-and-upgrade/download-images/start-trial-download.png and b/Flutter/installation-and-upgrade/download-images/start-trial-download.png differ diff --git a/Flutter/installation-and-upgrade/download-images/trial-download.png b/Flutter/installation-and-upgrade/download-images/trial-download.png index 000b4dd5d..a98024502 100644 Binary files a/Flutter/installation-and-upgrade/download-images/trial-download.png and b/Flutter/installation-and-upgrade/download-images/trial-download.png differ diff --git a/Flutter/pdf-viewer/overview.md b/Flutter/pdf-viewer/overview.md index 404be2f1b..4e72e4f11 100644 --- a/Flutter/pdf-viewer/overview.md +++ b/Flutter/pdf-viewer/overview.md @@ -9,7 +9,7 @@ documentation: ug # Flutter PDF Viewer (SfPdfViewer) Overview -The Syncfusion [Flutter PDF Viewer](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer) widget lets you view PDF documents seamlessly and efficiently in Android, iOS, Web and macOS platforms. It has highly interactive and customizable features such as magnification, virtual scrolling, page navigation, text selection, text search, and bookmark navigation. +The Syncfusion [Flutter PDF Viewer](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer) widget allows you to view PDF documents seamlessly and efficiently in Android, iOS, Web, Windows, and macOS platforms. It has highly interactive and customizable features such as magnification, virtual scrolling, page navigation, text selection, text search, and bookmark navigation. ## Key Features @@ -23,4 +23,4 @@ The Syncfusion [Flutter PDF Viewer](https://www.syncfusion.com/flutter-widgets/f * **Themes** - Easily switch between light and dark themes. * **Localization** - All static text within the PDF Viewer can be localized to any supported language. -N> You can also explore our [Flutter PDF Viewer example](https://flutter.syncfusion.com/#/pdf-viewer/getting-started) that shows you how to render and configure the PDF Viewer. \ No newline at end of file +N> You can also explore our [Flutter PDF Viewer example](https://flutter.syncfusion.com/#/pdf-viewer/getting-started) that shows you how to render and configure the PDF Viewer. diff --git a/Flutter/pyramid-chart/callbacks.md b/Flutter/pyramid-chart/callbacks.md index 3b7b22b8a..7cc87a7be 100644 --- a/Flutter/pyramid-chart/callbacks.md +++ b/Flutter/pyramid-chart/callbacks.md @@ -212,8 +212,8 @@ Triggers when tapping on the data label of the data point in the series. The [`o }, series: PyramidSeries( dataSource: sample, - xValueMapper: (Sample sales, _) => sales.x, - yValueMapper: (Sample sales, _) => sales.y, + xValueMapper: (Sample data, _) => data.x, + yValueMapper: (Sample data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible:true ), diff --git a/Flutter/pyramid-chart/chart-appearance.md b/Flutter/pyramid-chart/chart-appearance.md index 7de1e7ca7..c13b1509e 100644 --- a/Flutter/pyramid-chart/chart-appearance.md +++ b/Flutter/pyramid-chart/chart-appearance.md @@ -13,21 +13,37 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="13 14" %} @override Widget build(BuildContext context) { + final List data = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( - body: SafeArea( - child: Center( + body: Center( child: Container( height: 300, width: 350, - child: SfPyramidChart() - ) + child: SfPyramidChart( + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) + ) + ) ) - ) - ); + ) + ); + } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double y; } {% endhighlight %} @@ -36,22 +52,21 @@ 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/SfPyramidChart/margin.html) property. -{% highlight dart %} +{% highlight dart hl_lines="9" %} @override Widget build(BuildContext context) { return Scaffold( - body: SafeArea( - child: Center( + body: Center( child: Container( - height: 300, - width: 350, child: SfPyramidChart( borderColor: Colors.red, - borderWidth: 2, - // Sets 15 logical pixels as margin for all the 4 sides. - margin: EdgeInsets.all(15) - ) + borderWidth: 2, + margin: EdgeInsets.all(15), + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -60,6 +75,8 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume {% endhighlight %} +![margin](images\chart-title\chart_margin.png) + ## Chart area customization You can customize the area of the chart using the below properties. @@ -72,14 +89,17 @@ You can customize the area of the chart using the below properties. @override Widget build(BuildContext context) { return Scaffold( - body: SafeArea( - child: Center( + body: Center( child: Container( height: 300, width: 350, child: SfPyramidChart( backgroundColor: Colors.lightGreen, backgroundImage: 'images/livechart.png', + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y,) ) ) ) @@ -88,3 +108,5 @@ You can customize the area of the chart using the below properties. } {% endhighlight %} + +![customization](images\chart-title\customization.png) diff --git a/Flutter/pyramid-chart/chart-title.md b/Flutter/pyramid-chart/chart-title.md index 841c13e22..4f9e7cbde 100644 --- a/Flutter/pyramid-chart/chart-title.md +++ b/Flutter/pyramid-chart/chart-title.md @@ -49,17 +49,17 @@ You can align the title text content horizontally to the near, center or far of ) ), // Initialize category axis - series: PyramidSeries( + series: PyramidSeries( dataSource: [ // Bind data source - SalesData('Jan', 35), - SalesData('Feb', 28), - SalesData('Mar', 34), - SalesData('Apr', 32), - SalesData('May', 40) + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) ], - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) diff --git a/Flutter/pyramid-chart/datalabel.md b/Flutter/pyramid-chart/datalabel.md index 2a4e25059..b9df75420 100644 --- a/Flutter/pyramid-chart/datalabel.md +++ b/Flutter/pyramid-chart/datalabel.md @@ -31,19 +31,26 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// * [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) - action on data labels intersection. The intersecting data labels can be hidden. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; + return Scaffold( body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - pointColorMapper: (SalesData data, _) => data.color, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( // Renders the data label isVisible: true @@ -54,6 +61,11 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// ) ); } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} @@ -68,7 +80,7 @@ This feature is used to connect label and data point using a line. It can be ena * [`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). -{% highlight dart %} +{% highlight dart hl_lines="18" %} @override Widget build(BuildContext context) { @@ -106,7 +118,7 @@ The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/l 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. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { @@ -114,10 +126,10 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, // Positioning the data label @@ -140,7 +152,7 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) property is used to apply the series color to background color of the data labels. The default value of this property is false. -{% highlight dart %} +{% highlight dart hl_lines="16" %} @override Widget build(BuildContext context) { @@ -148,10 +160,10 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, // Positioning the data label @@ -182,10 +194,10 @@ You can customize the appearance of the data label with your own template using body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData data, _) => data.x, - yValueMapper: (SalesData data, _) => data.y, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, // Templating the data label @@ -212,23 +224,23 @@ You can customize the appearance of the data label with your own template using Data label and its connector line in the Pyramid charts for the point value 0 can be hidden using the [`showZeroValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showZeroValue.html) property. This defaults to `true`. -{% highlight dart %} +{% highlight dart hl_lines="17" %} @override Widget build(BuildContext context) { return Scaffold( body: Center( child:SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: [ - SalesData(11, 35), - SalesData(12, 28), - SalesData(13, 0), - SalesData(14, 32), - SalesData(15, 40) + ChartData(11, 35), + ChartData(12, 28), + ChartData(13, 0), + ChartData(14, 32), + ChartData(15, 40) ], - xValueMapper: (SalesData sales, _) => sales.xValue, - yValueMapper: (SalesData sales, _) => sales.yValue, + xValueMapper: (ChartData data, _) => data.xValue, + yValueMapper: (ChartData data, _) => data.yValue, dataLabelSettings: DataLabelSettings( showZeroValue: false, isVisible: true @@ -238,6 +250,7 @@ Data label and its connector line in the Pyramid charts for the point value 0 ca ) ); } + {% endhighlight %} ![hide_0_value](images/datalabel/dataLabel_0_value.png) @@ -254,9 +267,9 @@ Action on data labels when it’s overflowing from its region area. The overflow Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html). -N> This is applicable for pie, doughnut, pyramid, and funnel series types alone. +>**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. -{% highlight dart %} +{% highlight dart hl_lines="7" %} Widget build(BuildContext context) { return Container( @@ -270,5 +283,75 @@ N> This is applicable for pie, doughnut, pyramid, and funnel series types alone. ) ); } + {% endhighlight %} -![label_overflow](images/datalabel/pyramid_overflow.jpg) \ No newline at end of file +![label_overflow](images/datalabel/pyramid_overflow.jpg) + +## 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). + +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.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 [`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). + +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. + +{% highlight dart hl_lines="34" %} + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('USA', 46), + ChartData('Great Britain', 27), + ChartData('China', 26), + ChartData('Russia', 19), + ChartData('Germany', 17), + ChartData('Japan', 12), + ChartData('France', 10), + ChartData('Korea', 9), + ChartData('Italy', 8), + ChartData('Australia', 8), + ChartData('Netherlands', 8), + ChartData('Hungary', 8), + ChartData('Brazil', 7), + ChartData('Spain', 7), + ChartData('Kenya', 6), + ChartData('Jamaica', 6), + ChartData('Croatia', 5), + ChartData('Cuba', 5), + ChartData('New Zealand', 4) + ]; + return SfPyramidChart( + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + dataLabelMapper: (ChartData data, _) => data.x, + radius: '60%', + dataLabelSettings: DataLabelSettings( + isVisible: true, + // Avoid labels intersection + labelIntersectAction: LabelIntersectAction.shift, + labelPosition: ChartDataLabelPosition.outside, + connectorLineSettings: ConnectorLineSettings( + type: ConnectorType.curve, length: '25%') + ) + ) + ]); + } + + class ChartData { + ChartData({this.x, this.y}); + final String? x; + final num? y; + } + +{% endhighlight %} + +![Smart labels](images/datalabel/smart_datalabel.png) diff --git a/Flutter/pyramid-chart/getting-started.md b/Flutter/pyramid-chart/getting-started.md index 484a1257d..083b5e80b 100644 --- a/Flutter/pyramid-chart/getting-started.md +++ b/Flutter/pyramid-chart/getting-started.md @@ -27,7 +27,6 @@ Add the Syncfusion [`Flutter Chart`](https://www.syncfusion.com/flutter-widgets/ {% highlight dart %} dependencies: - syncfusion_flutter_charts: ^xx.x.xx {% endhighlight %} @@ -58,7 +57,7 @@ Import the following package in your Dart code. 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. -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -106,10 +105,9 @@ Based on your data, initialize the series type. In the series, you need to map t } class ChartData { - ChartData(this.x, this.y, [this.color]); + ChartData(this.x, this.y); final String x; final double y; - final Color color; } {% endhighlight %} @@ -149,7 +147,7 @@ You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/ You can add data labels to improve the readability of the chart using the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/dataLabelSettings.html) property. -{% highlight dart %} +{% highlight dart hl_lines="12" %} @override Widget build(BuildContext context) { @@ -180,7 +178,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). -{% highlight dart %} +{% highlight dart hl_lines="7" %} @override Widget build(BuildContext context) { @@ -211,7 +209,7 @@ The tooltip is used when you cannot display information using the data labels du The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for the pyramid series. The tooltip is enabled as demonstrated in the following code snippet. -{% highlight dart %} +{% highlight dart hl_lines="5" %} late TooltipBehavior _tooltipBehavior; diff --git a/Flutter/pyramid-chart/images/chart-title/animation_delay.gif b/Flutter/pyramid-chart/images/chart-title/animation_delay.gif new file mode 100644 index 000000000..8f2e9b82c Binary files /dev/null and b/Flutter/pyramid-chart/images/chart-title/animation_delay.gif differ diff --git a/Flutter/pyramid-chart/images/chart-title/chart_margin.png b/Flutter/pyramid-chart/images/chart-title/chart_margin.png new file mode 100644 index 000000000..c9d991389 Binary files /dev/null and b/Flutter/pyramid-chart/images/chart-title/chart_margin.png differ diff --git a/Flutter/pyramid-chart/images/chart-title/customization.png b/Flutter/pyramid-chart/images/chart-title/customization.png new file mode 100644 index 000000000..ebceb927d Binary files /dev/null and b/Flutter/pyramid-chart/images/chart-title/customization.png differ diff --git a/Flutter/pyramid-chart/images/datalabel/smart_datalabel.png b/Flutter/pyramid-chart/images/datalabel/smart_datalabel.png new file mode 100644 index 000000000..10babcadb Binary files /dev/null and b/Flutter/pyramid-chart/images/datalabel/smart_datalabel.png differ diff --git a/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.jpg b/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.jpg new file mode 100644 index 000000000..55e36562a Binary files /dev/null and b/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.jpg differ diff --git a/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.png b/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.png deleted file mode 100644 index 72b06b108..000000000 Binary files a/Flutter/pyramid-chart/images/rtl-support/pyramid_legend_rtl.png and /dev/null differ diff --git a/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.jpg b/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.jpg new file mode 100644 index 000000000..0de7a543a Binary files /dev/null and b/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.jpg differ diff --git a/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.png b/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.png deleted file mode 100644 index ac20704d2..000000000 Binary files a/Flutter/pyramid-chart/images/rtl-support/pyramid_tooltip_rtl.png and /dev/null differ diff --git a/Flutter/pyramid-chart/legend.md b/Flutter/pyramid-chart/legend.md index e8ccfc0b1..e3f6ca720 100644 --- a/Flutter/pyramid-chart/legend.md +++ b/Flutter/pyramid-chart/legend.md @@ -11,25 +11,37 @@ documentation: ug 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. -{% highlight dart %} +{% highlight dart hl_lines="14" %} @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: Container( child: SfPyramidChart( legend: Legend(isVisible: true), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) ) ); } + class ChartData{ + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} @@ -67,10 +79,10 @@ The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char borderColor: Colors.black, borderWidth: 2 ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -114,10 +126,10 @@ The following properties are used to define and customize the [`title`](https:// ) ), ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -133,7 +145,7 @@ The following properties are used to define and customize the [`title`](https:// You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -146,10 +158,10 @@ You can control the visibility of the series by tapping the legend item. You can // Toogles the series visibility on tapping the legend item toggleSeriesVisibility: true ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -163,7 +175,7 @@ You can control the visibility of the series by tapping the legend item. You can The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) is used to toggle the visibility of legend. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -176,10 +188,10 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest // Visibility of legend isVisible: false ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -193,7 +205,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest 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). -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -207,10 +219,10 @@ The legend items can be placed in multiple rows or scroll can be enabled using t // Overflowing legend content will be wraped overflowMode: LegendItemOverflowMode.wrap ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -230,7 +242,7 @@ You can change the position of the legend inside the chart. The following proper * [`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). -{% highlight dart %} +{% highlight dart hl_lines="11" %} @override Widget build(BuildContext context) { @@ -244,10 +256,10 @@ You can change the position of the legend inside the chart. The following proper // Legend will be placed at the left position: LegendPosition.left ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) @@ -264,7 +276,7 @@ You can change the position of the legend inside the chart. The following proper 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 [`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. Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area. -{% highlight dart %} +{% highlight dart hl_lines="10" %} @override Widget build(BuildContext context) { @@ -276,11 +288,14 @@ Also, the legend will not take a dedicated position for it and will be drawn on isVisible: true, // Legend will placed at the specified offset offset: Offset(20, 40)), - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y), - )))); + ) + ) + ) + ); } class ChartData { @@ -316,10 +331,10 @@ You can customize the appearance of legend items with your template by using [`l ); } ), - series: PyramidSeries( + series: PyramidSeries( dataSource:chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) diff --git a/Flutter/pyramid-chart/pyramid-customization.md b/Flutter/pyramid-chart/pyramid-customization.md index 77a14c7a5..3bd3c2e09 100644 --- a/Flutter/pyramid-chart/pyramid-customization.md +++ b/Flutter/pyramid-chart/pyramid-customization.md @@ -42,10 +42,9 @@ To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.d } class ChartData { - ChartData(this.x, this.y, [this.color]); + ChartData(this.x, this.y); final String x; final double y; - final Color color; } {% endhighlight %} @@ -56,7 +55,7 @@ To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.d 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). -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -65,7 +64,17 @@ You can render the pyramid series as [`PyramidMode.linear`](https://pub.dev/docu child: Container( child: SfPyramidChart( series: PyramidSeries( - pyramidMode: PyramidMode.surface + pyramidMode: PyramidMode.surface, + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -81,7 +90,7 @@ You can render the pyramid series as [`PyramidMode.linear`](https://pub.dev/docu You can modify the size of pyramid series using the [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/width.html) properties. It ranges from 0% to 100%. -{% highlight dart %} +{% highlight dart hl_lines="8 9" %} @override Widget build(BuildContext context) { @@ -92,6 +101,16 @@ You can modify the size of pyramid series using the [`height`](https://pub.dev/d series: PyramidSeries( height: '50%', width: '50%', + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -107,7 +126,7 @@ You can modify the size of pyramid series using the [`height`](https://pub.dev/d You can control the gap between the two segments using the [`gapRatio`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/gapRatio.html) property. It ranges from 0 to 1. -{% highlight dart %} +{% highlight dart hl_lines="8" %} @override Widget build(BuildContext context) { @@ -117,6 +136,16 @@ You can control the gap between the two segments using the [`gapRatio`](https:// child: SfPyramidChart( series: PyramidSeries( gapRatio: 0.1, + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -134,7 +163,7 @@ You can explode a pyramid segment using the [`explodeIndex`](https://pub.dev/doc Also, the segments can be exploded by tapping the segment. -{% highlight dart %} +{% highlight dart hl_lines="8 9 10" %} @override Widget build(BuildContext context) { @@ -146,6 +175,16 @@ Also, the segments can be exploded by tapping the segment. explode: true, explodeOffset: '5%', explodeIndex: 2, + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 160), + ], + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -157,37 +196,6 @@ Also, the segments can be exploded by tapping the segment. ![Explode](images/pyramid-charts/pyramid_explode.jpg) -## Smart data labels - -The [`smartLabelMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/smartLabelMode.html) property is used to place the data labels smartly. The [`smartLabelMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/smartLabelMode.html) supports the following values: - -* [`SmartLabelMode.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - shifts the data label position when a label intersects with other label. -* [`SmartLabelMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - renders all the data label when intersect. -* [`SmartLabelMode.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmartLabelMode.html) - hides the intersecting data label, and is the default value. - -{% highlight dart %} - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfPyramidChart( - smartLabelMode: SmartLabelMode.shift, - series: PyramidSeries( - dataLabelSettings: DataLabelSettings( - isVisible: true, - labelPosition: ChartDataLabelPosition.inside - ), - ) - ) - ) - ) - ); - } - -{% endhighlight %} - ## Applying palette color The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/palette.html) property is used to define colors for the series available in chart. By default, a set of 10 colors is predefined for applying it to the series. If the colors specified in the series are less than the number of series, then the remaining series will be filled with the specified palette colors rotationally. @@ -204,7 +212,18 @@ The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/c Colors.teal, Colors.orange, Colors.brown - ] + ], + series: PyramidSeries( + dataSource: [ + ChartData('Walnuts', 654), + ChartData('Almonds', 575), + ChartData('Soybeans', 446), + ChartData('Black beans', 341), + ChartData('Mushrooms', 296), + ChartData('Avacado', 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 94a7d8e32..70216c479 100644 --- a/Flutter/pyramid-chart/right-to-left.md +++ b/Flutter/pyramid-chart/right-to-left.md @@ -9,28 +9,28 @@ 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. Only, the legend rendering will be changed. +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. -## RLT rendering ways +## RTL rendering ways 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-class.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). -{% highlight dart %} +{% highlight dart hl_lines="5" %} @override Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfPyramidChart( - //... - ), - ), - ); + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfPyramidChart( + //... + ), + ), + ); } {% endhighlight %} @@ -41,56 +41,121 @@ To change the chart rendering direction from right to left, you can change the [ {% highlight dart %} + /// Package import + import 'package:flutter_localizations/flutter_localizations.dart'; + import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + + // ... + @override Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale('en'), - Locale('ar'), - // ... other locales the app supports - ], - locale: Locale('ar'), - home: Scaffold( - body: SfPyramidChart( - //... - ), - ) - ); + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + Locale('en'), + Locale('ar'), + // ... other locales the app supports + ], + locale: Locale('ar'), + home: Scaffold( + body: SfPyramidChart( + //... + ), + ) + ); } - {% endhighlight %} ## RTL supported chart elements -Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction. +### Legend -![legend RTL](images/rtl-support/pyramid_legend_rtl.png) +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. -In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `point.y : point.x`. By default, the tooltip format will be `point.x : point.y`. +{% highlight dart %} + + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfPyramidChart( + legend: Legend(isVisible: true), + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } + +{% endhighlight %} + +![Legend RTL](images/rtl-support/pyramid_legend_rtl.jpg) + +### 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. {% highlight dart %} - + late TooltipBehavior _tooltipBehavior; @override void initState(){ - _tooltipBehavior = TooltipBehavior( - enable: true, - format: “point.y : point.x” - ); + _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } - SfPyramidChart( - tooltipBehavior: _tooltipBehavior, - //... - ) + @override + Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 24), + ChartData('Feb', 20), + ChartData('Mar', 35), + ChartData('Apr', 27), + ChartData('May', 30), + ]; + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfPyramidChart( + tooltipBehavior = _tooltipBehavior; + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, + ) + ) + ) + ); + } + + class ChartData { + ChartData(this.x, this.y); + final String x; + final int y; + } {% endhighlight %} -![Tooltip RTL](images/rtl-support/pyramid_tooltip_rtl.png) \ No newline at end of file +![Tooltip RTL](images/rtl-support/pyramid_tooltip_rtl.jpg) diff --git a/Flutter/pyramid-chart/selection.md b/Flutter/pyramid-chart/selection.md index d24df81cd..4c8d595c7 100644 --- a/Flutter/pyramid-chart/selection.md +++ b/Flutter/pyramid-chart/selection.md @@ -29,10 +29,10 @@ The selection feature in chart let you to select a segment in a series or the se body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, selectionBehavior: _selectionBehavior ) ) @@ -77,10 +77,10 @@ You can customize the segments using the below properties. body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y, selectionBehavior: _selectionBehavior ) ) @@ -120,6 +120,7 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## 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. + This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. @@ -142,12 +143,15 @@ Defaults to `true`. body: Center( child: Container( child: SfPyramidChart( - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData1, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, selectionBehavior: _selectionBehavior) - )))); + ) + ) + ) + ); } {% endhighlight %} diff --git a/Flutter/pyramid-chart/series-customization.md b/Flutter/pyramid-chart/series-customization.md index 93e5d79c1..50c13f5de 100644 --- a/Flutter/pyramid-chart/series-customization.md +++ b/Flutter/pyramid-chart/series-customization.md @@ -35,7 +35,7 @@ documentation: ug {% endhighlight %} -## Animation delay +### 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`. @@ -43,7 +43,7 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l @override Widget build(BuildContext context) { - List data = [ + final List data = [ ChartData('Jan', 35), ChartData('Feb', 28), ChartData('Mar', 38), @@ -72,6 +72,8 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l {% endhighlight %} +![animation_delay](images\chart-title\animation_delay.gif) + ## 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/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). @@ -152,7 +154,7 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts @override Widget build(BuildContext context) { - static List chartData = [ + static List chartData = [ ChartData('Rent', 1000,Colors.teal), ChartData('Food', 2500,Colors.lightBlue), ChartData('Savings', 760,Colors.brown), @@ -168,7 +170,7 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, //map Color for each dataPoint datasource. - pointColorMapper: (ChartData sales,_) => sales.color, + pointColorMapper: (ChartData data,_) => data.color, ) ) ) diff --git a/Flutter/pyramid-chart/tooltip.md b/Flutter/pyramid-chart/tooltip.md index f2eaf9c8c..0db777e4c 100644 --- a/Flutter/pyramid-chart/tooltip.md +++ b/Flutter/pyramid-chart/tooltip.md @@ -25,21 +25,33 @@ The tooltip state will be preserved on the device's orientation change and on br @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 38), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: Container( child: SfPyramidChart( tooltipBehavior: _tooltipBehavior, - series: PyramidSeries( + series: PyramidSeries( dataSource: chartData, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y ) ) ) ) ); } + class ChartData { + ChartData(this.x, this.y); + final String x; + final double? y; + } {% endhighlight %} @@ -90,6 +102,10 @@ You can use the following properties to customize the tooltip appearance. width: 350, child: SfPyramidChart( tooltipBehavior: _tooltipBehavior, + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -128,7 +144,11 @@ By default, x and y value will be displayed in the tooltip, and it can be custom body: Center( child: Container( child: SfPyramidChart( - tooltipBehavior: _tooltipBehavior + tooltipBehavior: _tooltipBehavior, + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -162,7 +182,11 @@ The tooltip can be made to display in the fixed location or at the pointer locat body: Center( child: Container( child: SfPyramidChart( - tooltipBehavior: _tooltipBehavior + tooltipBehavior: _tooltipBehavior, + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -204,7 +228,11 @@ You can customize the appearance of the tooltip with your own widget by using th body: Center( child: Container( child: SfPyramidChart( - tooltipBehavior: _tooltipBehavior + tooltipBehavior: _tooltipBehavior, + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) @@ -246,7 +274,11 @@ The ActivationMode enum contains the following values: body: Center( child: Container( child: SfPyramidChart( - tooltipBehavior: _tooltipBehavior + tooltipBehavior: _tooltipBehavior, + series: PyramidSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) ) ) ) diff --git a/Flutter/sparkcharts/axis-types.md b/Flutter/sparkcharts/axis-types.md index bc7a38303..c5afc1551 100644 --- a/Flutter/sparkcharts/axis-types.md +++ b/Flutter/sparkcharts/axis-types.md @@ -39,18 +39,18 @@ To use the numeric values or to bind the custom data source use the [`SfSparkBar ); } - final List data = [ - SalesData(xval: 1, yval: 190), - SalesData(xval: 2, yval: 165), - SalesData(xval: 3, yval: 158), - SalesData(xval: 4, yval: 175), - SalesData(xval: 5, yval: 200), - SalesData(xval: 6, yval: 180), - SalesData(xval: 7, yval: 210), + final List data = [ + ChartData(xval: 1, yval: 190), + ChartData(xval: 2, yval: 165), + ChartData(xval: 3, yval: 158), + ChartData(xval: 4, yval: 175), + ChartData(xval: 5, yval: 200), + ChartData(xval: 6, yval: 180), + ChartData(xval: 7, yval: 210), ]; - class SalesData { - SalesData({this.xval, this.yval}); + class ChartData { + ChartData({this.xval, this.yval}); final double xval; final double yval; } @@ -79,34 +79,34 @@ To use the date-time values i.e to bind the custom data source use the [`SfSpark ), ); } - final List data = [ - SalesData(xval: DateTime(2018, 0, 1), yval: 4), - SalesData(xval: DateTime(2018, 0, 2), yval: 4.5), - SalesData(xval: DateTime(2018, 0, 3), yval: 8), - SalesData(xval: DateTime(2018, 0, 4), yval: 7), - SalesData(xval: DateTime(2018, 0, 5), yval: 6), - SalesData(xval: DateTime(2018, 0, 8), yval: 8), - SalesData(xval: DateTime(2018, 0, 9), yval: 8), - SalesData(xval: DateTime(2018, 0, 10), yval: 6.5), - SalesData(xval: DateTime(2018, 0, 11), yval: 4), - SalesData(xval: DateTime(2018, 0, 12), yval: 5.5), - SalesData(xval: DateTime(2018, 0, 15), yval: 8), - SalesData(xval: DateTime(2018, 0, 16), yval: 6), - SalesData(xval: DateTime(2018, 0, 17), yval: 6.5), - SalesData(xval: DateTime(2018, 0, 18), yval: 7.5), - SalesData(xval: DateTime(2018, 0, 19), yval: 7.5), - SalesData(xval: DateTime(2018, 0, 22), yval: 4), - SalesData(xval: DateTime(2018, 0, 23), yval: 8), - SalesData(xval: DateTime(2018, 0, 24), yval: 6), - SalesData(xval: DateTime(2018, 0, 25), yval: 7.5), - SalesData(xval: DateTime(2018, 0, 26), yval: 4.5), - SalesData(xval: DateTime(2018, 0, 29), yval: 6), - SalesData(xval: DateTime(2018, 0, 30), yval: 5), - SalesData(xval: DateTime(2018, 0, 31), yval: 7), + final List data = [ + ChartData(xval: DateTime(2018, 0, 1), yval: 4), + ChartData(xval: DateTime(2018, 0, 2), yval: 4.5), + ChartData(xval: DateTime(2018, 0, 3), yval: 8), + ChartData(xval: DateTime(2018, 0, 4), yval: 7), + ChartData(xval: DateTime(2018, 0, 5), yval: 6), + ChartData(xval: DateTime(2018, 0, 8), yval: 8), + ChartData(xval: DateTime(2018, 0, 9), yval: 8), + ChartData(xval: DateTime(2018, 0, 10), yval: 6.5), + ChartData(xval: DateTime(2018, 0, 11), yval: 4), + ChartData(xval: DateTime(2018, 0, 12), yval: 5.5), + ChartData(xval: DateTime(2018, 0, 15), yval: 8), + ChartData(xval: DateTime(2018, 0, 16), yval: 6), + ChartData(xval: DateTime(2018, 0, 17), yval: 6.5), + ChartData(xval: DateTime(2018, 0, 18), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 19), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 22), yval: 4), + ChartData(xval: DateTime(2018, 0, 23), yval: 8), + ChartData(xval: DateTime(2018, 0, 24), yval: 6), + ChartData(xval: DateTime(2018, 0, 25), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 26), yval: 4.5), + ChartData(xval: DateTime(2018, 0, 29), yval: 6), + ChartData(xval: DateTime(2018, 0, 30), yval: 5), + ChartData(xval: DateTime(2018, 0, 31), yval: 7), ]; - class SalesData { - SalesData({this.xval, this.yval}); + class ChartData { + ChartData({this.xval, this.yval}); final DateTime xval; final double yval; } @@ -135,23 +135,23 @@ To use the category values i.e to bind the custom data source use the [`SfSparkB ), ); } - final List data = [ - SalesData(xval: 'Robert', yval: 60), - SalesData(xval: 'Andrew', yval: 65), - SalesData(xval: 'Suyama', yval: 70), - SalesData(xval: 'Michael', yval: 80), - SalesData(xval: 'Janet', yval: 55), - SalesData(xval: 'Davolio', yval: 90), - SalesData(xval: 'Fuller', yval: 75), - SalesData(xval: 'Nancy', yval: 85), - SalesData(xval: 'Margaret', yval: 77), - SalesData(xval: 'Steven', yval: 68), - SalesData(xval: 'Laura', yval: 96), - SalesData(xval: 'Elizabeth', yval: 57) + final List data = [ + ChartData(xval: 'Robert', yval: 60), + ChartData(xval: 'Andrew', yval: 65), + ChartData(xval: 'Suyama', yval: 70), + ChartData(xval: 'Michael', yval: 80), + ChartData(xval: 'Janet', yval: 55), + ChartData(xval: 'Davolio', yval: 90), + ChartData(xval: 'Fuller', yval: 75), + ChartData(xval: 'Nancy', yval: 85), + ChartData(xval: 'Margaret', yval: 77), + ChartData(xval: 'Steven', yval: 68), + ChartData(xval: 'Laura', yval: 96), + ChartData(xval: 'Elizabeth', yval: 57) ]; - class SalesData { - SalesData({this.xval, this.yval}); + class ChartData { + ChartData({this.xval, this.yval}); final String xval; final double yval; } @@ -189,14 +189,14 @@ Axis line of the spark charts can be customized using the following properties. ); } - final List data = [ - SalesData(xval: 1, yval: 190), - SalesData(xval: 2, yval: 165), - SalesData(xval: 3, yval: 158), - SalesData(xval: 4, yval: 175), - SalesData(xval: 5, yval: 200), - SalesData(xval: 6, yval: 180), - SalesData(xval: 7, yval: 210), + final List data = [ + ChartData(xval: 1, yval: 190), + ChartData(xval: 2, yval: 165), + ChartData(xval: 3, yval: 158), + ChartData(xval: 4, yval: 175), + ChartData(xval: 5, yval: 200), + ChartData(xval: 6, yval: 180), + ChartData(xval: 7, yval: 210), ]; {% endhighlight %} diff --git a/Flutter/sparkcharts/sparkcharts-types.md b/Flutter/sparkcharts/sparkcharts-types.md index f630daeb1..d8c926c40 100644 --- a/Flutter/sparkcharts/sparkcharts-types.md +++ b/Flutter/sparkcharts/sparkcharts-types.md @@ -87,6 +87,10 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ![Spark line dashArray](images/sparkline-types/sparkline-dasharray.png) +#### See Also + +* [Bind data to the Flutter Sparkline chart](https://www.syncfusion.com/kb/12317/how-to-bind-data-to-the-flutter-sparkline-chart-sfsparklinechart). + ## Area chart [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html) is used to emphasize a change in values. This is primarily used when the magnitude of the trend is to be communicated rather than individual data values. @@ -183,6 +187,12 @@ The following properties are used to customize the appearance: ![Spark Bar chart](images/sparkline-types/spark-bar.png) +#### See Also + +* [Export Flutter Spark bar charts as a pdf](https://www.syncfusion.com/kb/12914/how-to-export-flutter-spark-bar-charts-as-a-pdf-sfsparkbarchart). + +* [Customize the Flutter Spark bar charts](https://www.syncfusion.com/kb/12363/how-to-customize-the-flutter-spark-bar-charts-sfsparkbarchart). + ## WinLoss Sparkline chart [`SfSparkWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html) is used to show whether each value is positive or negative visualizing a Win/Loss scenario. diff --git a/Flutter/themes.md b/Flutter/themes.md index 2ad71cb35..742de4844 100644 --- a/Flutter/themes.md +++ b/Flutter/themes.md @@ -20,12 +20,11 @@ The [`SfTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/the {% highlight dart %} dependencies: - syncfusion_flutter_charts: ^xx.x.xx {% endhighlight %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Chart`](https://pub.dev/packages/syncfusion_flutter_charts/versions) widget. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Chart`](https://pub.dev/packages/syncfusion_flutter_charts/versions) widget. To use the theme widgets, import the following library in your Dart code. @@ -41,6 +40,13 @@ Once the required package has been imported, initialize [`SfTheme`](https://pub. @override Widget build(BuildContext context) { + final List chartData = [ + ChartData('Jan', 35), + ChartData('Feb', 28), + ChartData('Mar', 34), + ChartData('Apr', 32), + ChartData('May', 40) + ]; return Scaffold( body: Center( child: SfTheme( @@ -49,7 +55,16 @@ Once the required package has been imported, initialize [`SfTheme`](https://pub. plotAreaBackgroundColor: Colors.grey[400] ) ), - child: SfCartesianChart() + child: SfCartesianChart( + primaryXAxis: CategoryAxis(), + series: >[ + // Renders area chart + LineSeries( + dataSource: chartData, + xValueMapper: (ChartData data, _) => data.x, + yValueMapper: (ChartData data, _) => data.y) + ] + ) ) ) ); @@ -180,7 +195,9 @@ By default, the light theme will be applied. You can apply a dark theme using th data: SfThemeData( brightness: Brightness.dark ), - child: SfCartesianChart() + child: SfCartesianChart( + // Other configurations + ) ) ) ); @@ -206,7 +223,9 @@ Initialize the specialized theme widget and then add respective widget as a chil brightness: Brightness.dark, backgroundColor: Colors.blue[300] ), - child: SfCartesianChart() + child: SfCartesianChart( + // Other configurations + ) ) ); } @@ -214,6 +233,7 @@ Initialize the specialized theme widget and then add respective widget as a chil {% endhighlight %} In the above code snippet, [`data`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChartTheme/data.html) property has been configured with [`SfChartThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChartThemeData-class.html) instance. + Here, the [`SfChartThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChartThemeData-class.html) includes the properties required to customize the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html), [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html), [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html), and [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widgets. Similarly, refer the following table to know about the other specialized theme widget classes that are applicable for respective widgets. @@ -320,4 +340,4 @@ Similarly, refer the following table to know about the other specialized theme w -N> When dark or light theme is applied to the material app, and Syncfusion theme widgets are not initialized in your application, then based on the theme applied to the material app, the appropriate theme will be applied to Syncfusion widgets. \ No newline at end of file +>**Note**: When dark or light theme is applied to the material app, and Syncfusion theme widgets are not initialized in your application, then based on the theme applied to the material app, the appropriate theme will be applied to Syncfusion widgets. \ No newline at end of file diff --git a/Flutter/xlsio/working-with-data-validation.md b/Flutter/xlsio/working-with-data-validation.md new file mode 100644 index 000000000..99aa2e972 --- /dev/null +++ b/Flutter/xlsio/working-with-data-validation.md @@ -0,0 +1,240 @@ +--- +layout: post +title: Excel Data Validation Syncfusion Flutter XlsIO +description: In this section, learn how to use different types of data validations on Excel data using Syncfusion Flutter XlsIO. +platform: flutter +control: Excel +documentation: ug +--- + +# Working with Excel Data Validation + +Data Validation is a list of rules for the data that can be entered into a cell. XlsIO supports the following data validation types. + +* Text Length Validation +* Time Validation +* List Validation +* Whole Number Validation +* Decimal Number Validation +* Date Validation +* Custom Validation + +## Text Length Validation + +Text length data validation can be applied by selecting the **allowType** as **textLength**. The following code snippet illustrates this. + +{% highlight dart %} +//Data Validation for text Length. +final DataValidation textLengthValidation = sheet.getRangeByName(‘A1’).dataValidation; +textLengthValidation.allowType = ExcelDataValidationType.textLength; + +//Text Length should be less than 5 characters. +textLengthValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +textLengthValidation.firstFormula = '1'; +textLengthValidation.secondFormula = '5'; +{% endhighlight %} + +## Time Validation + +Time data validation can be applied by selecting the **allowType** as **time**. The following code snippet illustrates this. + +{% highlight dart %} +//Data validation for time. +final DataValidation timeValidation = sheet.getRangeByName(‘A3’).dataValidation; +timeValidation.allowType = ExcelDataValidationType.time; + +//Time between 10:00 and 12:00 ‘o Clock. +timeValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +timeValidation.firstFormula = ’10:00’; +timeValidation.secondFormula = ’12:00’; +{% endhighlight %} + +N> Time value should be entered in 24-hour format without appending AM or PM at the end of the code. + +## List Validation + +List data validation can be applied by assigning values to **listOfValues**. The following code snippet illustrates this. + +{% highlight dart %} +//DataValidation for list. +final DataValidation listValidation = sheet.getRangeByName(‘A3’).dataValidation; +listValidation.listOfValues = [‘ListItem1’,’ListItem2’,’ListItem3’]; +{% endhighlight %} + +N> The ListOfValues property should be used when the values in the Data Validation list are entered manually, whose limit is only 255 characters including separators. + +## Whole Number Validation + +Whole number data validation can be applied by selecting the **allowType** as **integer**. The following code snippet illustrates this. + +{% highlight dart %} +//Data validation for number. +final DataValidation integerValidation = sheet.getRangeByName(‘A3’).dataValidation; +integerValidation.allowType = ExcelDataValidationType.integer; + +//Value between 0 to 10. +integerValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +integerValidation.firstFormula = ‘0’; +integerValidation.secondFormula = ‘10’; +{% endhighlight %} + +## Decimal Number Validation + +Decimal number data validation can be applied by selecting the **allowType** as **decimal**. The following code snippet illustrates this. + +{% highlight dart %} +//Data Validation for decimal. +final DataValidation decimalValidation = sheet.getRangeByName(‘G3’).dataValidation; +sheet.getRangeByName(‘G1’).text =’Enter the Decimal Number in G3’; +decimalValidation.allowType = ExcelDataValidationType.decimal; +decimalValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +decimalValidation.firstFormula = ‘1.0’; +decimalValidation.secondFormula = ’10.0’; +{% endhighlight %} + +## Date Validation + +Date data validation can be applied by selecting the **allowType** as **Date**. The following code snippet illustrates this. + +{% highlight dart %} +//Data validation for date. +final DataValidation dateValidation = sheet.getRangeByName(‘A3’).dataValidation; +dateValidation.allowType = ExcelDataValidationType.Date; + +//Date between 10/5/2003 to 10/5/2004 +dateValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +dateValidation.firstFormula = DateTime(2003, 5, 10); +dateValidation.secondFormula = DateTime(2004, 5, 10); +{% endhighlight %} + +## Custom Validation + +Custom validation can be applied by selecting the **allowType** as **Formula**. The following code snippet illustrates this. + +{% highlight dart %} +//Data validation for custom data. +final DataValidation customValidation = sheet.getRangeByName(‘A3’).dataValidation; +customValidation.allowType = ExcelDataValidationType.formula; +customValidation.firstFormula = ‘=A1>10’; +{% endhighlight %} + +The following complete code snippet includes all the above discussed data validation types. + +{% highlight dart %} +//Create a new Excel Document and access the first sheet. +final Workbook workbook = Workbook(1); +final sheet = workbook.worksheets[0]; + +//Data Validation for Text Length. +final DataValidation textLengthValidation = sheet.getRangeByName(‘A3’).dataValidation; +sheet.getRangeByName(‘A1’).text = ’Enter the text in A3’; +textLengthValidation.allowType = ExcelDataValidationType.textLength; +textLengthValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +textLengthValidation.firstFormula = ‘0’; +textLengthValidation.secondFormula = ‘5’; + +//Show the error message. +textLengthValidation.showErrorBox = true; +textLengthValidation.errorBoxText = ‘Text length should be less than 5 characters’; +textLengthValidation.errorBoxTitle = ‘ERROR’; +textLengthValidation.promptBoxText = ‘Data validation for text length’; +textLengthValidation.showPromptBox = true; + +//Data Validation for time. +final DataValidation timeDataValidation = sheet.getRangeByName(‘B3’).dataValidation; +sheet.getRangeByName(‘B1’).text = ’Enter the time between 10:00 and 12:00 ‘o Clock in B3’; +timeDataValidation.allowType = ExcelDataValidationType.time; +timeDataValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +timeDataValidation.firstFormula = ’10:00’; +timeDataValidation.secondFormula = ’12:00’; + +//Show the error message. +timeDataValidation.showErrorBox = true; +timeDataValidation.errorBoxText = ‘Enter a correct time’; +timeDataValidation.errorBoxTitle = ‘ERROR’; +timeDataValidation.promptBoxText = ‘Data validation for time’; +timeDataValidation.showPromptBox = true; + +//Data Validation for List. +final DataValidation listValidation = sheet.getRangeByName(‘C3’).dataValidation; +sheet.getRangeByName(‘C1’).text = ‘Data Validation List in C3’; +listValidation.listOfValues = [‘ListItem1’, ‘ListItem2’ , ‘ListItem3’]; + +//Show the error message. +listValidation.errorBoxText = ‘Choose the value from the list’; +listValidation.errorBoxTitle = ‘ERROR’; +listValidation.promptBoxText = ‘Data validation for list’; +listValidation.showPromptBox = true; + +//Data Validation for Numbers. +final DataValidation numberValidation = sheet.getRangeByName(‘D3’).dataValidation; +sheet.getRangeByName(‘D1’).text =’Enter the Number in D3’; +numberValidation.allowType = ExcelDataValidationType.integer; +numberValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +numberValidation.firstFormula = ’0’; +numberValidation.secondFormula = ’10’; + +//Show the error message. +numberValidation.showErrorBox = true; +numberValidation.errorBoxText = ‘Enter Value between 0 to 10’; +numberValidation.errorBoxTitle = ‘ERROR’; +numberValidation.promptBoxText = ‘Data validation for numbers’; +numberValidation.showPromptBox = true; + +//Data Validation for Date. +final DataValidation dateValidation = sheet.getRangeByName(‘E3’).dataValidation; +sheet.getRangeByName(‘E1’).text =’Enter the Date in E3’; +dateValidation.allowType = ExcelDataValidationType.date; +dateValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +dateValidation.firstDateTime = DateTime(2003, 5 , 10); +dateValidation.secondDateTime = DateTime(2004, 5, 10); + +//Show the error message. +dateValidation.showErrorBox = true; +dateValidation.errorBoxText = ‘Enter Value between 10/5/2003 to 10/5/2004’; +dateValidation.errorBoxTitle = ‘ERROR’; +dateValidation.promptBoxText = ‘Data validation for date’; +dateValidation.showPromptBox = true; + +//Data validation for custom data. +final DataValidation customValidation = sheet.getRangeByName(‘F3’).dataValidation; +customValidation.allowType = ExcelDataValidationType.formula; +customValidation.firstFormula = ‘=F1>10’; + +//Show the error message. +customValidation.errorBoxText = ‘Enter the value in F1 greater than 10’; +customValidation.errorBoxTitle = ‘ERROR’; +customValidation.promptBoxText = ‘Custom DataValidation’; +customValidation.showPromptBox = true; + +//Data Validation for decimal. +final DataValidation decimalValidation = sheet.getRangeByName(‘G3’).dataValidation; +sheet.getRangeByName(‘G1’).text =’Enter the Decimal Number in G3’; +decimalValidation.allowType = ExcelDataValidationType.decimal; +decimalValidation.comparisonOperator = ExcelDataValidationComparisonOperator.between; +decimalValidation.firstFormula = ‘1.0’; +decimalValidation.secondFormula = ’10.0’; + +//Show the error message. +decimalValidation.showErrorBox = true; +decimalValidation.errorBoxText = ‘Enter Value between 1.0 to 10.0’; +decimalValidation.errorBoxTitle = ‘ERROR’; +decimalValidation.promptBoxText = ‘Data validation for decimal’; +decimalValidation.showPromptBox = true; + +//DataValidation as a list of the selected range in Excel-Sheet. +final DataValidation dataRangeValidation = sheet.getRangeByName(‘H3’).dataValidation; +sheet.getRangeByName(‘H1’).text = ‘Select the value provided in the list’; +sheet.getRangeByName(‘H4’).text = ‘ListItem1’; +sheet.getRangeByName(‘H5’).text = ‘ListItem2’; +dataRangeValidation.dataRange = sheet.getRangeByName(‘H4:H5’); + +//Range of cells to be autofit +Sheet.getRangeByName(‘A1:H5’).autoFit(); + +//Save and dispose the Workbook +final List bytes = workbook.saveAsStream(); +saveAsExcel(bytes, ‘DataValidation.xlsx’); +workbook.dispose(); +{% endhighlight %} + diff --git a/Flutter/xlsio/working-with-excel-worksheet.md b/Flutter/xlsio/working-with-excel-worksheet.md index a4047ee70..c0fc24dfb 100644 --- a/Flutter/xlsio/working-with-excel-worksheet.md +++ b/Flutter/xlsio/working-with-excel-worksheet.md @@ -147,3 +147,49 @@ workbook.dispose(); File('Output.xlsx').writeAsBytes(bytes); {% endhighlight %} + +## Right to Left Direction + +A *worksheet* direction can be changed from right to left programmatically through **isRightToLeft** property of **Worksheet**. The following code snippet explains this. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(1); + +//Access the sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +//Display the worksheet in Right-To-Left direction. +sheet.isRightToLeft = true; + +//Add the text using setText() method. +sheet.getRangeByName('A1').setText('Hello World'); + +//Save and dispose the workbook. +final List? bytes = workbook.saveAsStream(); +File('output.xlsx').writeAsBytes(bytes!); +workbook.dispose(); +{% endhighlight %} + +It is also possible to change the direction of entire *workbook* from right to left through **isRightToLeft** property of **Workbook**. The following code snippet explains this. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(2); + +//Access the sheets via index. +final Worksheet sheet1 = workbook.worksheets[0]; +final Worksheet sheet2 = workbook.worksheets[1]; + +//Display the workbook in Right-To-Left direction. +workbook.isRightToLeft = true; + +//Add the text using setText() method. +sheet1.getRangeByName('A1').setText('Hello World'); +sheet2.getRangeByName('A1').setText('Hello World'); + +// Save and dispose the workbook. +final List? bytes = workbook.saveAsStream(); +File('Output.xlsx').writeAsBytes(bytes!); +workbook.dispose(); +{% endhighlight %} diff --git a/Flutter/xlsio/working-with-table.md b/Flutter/xlsio/working-with-table.md new file mode 100644 index 000000000..6c014e8ff --- /dev/null +++ b/Flutter/xlsio/working-with-table.md @@ -0,0 +1,268 @@ +--- +layout: post +title: Excel Tables Syncfusion Flutter XlsIO +description: In this section, learn various features of Excel tables like creating, formatting, and removing an Excel table using Syncfusion Flutter XlsIO. +platform: flutter +control: Excel +documentation: ug +--- + +# Working with Excel Tables + +Excel tables helps to organize and analyze data, and Flutter XlsIO supports creating and manipulating these tables. + +## Creating a Table + +The following code snippet explains how to create a simple table from scratch. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(1); + +//Access the sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +//Insert data into the sheet. +sheet.getRangeByName('A1').setText('Fruits'); +sheet.getRangeByName('A2').setText('banana'); +sheet.getRangeByName('A3').setText('Cherry'); +sheet.getRangeByName('A4').setText('Banana'); + +sheet.getRangeByName('B1').setText('CostA'); +sheet.getRangeByName('B2').setNumber(744.6); +sheet.getRangeByName('B3').setNumber(5079.6); +sheet.getRangeByName('B4').setNumber(1267.5); + +sheet.getRangeByName('C1').setText('CostB'); +sheet.getRangeByName('C2').setNumber(162.56); +sheet.getRangeByName('C3').setNumber(1249.2); +sheet.getRangeByName('C4').setNumber(1062.5); + +//Create a table with the data in given range. +sheet.tableCollection.create('Table1', sheet.getRangeByName('A1:C4')); + +final List bytes = workbook.saveAsStream(); +saveAsExcel(bytes, 'Table.xlsx'); +workbook.dispose(); +{% endhighlight %} + +## Built-In Table Styles + +You can apply the built in table styles available in Microsoft Excel, through **ExcelTableBuiltInStyle** enum of Flutter XlsIO. The following code snippet illustrates this. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(1); + +//Access the sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +//Insert data into the sheet. +sheet.getRangeByName('A1').setText('Fruits'); +sheet.getRangeByName('A2').setText('banana'); +sheet.getRangeByName('A3').setText('Cherry'); +sheet.getRangeByName('A4').setText('Banana'); + +sheet.getRangeByName('B1').setText('CostA'); +sheet.getRangeByName('B2').setNumber(744.6); +sheet.getRangeByName('B3').setNumber(5079.6); +sheet.getRangeByName('B4').setNumber(1267.5); + +sheet.getRangeByName('C1').setText('CostB'); +sheet.getRangeByName('C2').setNumber(162.56); +sheet.getRangeByName('C3').setNumber(1249.2); +sheet.getRangeByName('C4').setNumber(1062.5); + +//Create a table with the data in given range. +final ExcelTable table = sheet.tableCollection.create('Table1', sheet.getRangeByName('A1:C4')); + +//Format the table with a built-in style. +table.builtInTableStyle = ExcelTableBuiltInStyle.tableStyleDark10; + +final List bytes = workbook.saveAsStream(); +saveAsExcel(bytes, 'BuiltInStyle.xlsx'); +workbook.dispose(); +{% endhighlight %} + +## Table Style Options + +You can customize a table with other table style options such as first column, last column, header row, total row, banded row, and banded column. The following code snippet illustrates the usage. + +### Show First Column + +Enabling the **ShowFirstColumn** property applies default format to first column in the table. Its default value is FALSE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether first column format is present. +table.showFirstColumn = true; +{% endhighlight %} + +### Show Last Column + +Enabling the **ShowLastColumn** property applies default format to last column in the table. Its default value is FALSE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether last column format is present. +table.showLastColumn = true; +{% endhighlight %} + +### Show Header Row + +Disabling the **ShowHeaderRow** property hides the header row of the table. Its default value is TRUE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether to hide/display header row. +table.showHeaderRow = false; +{% endhighlight %} + +### Show Total Row + +Enabling the **ShowTotalRow** property shows the total row of the table. Its default value is FALSE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether to hide/display total row. +table.showTotalRow = true; +{% endhighlight %} + +### Show Banded Rows + +Disabling the **ShowBandedRows** property removes the row stripes for table rows. Its default value is TRUE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether row stripes should be present. +table.showBandedRows = false; +{% endhighlight %} + +### Show Banded Columns + +Enabling the **ShowBandedColumns** property adds the column stripes for table columns. Its default value is FALSE. + +{% highlight dart %} +//Gets or sets a Boolean value indicating whether column stripes should be present. +table.showBandedColumns = true; +{% endhighlight %} + +## Removing a Table + +You can remove the table from Excel document in two ways. They are + +* using table object +* using specific index + +The following code snippet illustrates how to remove a table from an Excel document using the table object. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(1); + +//Access the sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +//Insert data into the sheet. +sheet.getRangeByName('A1').setText('Fruits'); +sheet.getRangeByName('A2').setText('banana'); +sheet.getRangeByName('A3').setText('Cherry'); +sheet.getRangeByName('A4').setText('Banana'); + +sheet.getRangeByName('B1').setText('CostA'); +sheet.getRangeByName('B2').setNumber(744.6); +sheet.getRangeByName('B3').setNumber(5079.6); +sheet.getRangeByName('B4').setNumber(1267.5); + +sheet.getRangeByName('C1').setText('CostB'); +sheet.getRangeByName('C2').setNumber(162.56); +sheet.getRangeByName('C3').setNumber(1249.2); +sheet.getRangeByName('C4').setNumber(1062.5); + +sheet.getRangeByName('F1').setText('Vegetables'); +sheet.getRangeByName('F2').setText('Egg Plant'); +sheet.getRangeByName('F3').setText(Lettuce); +sheet.getRangeByName('F4').setText('Tomato'); + +sheet.getRangeByName('G1').setText('CostA1'); +sheet.getRangeByName('G2').setNumber(744.6); +sheet.getRangeByName('G3').setNumber(5079.6); +sheet.getRangeByName('G4').setNumber(1267.5); + +sheet.getRangeByName('H1').setText('CostB1'); +sheet.getRangeByName('H2').setNumber(162.56); +sheet.getRangeByName('H3').setNumber(1249.2); +sheet.getRangeByName('H4').setNumber(1062.5); + +//Create tables with the data in given range. +final ExcelTable table1 = sheet.tableCollection.create('Table1', sheet.getRangeByName('A1:C4')); +final ExcelTable table2 = sheet.tableCollection.create('Table2', sheet.getRangeByName('F1:H4')); + +//Remove a table from the worksheet. +sheet.tableCollection.remove(table1); + +final List bytes = workbook.saveAsStream(); +saveAsExcel(bytes, 'RemoveTable.xlsx'); +workbook.dispose(); +{% endhighlight %} + +The following code snippet illustrates how to remove a table from an Excel document using a specific index. + +{% highlight dart %} +//Create a new Excel Document. +final Workbook workbook = Workbook(1); + +//Access the sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +//Insert data into the sheet. +sheet.getRangeByName('A1').setText('Fruits'); +sheet.getRangeByName('A2').setText('banana'); +sheet.getRangeByName('A3').setText('Cherry'); +sheet.getRangeByName('A4').setText('Banana'); + +sheet.getRangeByName('B1').setText('CostA'); +sheet.getRangeByName('B2').setNumber(744.6); +sheet.getRangeByName('B3').setNumber(5079.6); +sheet.getRangeByName('B4').setNumber(1267.5); + +sheet.getRangeByName('C1').setText('CostB'); +sheet.getRangeByName('C2').setNumber(162.56); +sheet.getRangeByName('C3').setNumber(1249.2); +sheet.getRangeByName('C4').setNumber(1062.5); + +sheet.getRangeByName('F1').setText('Vegetables'); +sheet.getRangeByName('F2').setText('Egg Plant'); +sheet.getRangeByName('F3').setText(Lettuce); +sheet.getRangeByName('F4').setText('Tomato'); + +sheet.getRangeByName('G1').setText('CostA1'); +sheet.getRangeByName('G2').setNumber(744.6); +sheet.getRangeByName('G3').setNumber(5079.6); +sheet.getRangeByName('G4').setNumber(1267.5); + +sheet.getRangeByName('H1').setText('CostB1'); +sheet.getRangeByName('H2').setNumber(162.56); +sheet.getRangeByName('H3').setNumber(1249.2); +sheet.getRangeByName('H4').setNumber(1062.5); + +sheet.getRangeByName('D6').setText('Product A'); +sheet.getRangeByName('D7').setText('shirt'); +sheet.getRangeByName('D8').setText('bags'); +sheet.getRangeByName('D9').setText('Trousers'); + +sheet.getRangeByName('E6').setText('Cost1'); +sheet.getRangeByName('E7').setNumber(654); +sheet.getRangeByName('E8').setNumber(745); +sheet.getRangeByName('E9').setNumber(187); +sheet.getRangeByName('F6').setText('Cost2'); +sheet.getRangeByName('F7').setNumber(967); +sheet.getRangeByName('F8').setNumber(543); +sheet.getRangeByName('F9').setNumber(864); + +//Create tables with the data in given range. +final ExcelTable table1 = sheet.tableCollection.create('Table1', sheet.getRangeByName('A1:C4')); +final ExcelTable table2 = sheet.tableCollection.create('Table2', sheet.getRangeByName('F1:H4')); + +//Remove a table from the worksheet at the specified index. +sheet.tableCollection.removeAt(1); + +final List bytes = workbook.saveAsStream(); +saveAsExcel(bytes, 'RemoveTable.xlsx'); +workbook.dispose(); +{% endhighlight %} diff --git a/Flutter/xlsio/worksheet-rows-and-columns-manipulation.md b/Flutter/xlsio/worksheet-rows-and-columns-manipulation.md index e433003a2..2a3957ad1 100644 --- a/Flutter/xlsio/worksheet-rows-and-columns-manipulation.md +++ b/Flutter/xlsio/worksheet-rows-and-columns-manipulation.md @@ -183,6 +183,53 @@ workbook.dispose(); {% endhighlight %} +## Show or Hide Rows and Columns +Visibility of rows and columns can be set by using the [showRows](https://pub.dev/documentation/syncfusion_flutter_xlsio/latest/xlsio/Range/showRows.html) and [showColumns](https://pub.dev/documentation/syncfusion_flutter_xlsio/latest/xlsio/Range/showColumns.html) methods as shown below. +{% highlight dart %} + +// Create a new Excel Document. +final Workbook workbook = Workbook(1); + +// Accessing sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +// Show or hide rows in the given range. TRUE by default. +sheet.getRangeByName('A1').showRows(false); +sheet.getRangeByName('A2:A5').showRows(false); + +// Show or hide columns in the given range. TRUE by default. +sheet.getRangeByName('C10').showColumns(false); +sheet.getRangeByName('D10:E10').showColumns(false); + +// Save and dispose workbook. +final List? bytes = workbook.saveAsStream(); +File('HideRowsAndColumns.xlsx').writeAsBytes(bytes!); +workbook.dispose(); + +{% endhighlight %} + +## Show or Hide Specific Range + +The following code snippet shows how to set the visibility for a specific range through [showRange](https://pub.dev/documentation/syncfusion_flutter_xlsio/latest/xlsio/Range/showRange.html) method . + +{% highlight dart %} + +// Create a new Excel Document. +final Workbook workbook = Workbook(1); + +// Accessing sheet via index. +final Worksheet sheet = workbook.worksheets[0]; + +// Show or hide rows and columns in the given range. TRUE by default. +sheet.getRangeByName('G15').showRange(false); +sheet.getRangeByName('J22:J25').showRange(false); + +// Save and dispose workbook. +final List? bytes = workbook.saveAsStream(); +File('HideRowsAndColumns.xlsx').writeAsBytes(bytes!); +workbook.dispose(); + +{% endhighlight %} diff --git a/flutter-toc.html b/flutter-toc.html index ec5def4db..05d8d61c0 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -138,6 +138,7 @@
  • Selection
  • Exporting
  • On-demand loading
    • +
  • Localization
  • Right to Left (RTL)
  • Accessibility
  • Public Methods
    • @@ -505,11 +506,13 @@
  • Security
  • Working with Conditional Formatting
  • Working with Data
    • +
  • Working with Data Validation
    • +
  • Working with Tables
  • Release Notes -