Essential Studio

for Flutter
Version - v17.4.0.39 | Release Date - December 17,2019
Syncfusion Flutter Widgets ...................................................................................................................... 9
How to best read this user guide ......................................................................................................... 9
Additional help resources .................................................................................................................... 9
Create a support incident .................................................................................................................... 9
System Requirements.............................................................................................................................. 9
Development Environment .............................................................................................................. 9
SDK Version ..................................................................................................................................... 9
Supported Platforms ........................................................................................................................ 9
Download Installer ................................................................................................................................ 10
Download the Trial Version................................................................................................................ 10
Free Trial Page ............................................................................................................................... 10
Start Trial Page .............................................................................................................................. 10
Download the License Version ........................................................................................................... 11
Installation and Upgrade ....................................................................................................................... 12
Installation..................................................................................................................................... 12
Uninstallation ................................................................................................................................ 22
Installation and Uninstallation ....................................................................................................... 26
Installation using Offline Installer....................................................................................................... 33
Installing with UI ............................................................................................................................ 33
Installing in silent mode ................................................................................................................. 38
Mac Installation ................................................................................................................................. 40
Installation FAQ ................................................................................................................................. 46
Upgrade from one version to another version. .................................................................................. 46
Upgrade from major version to service pack version .......................................................................... 46
Upgrade from trial version to license version ................................................................................. 46
Charts.................................................................................................................................................... 46
Overview ........................................................................................................................................... 46
Key Features .................................................................................................................................. 47
Getting Started .................................................................................................................................. 47
Add Flutter Charts to an application ............................................................................................... 47
Initialize chart ................................................................................................................................ 48
Bind data source ............................................................................................................................ 49
Add title......................................................................................................................................... 50
Enable data labels .......................................................................................................................... 52
Enable legend ................................................................................................................................ 53
 Enable tooltip ................................................................................................................................ 54
Title ................................................................................................................................................... 56
Cartesian chart types ......................................................................................................................... 58
Line chart....................................................................................................................................... 58
Fast line chart ................................................................................................................................ 62
Area chart ...................................................................................................................................... 63
Spline chart.................................................................................................................................... 65
Column chart ................................................................................................................................. 69
Bar chart ........................................................................................................................................ 74
Bubble chart .................................................................................................................................. 79
Scatter chart .................................................................................................................................. 82
Step line chart ............................................................................................................................... 84
Range column chart ....................................................................................................................... 86
Range area chart............................................................................................................................ 89
Spline area chart ............................................................................................................................ 91
Step area chart .............................................................................................................................. 94
Stacked line chart .......................................................................................................................... 96
Stacked area chart ....................................................................................................................... 100
Stacked column chart .................................................................................................................. 105
Stacked bar chart ......................................................................................................................... 109
100% Stacked Area Chart ............................................................................................................. 114
100% Stacked Column Chart ........................................................................................................ 115
100% Stacked Bar Chart ............................................................................................................... 118
100% Stacked Line Chart .............................................................................................................. 120
Circular Chart Types......................................................................................................................... 122
Pie chart ...................................................................................................................................... 122
Doughnut chart ........................................................................................................................... 130
Radial bar chart ........................................................................................................................... 139
Pyramid Chart.................................................................................................................................. 144
Pyramid modes ............................................................................................................................ 146
Changing pyramid size ................................................................................................................. 146
Gap between segments ............................................................................................................... 147
Explode segments ........................................................................................................................ 148
Smart data labels ......................................................................................................................... 149
Applying palette color .................................................................................................................. 150
Funnel Chart .................................................................................................................................... 151
Changing funnel size .................................................................................................................... 152
Changing neck size ....................................................................................................................... 153
Gap between segments ............................................................................................................... 154
Explode segments ........................................................................................................................ 155
Smart data labels ......................................................................................................................... 156
Applying palette color .................................................................................................................. 157
Multiple and Combinational Charts.................................................................................................. 158
Multiple series ............................................................................................................................. 158
Combination series ...................................................................................................................... 159
Series customization ........................................................................................................................ 160
Animation.................................................................................................................................... 160
Transpose the series .................................................................................................................... 161
Color palette................................................................................................................................ 162
Color mapping for data points ..................................................................................................... 163
Gradient fill.................................................................................................................................. 165
Empty points ............................................................................................................................... 166
Sorting ......................................................................................................................................... 168
Axis ................................................................................................................................................. 170
Numeric axis ................................................................................................................................ 170
Category axis ............................................................................................................................... 178
Date-time axis.............................................................................................................................. 182
Logarithmic axis ........................................................................................................................... 189
Axis customization ........................................................................................................................... 192
Common axis features ................................................................................................................. 192
Smart axis labels .......................................................................................................................... 206
Axis crossing ................................................................................................................................ 207
Plot bands.................................................................................................................................... 211
Multiple axes ............................................................................................................................... 216
Marker and data label ..................................................................................................................... 218
Marker ........................................................................................................................................ 218
Data label .................................................................................................................................... 222
Legend ............................................................................................................................................ 233
Customizing legend...................................................................................................................... 234
Legend title.................................................................................................................................. 236
 Toggles the series visibility ........................................................................................................... 238
Legend visibility ........................................................................................................................... 238
Legend item visibility ................................................................................................................... 239
Legend overflow .......................................................................................................................... 240
Positioning the legend ................................................................................................................. 241
Legend item template .................................................................................................................. 242
Appearance ..................................................................................................................................... 243
Chart sizing .................................................................................................................................. 243
Chart margin................................................................................................................................ 244
Plot area customization ............................................................................................................... 245
Annotation ...................................................................................................................................... 246
Positioning the annotation........................................................................................................... 247
Adding multiple annotation ......................................................................................................... 249
Adding annotation for multiple axes ............................................................................................ 250
Zooming and Panning ...................................................................................................................... 252
Pinch zooming ............................................................................................................................. 252
Double tap zooming ..................................................................................................................... 253
Selection zooming........................................................................................................................ 253
Auto interval on zooming ............................................................................................................. 256
Maximum zoom level................................................................................................................... 256
Trackball and Crosshair .................................................................................................................... 257
Trackball ...................................................................................................................................... 257
Crosshair ..................................................................................................................................... 263
Tooltip ............................................................................................................................................. 266
Customizing the appearance ........................................................................................................ 267
Label format ................................................................................................................................ 268
Tooltip positioning ....................................................................................................................... 269
Tooltip template .......................................................................................................................... 269
Activation mode .......................................................................................................................... 270
Selection ......................................................................................................................................... 271
Customizing the segments ........................................................................................................... 271
Selection modes .......................................................................................................................... 273
Multi-selection ............................................................................................................................ 274
Selection on initial rendering ....................................................................................................... 275
Cartesian chart methods .................................................................................................................. 276
 Show method in tooltipBehavior.................................................................................................. 276
Hide method in tooltipBehavior ................................................................................................... 277
Show method in trackballBehavior............................................................................................... 278
Hide method in trackballBehavior ................................................................................................ 278
Show method in crosshairBehavior .............................................................................................. 279
Hide method in crosshairBehavior ............................................................................................... 280
SelectionIndex method in selectionSettings ................................................................................. 281
ZoomIn method in zoomPanBehavior .......................................................................................... 282
ZoomOut method in zoomPanBehavior ....................................................................................... 283
zoomByFactor method in zoomPanBehavior ................................................................................ 283
ZoomByRect method in zoomPanBehavior .................................................................................. 284
ZoomToSingleAxis method in zoomPanBehavior .......................................................................... 285
PanToDirection method in zoomPanBehavior .............................................................................. 286
Reset method in zoomPanBehavior ............................................................................................. 287
Events ............................................................................................................................................. 288
onTooltipRender .......................................................................................................................... 288
onActualRangeChanged ............................................................................................................... 289
onAxisLabelRender ...................................................................................................................... 289
onDataLabelRender ..................................................................................................................... 290
onLegendItemRender .................................................................................................................. 290
onTrackballPositionChanging ....................................................................................................... 291
onCrosshairPositionChanging....................................................................................................... 291
onZooming .................................................................................................................................. 292
onZoomStart................................................................................................................................ 292
onZoomEnd ................................................................................................................................. 293
onZoomReset .............................................................................................................................. 294
onPointTapped ............................................................................................................................ 294
onAxisLabelTapped ...................................................................................................................... 295
onLegendTapped ......................................................................................................................... 295
onSelectionChanged .................................................................................................................... 295
onLegendItemRender .................................................................................................................. 296
onTooltipRender .......................................................................................................................... 297
onDataLabelRender ..................................................................................................................... 297
onPointTapped ............................................................................................................................ 298
onLegendTapped ......................................................................................................................... 298
 onSelectionChanged .................................................................................................................... 299
Radial Gauge ....................................................................................................................................... 299
Overview ......................................................................................................................................... 299
Key Features ................................................................................................................................ 300
Getting Started ................................................................................................................................ 301
Add Flutter Radial Gauge to an application .................................................................................. 301
Initialize the radial gauge ............................................................................................................. 301
Add title....................................................................................................................................... 302
Add axis ....................................................................................................................................... 303
Add range .................................................................................................................................... 304
Add pointer ................................................................................................................................. 305
Add annotation ............................................................................................................................ 306
Title ................................................................................................................................................. 308
Text Alignment ............................................................................................................................ 308
Axis ................................................................................................................................................. 309
Axis Customization....................................................................................................................... 309
Label style customization ............................................................................................................. 324
Tick customization ....................................................................................................................... 328
Multiple axis ................................................................................................................................ 336
Events.......................................................................................................................................... 337
Custom scale ............................................................................................................................... 339
Pointers ........................................................................................................................................... 340
Multiple pointers ......................................................................................................................... 341
Pointer Dragging .......................................................................................................................... 342
Event ........................................................................................................................................... 343
Marker pointer ................................................................................................................................ 344
Image pointer .............................................................................................................................. 345
Text pointer ................................................................................................................................. 346
Marker Customization ................................................................................................................. 346
Position customization................................................................................................................. 347
Needle Pointer ................................................................................................................................ 348
Needle customization .................................................................................................................. 349
Knob customization ..................................................................................................................... 352
Tail Customization ....................................................................................................................... 354
Range Pointer .................................................................................................................................. 357
 Corner customization................................................................................................................... 360
Position customization................................................................................................................. 361
Range .............................................................................................................................................. 362
Range Customization ................................................................................................................... 363
Setting range color to axis elements ............................................................................................ 366
Range label .................................................................................................................................. 367
Annotation ...................................................................................................................................... 368
Setting image for annotation ....................................................................................................... 371
Alignment of annotation .............................................................................................................. 372
Animation........................................................................................................................................ 374
Initial animation........................................................................................................................... 374
Pointer Animation ....................................................................................................................... 375
Syncfusion Flutter Widgets How to best read this user guide

Syncfusion Flutter Widgets

The Syncfusion Flutter UI widgets is the suite you ever need to create rich and high-quality mobile
applications in iOS and Android with single code base. It also includes charts widgets.
How to best read this user guide

• The best way to read the user guide is to start with the Getting Started section of the
documentation for the component that you need. The Getting Started guide gives information
needed to know before writing the code. This is the only section recommended for end-to-end
reading before writing the code. All the other information can be referred when needed.
• Now, that you are familiar with the basics of using the component, and the next step would be
to start integrating the component into your application. It is very likely that you would find a
code example that resembles your intended usage scenario.
• After you have integrated the component into your application, it is likely that you would need
additional information on specific features and API. Search the specific topic using the search
box available at the top of the user guide.
• Another valuable resource is the API reference that provides detailed information on the classes
and its members.

Additional help resources

The Knowledge Base section contains responses for some of the most common questions other
customers asked in the past. You can search for topics that are not covered in the user guide.
Similar to the Knowledge Base, the Forum section also contains responses for questions of other
customers asked in the past.
Create a support incident
In case, you are not able to find the information that you are looking for in the self-help resources
mentioned above, then please contact us by creating a support ticket.

System Requirements
Development Environment
Refer to the following links for recommended development environment in Flutter.

• Windows - https://flutter.dev/docs/get-started/install/windows
• MacOS - https://flutter.dev/docs/get-started/install/macos
• Linux - https://flutter.dev/docs/get-started/install/linux

SDK Version
The minimum Flutter SDK version required for our component is v1.7.8
Supported Platforms
The following table lists the platforms supported by our Flutter controls.
Platform Device Types Supported Versions

Android Phone, Tablet API level 16 and later versions

Copyright © 2001 - 2019 Syncfusion Inc. 9

Download Installer Download the Trial Version

iOS iPhone, iPod, iPad iOS 8 and later versions

Download Installer
You can download the installer from Syncfusion.com website.
Download the Trial Version
There are two ways to download our 30-day trial.
Free Trial Page

1. You can evaluate our 30-day free trial from Free Trial page.
2. Once you fill the required form or made the login using the your Syncfusion registered account
you can download the trial installer setup in the confirmation page.
3. You can download the latest version trial installer.
4. You can unlock the installer using the unlock key, also you can unlock the installer using the
Syncfusion registered login credential.
5. You can download the trial installer using the Trials & Downloads page under your registered
account at any time before the trial expire. (Refer the below screenshot).

Start Trial Page

1. You can evaluate our 30-day free trial from Start Trial page.
2. You should login using your Syncfusion account to access this page.
3. You can start your trail by clicking on the required product.

Note: If you already using the trail products and it’s not expired, you couldn’t start the trial again for
same product.

4. After you started the trial, you can download the latest version trial installer using the Trials &
Downloads page.
5. In Trials & Downloads page, you can find your current active trial products. Trials, which you
done in both Free Trial Page and Start trial pages are listed here.
6. Use the Download (element 1 in below screenshot) button to download the installer of
respective product.
7. Online installer can be downloaded from this page.
8. No need of unlock key to unlock the online installer.
9. You can unlock the installer using the Syncfusion registered login credential.

Copyright © 2001 - 2019 Syncfusion Inc. 10

Download Installer Download the License Version

Note: You can generate the license key for your active trial products from Trials & Downloads page. This
license key will be mandatory to use our trial products in your application. To know more about License
key, refer this help topic.
Download the License Version

1. You can find your available licensed products which under your registered Syncfusion account in
License & Downloads page.
2. You can find all the licenses (both active licenses and expired licenses) which are under your
account.
3. You can find the licenses listed based on SKU names.
4. Use the Download (element 1 in below screenshot) button to download the installer of
respective product.
5. Latest version installer will be downloaded from this page.
6. You can navigate to Downloads Older Versions (element 2 in below screenshot) to download
older version installers.
7. From 16.2 version online installer will be downloaded by default, and earlier versions offline
installer will be downloaded.

Note: Online Installer have been introduced from the release version 16.2.

8. You can navigate to More Downloads Options (element 3 in below screenshot) to download
other setups.
9. EXE and Zip format available to download for Windows OS. Both are Offline Installer.
10. No need of unlock key to unlock the online installer.
11. You can unlock the installer using the unlock key for versions earlier to 16.2, also you can unlock
the installer using the Syncfusion registered login credential.

Note: You can generate the license key for your licensed products from License & Downloads page. This
license key will be required only from release version 16.2. To know more about License key, refer this
help topic.

Copyright © 2001 - 2019 Syncfusion Inc. 11

Installation and Upgrade Download the License Version

Installation and Upgrade

Installation
The following procedure illustrates how to install Essential Studio Platform Online Installer setup.

1. Double-click the Syncfusion Essential Studio Platform Online Installer setup file. The Setup
Wizard opens and extracts the package automatically.

Copyright © 2001 - 2019 Syncfusion Inc. 12

Installation and Upgrade Download the License Version

Note: The Setup wizard extracts the syncfusion{platform}webinstaller_{version}.exe dialog, displaying

the unzip operation of the package.

2. Welcome wizard of the Syncfusion Online Installer will be displayed. Click Next.


3. Platform Selection wizard will be displayed. Select the platforms to be installed from the
Available tab. Select

Copyright © 2001 - 2019 Syncfusion Inc. 13

Installation and Upgrade Download the License Version

Install All checkbox to select all the platforms. Click Next.


Copyright © 2001 - 2019 Syncfusion Inc. 14

Installation and Upgrade Download the License Version

Information: If the required software of the selected platform was not already installed,

Copyright © 2001 - 2019 Syncfusion Inc. 15

Installation and Upgrade Download the License Version

Additional Software Required alert will be displayed. However, you can continue the installation and
install the required software later.

4. Confirmation wizard will be displayed. Here you can view and modify the list of platforms that
will be installed.


Note: You can check the Estimated size of the Download and Installation by clicking the

Copyright © 2001 - 2019 Syncfusion Inc. 16

Installation and Upgrade Download the License Version

Download Size and Installation Size link.


5. Configuration wizard will be displayed. Here you can change the Download, Install and samples
location. Also, you can change the Additional settings by platform basis. To install using the
default configuration, click Next.


Information: From version 17.3 (2019 Vol 3), Syncfusion provides option to provide custom download
location.
Note: From the 2018 Volume 2 release, Syncfusion has changed the install and samples location
Default Install location: {ProgramFilesFolder}\Syncfusion\{Platform}\{version}
Default Samples location: C:\Users\Public\Documents\Syncfusion\{platform}\{version}
However, you can change the locations by clicking browse button.

• Select the Install Demos check box to install Syncfusion samples, or leave the check box clear,
when you do not want to install Syncfusion samples.
• Select the Create Desktop Shortcut checkbox to create the desktop shortcut for Syncfusion
Control Panel or leave the check box clear, when you do not want to create desktop shortcut.

Copyright © 2001 - 2019 Syncfusion Inc. 17

Installation and Upgrade Download the License Version

6. After reading the License Terms and Conditions, check the I agree to the License Terms and
Privacy Policy check box. Click Next.
7. Login wizard will be displayed. You should enter your Syncfusion Direct-Trac login credentials. If
you don't have Syncfusion Direct-Trac login credentials, then you can click on Create an
Account. Else if you forgot your password, click on

Forgot Password to create new password. Click Install.


Copyright © 2001 - 2019 Syncfusion Inc. 18

Installation and Upgrade Download the License Version

Information: The selected platforms will be installed based on your Syncfusion License (Trial or
Licensed).

8. Download and Installation progress will be displayed.


Copyright © 2001 - 2019 Syncfusion Inc. 19

Installation and Upgrade Download the License Version

9. Once the Installation is complete,

Summary wizard will be displayed. Here you can check the list of platforms which are installed
successfully and failed. Click Finish to exit the Summary wizard.


Copyright © 2001 - 2019 Syncfusion Inc. 20

Installation and Upgrade Download the License Version

• Click

Launch
Control Panel to open the Syncfusion Control Panel.

Copyright © 2001 - 2019 Syncfusion Inc. 21

Installation and Upgrade Download the License Version

Uninstallation
Till version 17.2, Syncfusion Web Installer had option for installation alone. Starting with the version
17.3 (2019 Vol 3), Syncfusion provides option for uninstalling the platforms of the same version from the
Web Installer application itself. Select the list of the platforms to be uninstalled and Web Installer will
uninstall those platforms one by one.
The following procedure illustrates how to uninstall Essential Studio Platform from Web Installer setup.

1. Double-click the Syncfusion Essential Studio Platform Online Installer setup file. The Setup
Wizard opens and extracts the package automatically.


2. Welcome wizard of the Syncfusion Online Installer will be displayed. Click Next.


3. Platform Selection wizard will be displayed. Select the platforms to be uninstalled from the
Installed tab. Select

Copyright © 2001 - 2019 Syncfusion Inc. 22

Installation and Upgrade Download the License Version

Uninstall All checkbox to select all the platforms. Click Next.

Copyright © 2001 - 2019 Syncfusion Inc. 23

Installation and Upgrade Download the License Version


4. Confirmation wizard will be displayed. Here you can view and modify the list of platforms that
will be uninstalled. Click Uninstall.


5. Uninstallation progress will be displayed.


6. Once the Uninstallation is complete,

Copyright © 2001 - 2019 Syncfusion Inc. 24

Installation and Upgrade Download the License Version

Summary wizard will be displayed. Here you can check the list of platforms which are
uninstalled successfully and failed. Click Finish to exit the Summary wizard.

Copyright © 2001 - 2019 Syncfusion Inc. 25

Installation and Upgrade Download the License Version

Installation and Uninstallation
Till version 17.2, Syncfusion Web Installer had option for installation alone. Starting with the version
17.3 (2019 Vol 3), Syncfusion provides option for both install and uninstall the platforms of the same
version from the Web Installer application itself.
The following procedure illustrates how to install/uninstall Essential Studio Platform from Web Installer
setup.

1. Double-click the Syncfusion Essential Studio Platform Online Installer setup file. The Setup
Wizard opens and extracts the package automatically.


2. Welcome wizard of the Syncfusion Online Installer will be displayed. Click Next.


3. Platform Selection wizard will be displayed. Select the platforms to be installed from the
Available tab and platforms to be uninstalled from the Installed tab. Click Next.

Available

Copyright © 2001 - 2019 Syncfusion Inc. 26

Installation and Upgrade Download the License Version

Installed

Copyright © 2001 - 2019 Syncfusion Inc. 27

Installation and Upgrade Download the License Version


4. Confirmation wizard will be displayed. Here you can view and modify the list of platforms that
will be installed/uninstalled.


Note: You can check the Estimated size of the Download and Installation by clicking the

Copyright © 2001 - 2019 Syncfusion Inc. 28

Installation and Upgrade Download the License Version

Download Size and Installation Size link.


5. Configuration wizard will be displayed. Here you can change the Download, Install and samples
location. Also, you can change the Additional settings by platform basis. To install using the
default configuration, click Next.


Information: From version 17.3 (2019 Vol 3), Syncfusion provides option to provide custom download
location.

6. After reading the License Terms and Conditions, check the I agree to the License Terms and
Privacy Policy check box. Click Next.
7. Login wizard will be displayed. You should enter your Syncfusion Direct-Trac login credentials. If
you don't have Syncfusion Direct-Trac login credentials, then you can click on Create an
Account. Else if you forgot your password, click on

Copyright © 2001 - 2019 Syncfusion Inc. 29

Installation and Upgrade Download the License Version

Forgot Password to create new password. Click Install.


Copyright © 2001 - 2019 Syncfusion Inc. 30

Installation and Upgrade Download the License Version

Information: The selected platforms will be installed based on your Syncfusion License (Trial or
Licensed).

8. Download, Installation and Uninstallation progress will be displayed.

![Download and Installation progress install/uninstall](WebInstaller/Step-by-Step-

Installation_img17.png)

9. Once the Installation is complete, Summary wizard will be displayed. Here you can check the list
of platforms which are

Copyright © 2001 - 2019 Syncfusion Inc. 31

Installation and Upgrade Download the License Version

installed/uninstalled successfully and failed. Click Finish to exit the Summary wizard.


Copyright © 2001 - 2019 Syncfusion Inc. 32

Installation and Upgrade Installation using Offline Installer

• Click Launch
Control Panel to open the Syncfusion Control Panel.

Installation using Offline Installer

Installing with UI
The following procedure illustrates how to install Essential Studio Flutter platform.

1. Close all the running Visual Studio instances.

2. Double-click the Syncfusion Flutter platform Setup file. The Setup Wizard opens and extracts the
package automatically.

Note: The Setup wizard extracts the syncfusionessentialflutter_(version).exe dialog, displaying the unzip
operation of the package.

3. You have two options to unlock the Syncfusion setup:

• Login To Install
• Use Unlock Key

Copyright © 2001 - 2019 Syncfusion Inc. 33

Installation and Upgrade Installation using Offline Installer

Login To Install
You should enter your Syncfusion Direct-Trac login credentials. If you don't have Syncfusion Direct-Trac
login credentials, then you can click on Sign Up to a create new account. Else if you forgot your
password, click on Reset Password to create new password. Here Email address and Password is
validated and the Platform Selection window opens.
Use Unlock Key
You should use the Syncfusion License/Trial key. Trial key is valid for 30 days and the installer won't
accept the expired trial key. Licensed customer can generate key from here.

Copyright © 2001 - 2019 Syncfusion Inc. 34

Installation and Upgrade Installation using Offline Installer

4. After reading the License Terms and Conditions, check the I agree to the License Terms and
Conditions check box.

5. Click Next. Select the Installation, Samples Folder and Advanced Options screen opens. To install
in the displayed default location, click Install

Copyright © 2001 - 2019 Syncfusion Inc. 35

Installation and Upgrade Installation using Offline Installer

Note: From the 2018 Volume 2 release, Syncfusion has changed the install and samples location
Default Install location: {ProgramFilesFolder}\Syncfusion\{Platform}\{version}
Default Samples location: C:\Users\Public\Documents\Syncfusion\{platform}\{version}
However, you can change the locations by clicking browse button.

• Select the Install Demos check box to install Syncfusion samples, or leave the check box clear,
when you do not want to install Syncfusion samples.
• Select the Create Desktop Shortcut checkbox to create the desktop shortcut for Syncfusion
Control Panel or leave the check box clear, when you do not want to create desktop shortcut.

Copyright © 2001 - 2019 Syncfusion Inc. 36

Installation and Upgrade Installation using Offline Installer

6. Click Install.

7. The Completed screen is displayed once the Flutter platform is installed.

Copyright © 2001 - 2019 Syncfusion Inc. 37

Installation and Upgrade Installation using Offline Installer

8. Select the Run Syncfusion Control Panel check box to launch the Syncfusion Control Panel after
installing.

9. Click Finish. Syncfusion Flutter platform is installed in your system and the Syncfusion Essential
Studio Syncfusion Control Panel is launched automatically.

Installing in silent mode

The Syncfusion Essential Studio Platform Installer supports installing/uninstalling the setup through
Command Line. The following sections illustrate this ability.

Copyright © 2001 - 2019 Syncfusion Inc. 38

Installation and Upgrade Installation using Offline Installer

Command Line Installation

Follow the steps below to install through Command Line in Silent mode.

1. Double-click the Syncfusion Essential Studio platform setup file. The Setup Wizard opens and
extracts the package automatically.
2. The syncfusionessentialflutter_(version).exe file is extracted into the Temp folder.
3. Run %temp%. The Temp folder will open. The syncfusionessentialflutter_(version).exe file is
available in one of the folders.
4. Copy the extracted syncfusionessentialflutter_(version).exe file in local drive.
5. Cancel the Wizard.
6. Open the Command Prompt in administrator mode and pass the following arguments.

Arguments: “Setup file path\SyncfusionEssentialStudio(platform)_(version).exe” /Install silent

/PIDKEY:“(product unlock key)” [/log “{Log file path}”] [/InstallPath:{Location to install}]
[/InstallSamples:{true/false}] [/InstallAssemblies:{true/false}] [/UninstallExistAssemblies:{true/false}]
[/InstallToolbox:{true/false}]
Note: [..] – Arguments inside the square brackets are optional.
Example: “D:\Temp\syncfusionessentialflutterx.x.x.x.exe” /Install silent /PIDKEY:“product unlock key”
/log “C:\Temp\EssentialStudioPlatform.log” /InstallPath:C:\Syncfusion\x.x.x.x /InstallSamples:true
/InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true

7. Setup is installed.

Note: x.x.x.x needs to be replaced with the Essential Studio version and the Product Unlock Key needs
to be replaced with the Unlock Key for that version.
Command Line Uninstallation
Syncfusion Essential Studio supports uninstalling the setup through Command Line in Silent mode. The
following steps illustrate this.

1. When you do not have the extracted setup (syncfusionessentialflutter_(version).exe) then

follow the steps from 2 to 7.
2. Double-click the Syncfusion Essential Studio platform setup file. The Setup Wizard opens and
extracts the package automatically.
3. The syncfusionessentialflutter_(version).exe file is extracted into the Temp folder.
4. Run %temp%. The Temp folder will open. The syncfusionessentialflutter_(version).exe file is
available in one of the folders.
5. Copy the syncfusionessentialflutter_(version).exe file in local drive.
6. Cancel the Wizard.
7. Open the Command Prompt in administrator mode and pass the following arguments.

Arguments: “Copied setup file path\syncfusionessentialflutter_(version).exe” /uninstall silent

Example: “D:\Temp\syncfusionessentialflutter_x.x.x.x.exe" /uninstall silent

8. Setup is uninstalled.

Copyright © 2001 - 2019 Syncfusion Inc. 39

Installation and Upgrade Mac Installation

Note: x.x.x.x needs to be replaced with the Essential Studio version installed in your machine.
Mac Installation
The following procedure illustrates how to install Flutter Mac installer.

1. Double-click the Syncfusion Flutter Mac Setup(.pkg) file. The Setup Wizard opens. Click
Continue.

2. Software License Agreement window opens. Click Continue.

Copyright © 2001 - 2019 Syncfusion Inc. 40

Installation and Upgrade Mac Installation

3. Confirmation window will be displayed for the License Agreement. Click Agree.

Copyright © 2001 - 2019 Syncfusion Inc. 41

Installation and Upgrade Mac Installation

Note: Unlock key is not required for installing the Mac installer. Syncfusion Mac installer can be used for
developing purposes without registering the Unlock key.

4. Installation Type window opens. Click Install.

Copyright © 2001 - 2019 Syncfusion Inc. 42

Installation and Upgrade Mac Installation

5. Authentication window opens. Provide the password and click Install Software

Copyright © 2001 - 2019 Syncfusion Inc. 43

Installation and Upgrade Mac Installation

6. Installation will be started in your machine.

Copyright © 2001 - 2019 Syncfusion Inc. 44

Installation and Upgrade Mac Installation

7. Completed screen will be displayed once the installation is finished. Click Close to exit the
installation wizard.

By default, Mac installer will install the files in following location.

Location: {Documents}\Syncfusion\ {version}\ {platform}

Copyright © 2001 - 2019 Syncfusion Inc. 45

Charts Installation FAQ

Installation FAQ
Refer this topic for more information regarding the issues related to installation.
Upgrade from one version to another version.
You can upgrade to the latest version by downloading and installing the platforms you require from this
link.
Upgrade from major version to service pack version
Syncfusion provides a new Volume release once in every three months which has exciting new features.
For that Volume release, there may be one or two Service Pack releases. The issues in the Volume
release will be addressed in the Service Pack releases. You can download and install the latest Service
Pack setup here.
It is not required to install the Volume release setup before installing the Service Pack release setup. As
Volume and Service Packs releases works independently, you can directly install the latest Service Pack
setup which contains major issue fixes.
Upgrade from trial version to license version
To upgrade from trial version, there are two possible solutions.

• Uninstall the trial version and install the fully licensed build from the License & Downloads
section of our website.
• Replace the currently used trial license key with a paid license key that can be generated from
the License & Downloads section of our website.

Charts
Overview
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and
high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.

Copyright © 2001 - 2019 Syncfusion Inc. 46

Charts Getting Started

Key Features

• Supports more than 10 different series types such as line, column, area, bar, bubble, fast line,
scatter, spline, stepline, pie, doughnut, and radial bar series. Each type represents data in a
unique style. It is more user friendly and has greater UI visualization.
• Plots data against multiple scales that help to visualize the mixed types of data in a single chart.
• Supports to render multiple series at the same time with options to compare and visualize two
different chart series simultaneously.
• Provides various options to customize the chart features, axis, labels, legends, series, etc. and
visualize them accordingly.

You can get the sample in the following link: Flutter Charts.
Getting Started
This section explains the steps required to populate the chart with data, title, data labels, legend, and
tooltips. This section covers only the minimal features needed to know to get started with the chart.
To get start quickly with our Flutter chart widget, you can check on this video.
<style>#flutterChartVideoTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutterChartVideoTutorial' src='https://www.youtube.com/embed/t3Dczqj8-10'></iframe>
Add Flutter Charts to an application
Create a simple project using the instructions given in the Getting Started with your first Flutter app
documentation.
Add dependency

Copyright © 2001 - 2019 Syncfusion Inc. 47

Charts Getting Started

Add the Syncfusion Flutter Chart dependency to your pub spec file.
DART
dependencies:
syncfusion_flutter_charts: ^1.0.0-beta.3

Get packages
Run the following command to get the required packages.
DART
$ flutter pub get

Import package
Import the following package in your Dart code.
DART
import 'package:syncfusion_flutter_charts/charts.dart';

Initialize chart
Once the package has been imported, initialize the chart as a child of any widget. There are two kinds of
chart widgets - SfCartesianChart and SfCircularChart. SfCartesianChart is used to render all kinds of
charts which need to be plotted in Cartesian coordinates. SfCircularChart can be used to render pie,
doughnut and radial bar charts. Here, as we are plotting line chart, initialize SfCartesianChart widget as a
child of Container widget.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
//Initialize chart
child: SfCartesianChart()
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 48

Charts Getting Started

Bind data source

Based on your data, initialize the appropriate axis type and series type. In the series, you need to map
the data source and the fields for x and y data points. Here, line series is rendered with category axis
that is demonstrated in the following code snippet.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
dataSource: [
// Bind data source
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,

Copyright © 2001 - 2019 Syncfusion Inc. 49

Charts Getting Started

yValueMapper: (SalesData sales, _) => sales.sales

)
]
)
)
)
);
}
class SalesData{
SalesData(this.year, this.sales);
final String year;
final double sales;
}

Add title
You can add a title 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(

Copyright © 2001 - 2019 Syncfusion Inc. 50

Charts Getting Started

// Chart title text

title: ChartTitle(text: 'Half yearly sales analysis'),
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
dataSource: [
// Bind data source
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 51

Charts Getting Started

Enable data labels

You can add data labels to improve the readability of the chart using the
SfCartesianChart.dataLabelSettings property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
title: ChartTitle(text: 'Half yearly sales analysis'),
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
dataSource: [
// Bind data source
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
// Render the data label
dataLabelSettings:DataLabelSettings(isVisible : true)
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 52

Charts Getting Started

Enable legend
The legend provides information about the series rendered in the chart.
You can use legend in chart by setting the isVisible property to true in SfCartesianChart.legend.
Additionally, you need to set label for each series using the series.name property. The labels will be
displayed in corresponding legends.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Enables the legend
legend: Legend(isVisible: true),
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
dataSource: [
// Bind data source
SalesData('Jan', 35),
SalesData('Feb', 28),

Copyright © 2001 - 2019 Syncfusion Inc. 53

Charts Getting Started

SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
name: 'Sales'
)
]
)
)
)
);
}

Enable tooltip
The tooltip is used when you cannot display information using the data labels due to space constraints.
The tooltipBehavior property in chart is used to enable and customize the tooltip for all the series
whereas the enableTooltip property in series is used to toggle the tooltip visibility of each series. The
tooltip is enabled as demonstrated in the following code snippet.
DART
@override
Widget build(BuildContext context) {
return Scaffold(

Copyright © 2001 - 2019 Syncfusion Inc. 54

Charts Getting Started

appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
child: SfCartesianChart(
// Enables the tooltip for all the series in chart
tooltipBehavior: TooltipBehavior(enable: true),
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
// 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)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 55

Charts Title

You can find the complete getting started sample from this link.
Title
You can define and customize the Chart title using title property of SfCartesianChart. The text property
of ChartTitle is used to set the text for the title.
Following properties are used to customize its appearance.

• backgroundColor – used to change the background color.

• borderColor – used to change the border color.
• borderWidth – used to change the border width.
• textStyle – used to change the text color, size, font family, fontStyle, and font weight.
• color – used to change the color of the text.
• fontFamily - used to change the font family for chart title.
• fontStyle – used to change the font style for the chart title.
• fontSize - used to change the font size for the chart title.

Text Alignment
You can align the title text content horizontally to the near, center or far of the chart using the
alignment property of the title.
DART
@override
Widget build(BuildContext context) {

Copyright © 2001 - 2019 Syncfusion Inc. 56

Charts Title

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
title: ChartTitle(
text: 'Half yearly sales analysis',
backgroundColor: Colors.lightGreen,
borderColor: Colors.blue,
borderWidth: 2,
// Aligns the chart title to left
alignment: ChartAlignment.near,
textStyle: ChartTextStyle(
color: Colors.red,
fontFamily: 'Roboto',
fontStyle: FontStyle.italic,
fontSize: 14,
)
),
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
// Initialize line series
LineSeries<SalesData, String>(
dataSource: [
// Bind data source
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 57

Charts Cartesian chart types

Cartesian chart types

Line chart
To render a line chart, create an instance of LineSeries, and add it to the series collection property of
SfCartesianChart. The following properties are used to customize the appearance:

• color – Changes the color of the line.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the line.

DART
@override
Widget build(BuildContext context) {
final List<SalesData> chartData = [
SalesData(2010, 35),
SalesData(2011, 28),
SalesData(2012, 34),
SalesData(2013, 32),
SalesData(2014, 40)
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[

Copyright © 2001 - 2019 Syncfusion Inc. 58

Charts Cartesian chart types

// Renders line chart

LineSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}
class SalesData {
SalesData(this.year, this.sales);
final double year;
final double sales;
}

Dashed line
The dashArray property of LineSeries is used to render line series with dashes. Odd value is considered
as rendering size and even value is considered as gap.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(

Copyright © 2001 - 2019 Syncfusion Inc. 59

Charts Cartesian chart types

child: SfCartesianChart(
series: <ChartSeries>[
LineSeries<SalesData, String>(
dataSource: chartData,
// Dash values for line
dashArray: <double>[5,5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Multi-colored line
To render a multi-colored line series, map the individual colors to the data using the pointColorMapper
property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),

Copyright © 2001 - 2019 Syncfusion Inc. 60

Charts Cartesian chart types

series: <ChartSeries>[
LineSeries<SalesData, String>(
dataSource: [
SalesData('Jan', 35, Colors.red),
SalesData('Feb', 28, Colors.green),
SalesData('Mar', 34, Colors.blue),
SalesData('Apr', 32, Colors.pink),
SalesData('May', 40, Colors.black)
],
// Bind the color for all the data points from the data source
pointColorMapper:(SalesData sales, _) => sales.segmentColor,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}
class SalesData {
SalesData(this.year, this.sales, this.segmentColor);
final double year;
final double sales;
final Color segmentColor;
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the line
series further.

Copyright © 2001 - 2019 Syncfusion Inc. 61

Charts Cartesian chart types

Fast line chart

FastLineSeries is a line chart, but it loads faster than LineSeries. You can use this when there are large
number of points to be loaded in a chart. To render a fast line chart, create an instance of
FastLineSeries, and add it to the series collection property of SfCartesianChart. The following properties
are used to customize the appearance of fast line segment:

• color – Changes the color of the line.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders fast line chart
FastLineSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 62

Charts Cartesian chart types

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the fast
line series further.
Area chart
To render an area chart, create an instance of AreaSeries, and add it to the series collection property of
SfCartesianChart. The area chart shows the filled area to represent the data, but when there are more
than a series, this may hide the other series. To get rid of this, increase or decrease the transparency of
the series.
The following properties are used to customize the appearance:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders area chart
AreaSeries<SalesData, double>(
dataSource: chartData,

Copyright © 2001 - 2019 Syncfusion Inc. 63

Charts Cartesian chart types

xValueMapper: (SalesData sales, _) => sales.year,

yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Border customization
The borders of the area chart can be customized using the borderMode property. The default value of
the borderMode property is top. The other values are all and excludeBottom.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
AreaSeries<SalesData, double>(
dataSource: chartData,
color: Colors.deepOrange[300],
borderMode: AreaBorderMode.excludeBottom,
borderColor: Colors.green,
borderWidth: 2,

Copyright © 2001 - 2019 Syncfusion Inc. 64

Charts Cartesian chart types

xValueMapper: (SalesData sales, _) => sales.year,

yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the area
series further.
Spline chart
To render a spline chart, create an instance of SplineSeries, and add it to the series collection property
of SfCartesianChart. The following properties are used to customize the appearance of spline segment:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 65

Charts Cartesian chart types

child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders spline chart
SplineSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Dashed spline
The [dashArray]() property of the SplineSeries is used to render spline series with dashes. Odd value is
considered as rendering size and even value is considered as gap.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[

Copyright © 2001 - 2019 Syncfusion Inc. 66

Charts Cartesian chart types

SplineSeries<SalesData, String>(
dataSource: chartData,
// Dash values for spline
dashArray: <double>[5, 5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Spline rendering types

The splineType allows you to change the spline curve in series. The following types are used in
SplineSeries:

• natural
• monotonic
• cardinal
• clamped

By default, the value of splineType is natural.

Copyright © 2001 - 2019 Syncfusion Inc. 67

Charts Cartesian chart types

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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
SplineSeries<SalesData, double>(
dataSource: chartData,
// Type of spline
splineType: SplineType.cardinal,
cardinalSplineTension: 0.9,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 68

Charts Cartesian chart types

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the spline
series further.
Column chart
To render a column chart, create an instance of ColumnSeries, and add it to the [series]() collection
property of SfCartesianChart. The following properties are used to customize the appearance:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders column chart
ColumnSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 69

Charts Cartesian chart types

Side-by-side series placement

By default, all the column series that have the same x and y-axes are placed side by side in a chart. If you
want to place a series one over the other (overlapped), set the enableSideBySideSeriesPlacement
property of SfCartesianChart to false and configure the width property to differentiate the series. The
following code snippet and screenshot illustrate the overlapped placement of column series.
DART
@override
Widget build(BuildContext context) {
final List<SalesData> chartData = [
SalesData(2010, 35, 23),
SalesData(2011, 38, 49),
SalesData(2012, 34, 12),
SalesData(2013, 52, 33),
SalesData(2014, 40, 30)
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Columns will be rendered back to back
enableSideBySideSeriesPlacement: false,
series: <ChartSeries>[
ColumnSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
),

Copyright © 2001 - 2019 Syncfusion Inc. 70

Charts Cartesian chart types

ColumnSeries<SalesData, double>(
opacity: 0.9,
width: 0.4,
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.loss
)
]
)
)
)
);
}

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 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 71

Charts Cartesian chart types

child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
ColumnSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
width: 0.8, // Width of the columns
spacing: 0.2 // Spacing between the columns
)
]
)
)
)
);
}

Rounded corners
The borderRadius property is used to add the rounded corners to the rectangle.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[

Copyright © 2001 - 2019 Syncfusion Inc. 72

Charts Cartesian chart types

ColumnSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
// Sets the corner radius
borderRadius: BorderRadius.all(Radius.circular(15))
)
]
)
)
)
);
}

Track customization
Renders column with track. Track is a rectangular bar rendered from the start to the end of the axis.
Column series will be rendered above the track. The isTrackVisible property is used to enable the track.
The following properties are used to customize the appearance:

• trackColor – Changes the color of the track.

• trackBorderWidth – Changes the stroke width of the track.
• trackBorderColor – Changes the stroke color of the track.
• trackPadding - Adds padding to the track.

DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 73

Charts Cartesian chart types

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
ColumnSeries<SalesData, double>(
dataSource: chartData,
// Renders the track
isTrackVisible: true,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the
column series further.
Bar chart
To render a bar chart, create an instance of BarSeries, and add it to the series collection property of
SfCartesianChart. The following properties are used to customize the appearance:

• color – Changes the color of the series.

Copyright © 2001 - 2019 Syncfusion Inc. 74

Charts Cartesian chart types

• opacity - Controls the transparency of the chart series.

• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders bar chart
BarSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 75

Charts Cartesian chart types

Bar 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 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
BarSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
width: 0.6, // Width of the bars
spacing: 0.3 // Spacing between the bars
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 76

Charts Cartesian chart types

Rounded corners
The borderRadius property is used to add the rounded corners to the rectangle.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
BarSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
borderRadius: BorderRadius.all(Radius.circular(15))
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 77

Charts Cartesian chart types

Track customization
You can render the bar chart with track. Track is a rectangular bar rendered from the start to the end of
the axis. Bar series will be rendered above the track. The isTrackVisible property is used to enable the
track. The following properties are used to customize the appearance:

• trackColor – Changes the color of the track.

• trackBorderWidth – Changes the stroke width of the track.
• trackBorderColor – Changes the stroke color of the track.
• trackPadding - Adds padding to the track.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
BarSeries<SalesData, double>(
dataSource: chartData,
// Renders the track
isTrackVisible: true,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 78

Charts Cartesian chart types

)
)
);
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the bar
series further.
Bubble chart
To render a bubble chart, create an instance of BubbleSeries, and add it to the series collection property
of SfCartesianChart.
Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, sizeValueMapper is used to map
the size of each bubble segment from data source.

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderColor – Changes the stroke width of the series.
• borderWidth – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(2010, 35, 0.32),
ChartData(2011, 38, 0.21),
ChartData(2012, 34, 0.38),

Copyright © 2001 - 2019 Syncfusion Inc. 79

Charts Cartesian chart types

ChartData(2013, 52, 0.29),

ChartData(2014, 40, 0.34)
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders bubble chart
BubbleSeries<ChartData, double>(
dataSource: chartData,
sizeValueMapper: (ChartData sales, _) => sales.size,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, this.size);
final double x;
final double y;
final double size;
}

Copyright © 2001 - 2019 Syncfusion Inc. 80

Charts Cartesian chart types

Change the min and max radius of bubble

The minimumRadius property is used to change the minimum size of the series and the maximumRadius
property is used to change the maximum size of the series.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
BubbleSeries<ChartData, double>(
dataSource: chartData,
sizeValueMapper: (ChartData sales, _) => sales.size,
minimumRadius:9, // Minimum radius of bubble
maximumRadius: 15, // Maximum radius of bubble
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 81

Charts Cartesian chart types

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the
bubble series further.
Scatter chart
To render a scatter chart, create an instance of ScatterSeries, and add it to the series collection property
of SfCartesianChart. The following properties are used to customize the scatter segment appearance.

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders scatter chart
ScatterSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 82

Charts Cartesian chart types

Change shape and size of the scatter

The shape property is used to change the rendering shape of scatter series. The available shapes are
circle, rectangle, pentagon, verticalLine, horizontalLine, diamond, triangle, image, and invertedTriangle.
If [image]() shape is specified, then you can assign the image using the imageUrl property.
The height and width properties of markerSettings are used to change the height and width of the
scatter series, respectively.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
ScatterSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y,
markerSettings: MarkerSettings(
height: 15,
width: 15,
// Scatter will render in diamond shape
shape: DataMarkerType.diamond
)
)
]

Copyright © 2001 - 2019 Syncfusion Inc. 83

Charts Cartesian chart types

)
)
)
);
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the
scatter series further.
Step line chart
To render a step line chart, create an instance of StepLineSeries, and add it to the series collection
property of SfCartesianChart. The following properties are used to customize the appearance of spline
segment:

• color – Changes the color of the line.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders step line chart

Copyright © 2001 - 2019 Syncfusion Inc. 84

Charts Cartesian chart types

StepLineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y
)
]
)
)
)
);
}

Dashed step line

The dashArray property of the StepLineSeries is used to render step line series with dashes. Odd value is
considered as rendering size and even value is considered as gap.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StepLineSeries<ChartData, double>(
dataSource: chartData,
// Dashes for step line
dashArray: <double>[5, 5],

Copyright © 2001 - 2019 Syncfusion Inc. 85

Charts Cartesian chart types

xValueMapper: (ChartData sales, _) => sales.x,

yValueMapper: (ChartData sales, _) => sales.y
)
]
)
)
)
);
}

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the step
line series further.
Range column chart
To render a range column chart, create an instance of RangeColumnSeries and add to the series
collection property of SfCartesianChart.
Since the RangeColumnSeries requires two Y values for a point, your data should contain high and low
values. High and low value specifies the maximum and minimum range of the point.

• highValueMapper - Field in the data source, which is considered as high value for the data
points.
• lowValueMapper - Field in the data source, which is considered as low value for the data points.

DART
@override
Widget build(BuildContext context) {

Copyright © 2001 - 2019 Syncfusion Inc. 86

Charts Cartesian chart types

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
RangeColumnSeries<ChartData, double>(
dataSource: <ChartData>[
ChartData('Jan', 3, 9),
ChartData('Feb', 4, 11),
ChartData('Mar', 6, 13),
ChartData('Apr', 9, 17),
ChartData('May', 12, 20),
],
xValueMapper: (ChartData sales, _) => sales.x,
lowValueMapper: (ChartData sales, _) => sales.low,
highValueMapper: (ChartData sales, _) => sales.high,
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.high, this.low);
final String x;
final double high;
final double low;
}

Copyright © 2001 - 2019 Syncfusion Inc. 87

Charts Cartesian chart types

Data label
In the range column chart when data label is enabled, by default there will be two values displayed
namely, high and low, but in the other types of charts, only y value will be displayed.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <ChartSeries>[
RangeColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
lowValueMapper: (ChartData sales, _) => sales.low,
highValueMapper: (ChartData sales, _) => sales.high,
dataLabelSettings: DataLabelSettings(
isVisible: true,
position: CartesianLabelPosition.top
),
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 88

Charts Cartesian chart types

Range area chart

To render a range area chart, create an instance of RangeAreaSeries and add to the series collection
property of SfCartesianChart.
Since the RangeAreaSeries requires two Y values for a point, your data should contain high and low
values. High and low value specifies the maximum and minimum range of the point.

• highValueMapper - Field in the data source, which is considered as high value for the data
points.
• lowValueMapper - Field in the data source, which is considered as low value for the data points.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
RangeAreaSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
lowValueMapper: (ChartData sales, _) => sales.low,
highValueMapper: (ChartData sales, _) => sales.high,
)
]

Copyright © 2001 - 2019 Syncfusion Inc. 89

Charts Cartesian chart types

)
)
)
);
}
class ChartData {
ChartData(this.x, this.high, this.low);
final double x;
final double high;
final double low;
}

Border customization
The borders of the range area chart can be customized using the borderDrawMode property. The
default value of the borderMode property is all and the other value is excludeSides.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
RangeAreaSeries<SalesData, double>(
dataSource: chartData,
color: Colors.deepOrange[300],
borderDrawMode: RangeAreaBorderMode.excludeSides,
borderColor: Colors.green,
borderWidth: 2,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 90

Charts Cartesian chart types

)
);
}

Spline area chart

To render a spline area chart, create an instance of SplineAreaSeries, and add it to the series collection
property of SfCartesianChart. The following properties are used to customize the appearance of spline
area chart:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
SplineAreaSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 91

Charts Cartesian chart types

Dashed spline area

The [dashArray]() property of the SplineAreaSeries is used to render spline area series with dashes.
Odd value is considered as rendering size and even value is considered as gap.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
SplineAreaSeries<SalesData, double>(
dataSource: chartData,
dashArray: <double>[5, 5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 92

Charts Cartesian chart types

Spline area rendering types

The splineType allows you to change the spline area curve in series. The following types are used in
SplineAreaSeries:

• natural
• monotonic
• cardinal
• clamped

By default, the value of splineType is natural.

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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
SplineAreaSeries<SalesData, double>(
dataSource: chartData,
splineType: SplineType.cardinal,
cardinalSplineTension: 0.9,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 93

Charts Cartesian chart types

Step area chart

To render a spline area chart, create an instance of StepAreaSeries, and add it to the series collection
property of SfCartesianChart. The following properties are used to customize the appearance of spline
area chart:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StepAreaSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 94

Charts Cartesian chart types

Dashed step area

The [dashArray]() property of the StepAreaSeries is used to render spline area series with dashes. Odd
value is considered as rendering size and even value is considered as gap.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StepAreaSeries<SalesData, double>(
dataSource: chartData,
dashArray: <double>[5, 5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 95

Charts Cartesian chart types

Stacked line chart

To render a stacked line chart, create an instance of StackedLineSeries, and add it to the series collection
property of SfCartesianChart. The following properties are used to customize the appearance of stacked
line series:

• color – Changes the color of the line.

• opacity – Controls the transparency of the chart series.
• width – Changes the stroke width of the line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedLineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedLineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedLineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedLineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,

Copyright © 2001 - 2019 Syncfusion Inc. 96

Charts Cartesian chart types

yValueMapper: (ChartData sales, _) => sales.y4

)
]
)
)
)
);
}

Grouping series
You can group and stack the similar stacked series types using the groupName property of stacked
series. The stacked series that contains the same groupName will be stacked in a single group.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedLineSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),
dataSource: chartData,

Copyright © 2001 - 2019 Syncfusion Inc. 97

Charts Cartesian chart types

xValueMapper: (ChartData sales, _) => sales.x,

yValueMapper: (ChartData sales, _) => sales.y1
),
StackedLineSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedLineSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 98

Charts Cartesian chart types

Display cumulative values

You can show the cumulative data label values using the showCumulativeValues property. If the series
are grouped using groupName, then cumulative values will be shown based on grouping.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedLineSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedLineSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true

Copyright © 2001 - 2019 Syncfusion Inc. 99

Charts Cartesian chart types

),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedLineSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
]
)
)
)
);
}

Stacked area chart

To render a stacked area chart, create an instance of StackedAreaSeries, and add it to the series
collection property of SfCartesianChart. The following properties are used to customize the appearance
of stacked line series:

Copyright © 2001 - 2019 Syncfusion Inc. 100

Charts Cartesian chart types

• color – Changes the color of the line.

• opacity – Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedAreaSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedAreaSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedAreaSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 101

Charts Cartesian chart types

Grouping series
You can group and stack the similar stacked series types using the groupName property of stacked
series. The stacked series that contains the same groupName will be stacked in a single group.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedAreaSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedAreaSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),

Copyright © 2001 - 2019 Syncfusion Inc. 102

Charts Cartesian chart types

dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedAreaSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
]
)
)
)
);
}

Display cumulative values

You can show the cumulative data label values using the showCumulativeValues property. If the series
are grouped using groupName, then cumulative values will be shown based on grouping.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 103

Charts Cartesian chart types

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedAreaSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedAreaSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedAreaSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(
isVisible: true,
showCumulativeValues: true,
useSeriesColor: true
),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 104

Charts Cartesian chart types

Stacked column chart

To render a stacked column chart, create an instance of StackedColumnSeries, and add it to the series
collection property of SfCartesianChart. The following properties are used to customize the appearance
of stacked line series:

• color – Changes the color of the line.

• opacity – Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,

Copyright © 2001 - 2019 Syncfusion Inc. 105

Charts Cartesian chart types

yValueMapper: (ChartData sales, _) => sales.y2

),
StackedColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Grouping series
You can group and stack the similar stacked series types using the groupName property of stacked
series. The stacked series that contains the same groupName will be stacked in a single group.
DART
@override
Widget build(BuildContext context) {
return Scaffold(

Copyright © 2001 - 2019 Syncfusion Inc. 106

Charts Cartesian chart types

body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedColumnSeries<ChartData, double>(
groupName: 'Group A',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedColumnSeries<ChartData, double>(
groupName: 'Group B',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedColumnSeries<ChartData, double>(
groupName: 'Group A',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedColumnSeries<ChartData, double>(
groupName: 'Group B',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 107

Charts Cartesian chart types

Display cumulative values

You can show the cumulative data label values using the showCumulativeValues property. If the series
are grouped using groupName, then cumulative values will be shown based on grouping.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedColumnSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedColumnSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),

Copyright © 2001 - 2019 Syncfusion Inc. 108

Charts Cartesian chart types

StackedColumnSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedColumnSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Stacked bar chart

To render a stacked bar chart, create an instance of StackedBarSeries, and add it to the series collection
property of SfCartesianChart. The following properties are used to customize the appearance of stacked
line series:

Copyright © 2001 - 2019 Syncfusion Inc. 109

Charts Cartesian chart types

• color – Changes the color of the line.

• opacity – Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedBarSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedBarSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedBarSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedBarSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 110

Charts Cartesian chart types

Grouping series
You can group and stack the similar stacked series types using the groupName property of stacked
series. The stacked series that contains the same groupName will be stacked in a single group.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedBarSeries<ChartData, double>(
groupName: 'Group A',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedBarSeries<ChartData, double>(
groupName: 'Group B',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedBarSeries<ChartData, double>(
groupName: 'Group A',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,

Copyright © 2001 - 2019 Syncfusion Inc. 111

Charts Cartesian chart types

yValueMapper: (ChartData sales, _) => sales.y3

),
StackedBarSeries<ChartData, double>(
groupName: 'Group B',
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Display cumulative values

You can show the cumulative data label values using the showCumulativeValues property. If the series
are grouped using groupName, then cumulative values will be shown based on grouping.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedBarSeries<ChartData, double>(

Copyright © 2001 - 2019 Syncfusion Inc. 112

Charts Cartesian chart types

groupName: 'Group A',

dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y1
),
StackedBarSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y2
),
StackedBarSeries<ChartData, double>(
groupName: 'Group A',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y3
),
StackedBarSeries<ChartData, double>(
groupName: 'Group B',
dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues:
true),
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y4
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 113

Charts Cartesian chart types

100% Stacked Area Chart

To render a 100% stacked area chart, create an instance of StackingArea100Series and add to the
series collection property of SfCartesianChart. You can use the following properties to customize the
100% stacked area appearance.

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.
• borderDrawMode - Specifies the type of the border mode and it defaults to top.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedArea100Series<ChartData, DateTime>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.year,
yValueMapper: (ChartData sales, _) => sales.sales1
),
StackedArea100Series<ChartData, DateTime>(
dataSource: chartData,

Copyright © 2001 - 2019 Syncfusion Inc. 114

Charts Cartesian chart types

xValueMapper: (ChartData sales, _) => sales.year,

yValueMapper: (ChartData sales, _) => sales.sales2
),
StackedArea100Series<ChartData, DateTime>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.year,
yValueMapper: (ChartData sales, _) => sales.sales3
),
StackedArea100Series<ChartData, DateTime>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.year,
yValueMapper: (ChartData sales, _) => sales.sales4
)
]
)
)
)
);
}

100% Stacked Column Chart

To render a 100% stacked column chart, create an instance of StackedColumn100Series, and add it to
the [series]() collection property of SfCartesianChart. The following properties are used to customize
the appearance:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.
• borderRadius - used to add the rounded corners to the rectangle.

DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 115

Charts Cartesian chart types

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
),
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2
),
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales3
),
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales4
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 116

Charts Cartesian chart types

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 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
width: 0.8, // Width of the columns
spacing: 0.2 // Spacing between the columns
),
StackedColumn100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2,
width: 0.8, // Width of the columns
spacing: 0.2 // Spacing between the columns
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 117

Charts Cartesian chart types

100% Stacked Bar Chart

To render a 100% stacked bar chart, create an instance of StackedBar100Series, and add it to the
[series]() collection property of SfCartesianChart. The following properties are used to customize the
appearance:

• color – Changes the color of the series.

• opacity - Controls the transparency of the chart series.
• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.
• borderRadius - used to add the rounded corners to the rectangle.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
),
StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2
),
StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales3
),

Copyright © 2001 - 2019 Syncfusion Inc. 118

Charts Cartesian chart types

StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales4
)
]
)
)
)
);
}

Bar 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 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
width: 0.8,
spacing: 0.2
),

Copyright © 2001 - 2019 Syncfusion Inc. 119

Charts Cartesian chart types

StackedBar100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2,
width: 0.8,
spacing: 0.2
)
]
)
)
)
);
}

100% Stacked Line Chart

To render a 100% stacked line chart, create an instance of StackedLine100Series, and add it to the
series collection property of SfCartesianChart. The following properties are used to customize the
appearance:

• color – Changes the color of the line.

• opacity - Controls the transparency of the chart series.
• width – Changes the stroke width of the line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
StackedLine100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,

Copyright © 2001 - 2019 Syncfusion Inc. 120

Charts Cartesian chart types

yValueMapper: (SalesData sales, _) => sales.sales

),
StackedLine100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2
),
StackedLine100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales3
),
StackedLine100Series<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales4
)
]
)
)
)
);
}

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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[

Copyright © 2001 - 2019 Syncfusion Inc. 121

Charts Circular Chart Types

StackedLine100Series<SalesData, String>(
dataSource: chartData,
dashArray: <double>[5,5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
),
StackedLine100Series<SalesData, String>(
dataSource: chartData,
dashArray: <double>[5,5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales2
),
StackedLine100Series<SalesData, String>(
dataSource: chartData,
dashArray: <double>[5,5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales3
),
StackedLine100Series<SalesData, String>(
dataSource: chartData,
dashArray: <double>[5,5],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales4
)
]
)
)
)
);
}

Circular Chart Types

Pie chart
To render a pie chart, create an instance of PieSeries, and add it to the series collection property of
SfCircularChart. The following properties are used to customize the appearance of pie segment:

Copyright © 2001 - 2019 Syncfusion Inc. 122

Charts Circular Chart Types

• opacity - Controls the transparency of the chart series.

• strokeWidth – Changes the stroke width of the series.
• strokeColor – Changes the stroke color of the series.
• pointColorMapper - Maps the color for individual points from the data source.

DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('David', 25),
ChartData('Steve', 38),
ChartData('Jack', 34),
ChartData('Others', 52)
];
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(series: <CircularSeries>[
// Render pie chart
PieSeries<ChartData, String>(
dataSource: chartData,
pointColorMapper:(ChartData data, _) => data.color,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}

Copyright © 2001 - 2019 Syncfusion Inc. 123

Charts Circular Chart Types

Changing pie size

You can use the radius property to change the diameter of the pie chart with respect to the plot area.
The default value is 80%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius of pie
radius: '50%'
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 124

Charts Circular Chart Types

Exploding a segment
You can explode a pie segment by enabling the explode property. The following properties are used to
customize the explode options:

• explodeIndex - Specifies the index of the slice to explode it at the initial rendering.
• explodeOffset - Specifies the offset of exploded slice. The value ranges from 0% to 100%.
• explodeGesture - Gesture for activating the explode. Explode can be activated in single tap,
double tap, and long press. The available gesture types are singleTap, doubleTap, longPress, and
none and the default value is singleTap.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Segments will explode on tap
explode: true,
// First segment will be exploded on initial rendering
explodeIndex: 1
)

Copyright © 2001 - 2019 Syncfusion Inc. 125

Charts Circular Chart Types

]
)
)
)
);
}

Exploding all the segments

Using the explodeAll property of PieSeries, you can explode all the pie segments.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
explode: true,
// All the segments will be exploded
explodeAll: true
)
]
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 126

Charts Circular Chart Types

)
);
}

Angle of pie
SfCircularChart allows you to render all the data points or segments in semi-pie, quarter-pie, or in any
sector using the startAngle and endAngle properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
startAngle: 270, // starting angle of pie
endAngle: 90 // ending angle of pie
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 127

Charts Circular Chart Types

Grouping data points

The small segments in the pie chart can be grouped into others category using the groupTo and
groupMode properties of PieSeries. The groupMode property specifies the grouping type based on the
actual data point value or by points length, and the groupTo 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 property is null, and the default value of groupMode
property is [point]().
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
groupMode: CircularChartGroupMode.point,
// As the grouping mode is point, 2 points will be grouped
groupTo: 2
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 128

Charts Circular Chart Types

)
)
);
}

Various radius for each slice

The pointRadiusMapper maps the field name, which will be considered for calculating the radius of the
data points.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('USA', 10, '70%'),
ChartData('China', 11, '60%'),
ChartData('Russia', 9, '52%'),
ChartData('Germany', 10, '40%')
];
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius for each segment from data source
pointRadiusMapper: (ChartData data, _) => data.size

Copyright © 2001 - 2019 Syncfusion Inc. 129

Charts Circular Chart Types

)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, this.size);
final String x;
final double y;
final String size;
}

Doughnut chart
To render a doughnut chart, create an instance of DoughnutSeries, and add it to the series collection
property of SfCircularChart. The following properties are used to customize the appearance of doughnut
segment:

• opacity - Controls the transparency of the chart series.

• [strokeWidth]() – Changes the stroke width of the series.
• [strokeColor]() – Changes the stroke color of the series.
• pointColorMapper - Maps the color for individual points from the data source.

DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 130

Charts Circular Chart Types

Widget build(BuildContext context) {

final List<ChartData> chartData = [
ChartData('David', 25, Color.fromRGBO(9,0,136,1)),
ChartData('Steve', 38, Color.fromRGBO(147,0,119,1)),
ChartData('Jack', 34, Color.fromRGBO(228,0,124,1)),
ChartData('Others', 52, Color.fromRGBO(255,189,57,1))
];
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
// Renders doughnut chart
DoughnutSeries<ChartData, String>(
dataSource: chartData,
pointColorMapper:(ChartData data, _) => data.color,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}

Copyright © 2001 - 2019 Syncfusion Inc. 131

Charts Circular Chart Types

Rounded corners
The cornerStyle property specifies the corner type for doughnut chart. The corners can be customized
using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is
bothFlat.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Corner style of doughnut segment
cornerStyle: CornerStyle.bothCurve
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 132

Charts Circular Chart Types

Changing the doughnut size

You can use the radius property to change the diameter of the doughnut chart with respect to the plot
area. The default value of this property is 80%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius of doughnut
radius: '50%'
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 133

Charts Circular Chart Types

Changing doughnut inner radius

You can change the inner radius of doughnut chart using the innerRadius property with respect to the
plot area. The value ranges from 0% to 100%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius of doughnut's inner circle
innerRadius: '80%'
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 134

Charts Circular Chart Types

Exploding a segment
You can explode a doughnut segment by enabling the explode property. The following properties are
used to customize the explode options:

• explodeIndex - Specifies the index of the slice to explode it at the initial rendering.
• explodeOffset - Specifies the offset of exploded slice. The value ranges from 0% to 100%.
• explodeGesture - Gesture for activating the explode. Explode can be activated in single tap,
double tap, and long press. The available gesture types are singleTap, doubleTap, longPress, and
none. The default value is singleTap.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Explode the segments on tap
explode: true,
explodeIndex: 1
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 135

Charts Circular Chart Types

)
)
);
}

Exploding all the segments

Using the explodeAll property of DoughnutSeries, you can explode all the doughnut segments.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
explode: true,
// Explode all the segments
explodeAll: true
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 136

Charts Circular Chart Types

Angle of doughnut
SfCircularChart allows you to render all the data points or segments in semi-pie, quarter-pie, or in any
sector using the startAngle and endAngle properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
startAngle: 270, // Starting angle of doughnut
endAngle: 90 // Ending angle of doughnut
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 137

Charts Circular Chart Types

Grouping data points

The small segments in the doughnut chart can be grouped into others category using the groupTo and
groupMode properties of DoughnutSeries. The groupMode property is used to specify the grouping type
based on the actual data point value or by points length, and the groupTo 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 property is null, and the default value of
groupMode property is [point]().
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Mode of grouping
groupMode: CircularChartGroupMode.point,
groupTo: 2
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 138

Charts Circular Chart Types

Radial bar chart

The radial bar chart is used for showing the comparisons among the categories using the circular shapes.
To render a radial bar chart, create an instance of RadialBarSeries, and add to the series collection
property of SfCircularChart. The following properties are used to customize the appearance of pie
segment:

• opacity - Controls the transparency of the chart series.

• [strokeWidth]() – Changes the stroke width of the series.
• [strokeColor]() – Changes the stroke color of the series.
• pointColorMapper - Maps the color for individual points from the data source.
• gap - Changes the spacing between two individual segments. The default value of spacing is 1%.
• maximumValue - Represents the entire span of an individual circle. The default value of the this
property is null.
• trackColor - Changes the color of the track area.
• trackBorderColor - Changes the color of the track border.
• trackBorderWidth - Changes the width of the track border.
• trackOpacity - Controls the transparency of the track area.
• useSeriesColor - Uses the point color for filling the track area.

DART
@override
Widget build(BuildContext context) {

Copyright © 2001 - 2019 Syncfusion Inc. 139

Charts Circular Chart Types

return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
// Renders radial bar chart
RadialBarSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Changing the radial bar size

You can use the radius property to change the diameter of the radial bar chart with respect to the plot
area. The default value is 80%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(

Copyright © 2001 - 2019 Syncfusion Inc. 140

Charts Circular Chart Types

series: <CircularSeries>[
RadialBarSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius of the radial bar
radius: '50%'
)
]
)
)
)
);
}

Changing the radial bar inner radius

You can change the inner radius of radial bar chart using the innerRadius property with respect to the
plot area. The value ranges from 0% to 100%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
RadialBarSeries<ChartData, String>(

Copyright © 2001 - 2019 Syncfusion Inc. 141

Charts Circular Chart Types

dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Radius of the radial bar's inner circle
innerRadius: '80%'
)
]
)
)
)
);
}

Rounded corners
The cornerStyle property specifies the corner type for radial bar chart. The corners can be customized
using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is
bothFlat.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
RadialBarSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Corner style of radial bar segment
cornerStyle: CornerStyle.bothCurve
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 142

Charts Circular Chart Types

Rendering data labels

Data labels can be enabled using the isVisible property of dataLabelSettings. The appearance of label can
be customized using the following properties:

• color - Changes the label background color.

• textStyle – Changes the text color, size, font family, fontStyle, and font weight.
• textStyle.color – Changes the color of the text.
• textStyle.fontFamily - Changes the font family for chart title.
• textStyle.fontStyle – Changes the font style for the chart title.
• textStyle.fontSize - Changes the font size for the chart title.
• opacity - Controls the transparency of the label background color.
• borderRadius - Customizes the data label border radius.
• angle - Rotates the labels.
• borderWidth – Changes the stroke width of the data label shape.
• borderColor – Changes the stroke color of the data label shape.
• useSeriesColor - Uses the series color for filling the data label shape.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
RadialBarSeries<ChartData, String>(

Copyright © 2001 - 2019 Syncfusion Inc. 143

Charts Pyramid Chart

dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
// Renders the data label
isVisible: true
)
)
]
)
)
)
);
}

Pyramid Chart
To render a pyramid chart, create an instance of PyramidSeries, and add it to the series property of
SfPyramidChart. The following properties are used to customize the appearance of a pyramid segment.

• opacity - Controls the transparency of the chart series.

• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.
• pointColorMapper - Maps the color from data source.

DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 144

Charts Pyramid Chart

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<ChartData, String>(
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)
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}

Copyright © 2001 - 2019 Syncfusion Inc. 145

Charts Pyramid Chart

Pyramid modes
You can render the pyramid series as linear or surface 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 property is linear.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<ChartData, String>(
pyramidMode: PyramidMode.surface
)
)
)
)
);
}

Changing pyramid size

You can modify the size of pyramid series using the height and width properties. It ranges from 0% to
100%.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 146

Charts Pyramid Chart

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<ChartData, String>(
height: '50%',
width: '50%',
)
)
)
)
);
}

Gap between segments

You can control the gap between the two segments using the gapRatio property. It ranges from 0 to 1.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<ChartData, String>(
gapRatio: 0.1,
)

Copyright © 2001 - 2019 Syncfusion Inc. 147

Charts Pyramid Chart

)
)
)
);
}

Explode segments
You can explode a pyramid segment using the explodeIndex property. The explodeOffset property is
used to specify the exploded segment’s distance.
Also, the segments can be exploded by tapping the segment.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<ChartData, String>(
explode: true,
explodeOffset: '5%',
explodeIndex: 2,
)
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 148

Charts Pyramid Chart

Smart data labels

The smartLabelMode property is used to place the data labels smartly. The smartLabelMode supports
the following values:

• shift - Shifts the data label position when a label intersects with other label.
• none - Renders all the data label when intersect.
• hide - Hides the intersecting data label, and it is the default value.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
smartLabelMode: SmartLabelMode.shift,
series: PyramidSeries<ChartData, String>(
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: LabelPosition.inside
),
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 149

Charts Pyramid Chart

)
);
}

Applying palette color

The palette 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
palette: <Color>[
Colors.teal,
Colors.orange,
Colors.brown
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 150

Charts Funnel Chart

Funnel Chart
To render a funnel chart, create an instance of FunnelSeries, and add it to the series property of
SfFunnelChart. The following properties are used to customize the appearance of a funnel segment:

• opacity - Controls the transparency of the chart series.

• borderWidth – Changes the stroke width of the series.
• borderColor – Changes the stroke color of the series.
• pointColorMapper – Maps the color from data source.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
series: FunnelSeries<ChartData, String>(
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)
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}

Copyright © 2001 - 2019 Syncfusion Inc. 151

Charts Funnel Chart

Changing funnel size

You can modify the size of funnel series using the height and width properties. It ranges from 0% to
100%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
series: FunnelSeries<ChartData, String>(
height: '50%',
width: '50%',
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 152

Charts Funnel Chart

Changing neck size

You can modify the neck size of funnel series using the neckHeight and neckWidth properties. It ranges
from 0% to 100%.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
series: FunnelSeries<ChartData, String>(
neckHeight: '40%',
neckWidth: '10%',
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 153

Charts Funnel Chart

Gap between segments

You can control the gap between the two segments using the gapRatio property. It ranges from 0 to 1.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
series: FunnelSeries<ChartData, String>(
gapRatio: 0.1,
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 154

Charts Funnel Chart

Explode segments
You can explode a funnel segment using the explodeIndex property. The explodeOffset property is used
to specify the exploded segment’s distance.
Also, the segments can be exploded by tapping the segment.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
series: FunnelSeries<ChartData, String>(
explode: true,
explodeOffset: '5%',
explodeIndex: 2,
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 155

Charts Funnel Chart

Smart data labels

The smartLabelMode property is used to place the data labels smartly. The smartLabelMode supports
the following values:

• shift - Shifts the data label position when a label intersects with other label.
• none - Renders all the data labels when intersect.
• hide - Hides the intersecting data label, and it is the default value.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
smartLabelMode: SmartLabelMode.shift,
series: FunnelSeries<ChartData, String>(
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: LabelPosition.inside
),
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 156

Charts Funnel Chart

Applying palette color

The palette 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfFunnelChart(
palette: <Color>[
Colors.teal,
Colors.orange,
Colors.brown
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 157

Charts Multiple and Combinational Charts

Multiple and Combinational Charts

Multiple series
You can add multiple series to the series property of the SfCartesianChart class. By default, all the series
are rendered based on the PrimaryXAxis and PrimaryYAxis in SfCartesianChart. If you want to plot
different unit or value that is specific to a particular series, specify separate axis for that series using the
xAxisName and yAxisName properties of series.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y2
),
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y3
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 158

Charts Multiple and Combinational Charts

Also refer multiple axes for customizing the axis further.

Combination series
SfCartesianChart allows you to render a combination of different types of series. In the following code
snippet, the column and line type series have been combined.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
// Render column series
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
// Render line series
LineSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y2
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 159

Charts Series customization

)
)
);
}

Limitation of combination chart

• Cartesian type series cannot be combined with circular series (pie, doughnut, and radial bar).

Series customization
Animation
SfCartesianChart 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 property. You can disable the animation by setting 0 value to that property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,

Copyright © 2001 - 2019 Syncfusion Inc. 160

Charts Series customization

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y,
// Duration of series animation
animationDuration: 1000
)
]
)
)
)
);
}

Transpose the series

The isTransposed property of CartesianSeries 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Transpose the chart
isTransposed: true,
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
SplineSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 161

Charts Series customization

Color palette
The palette property is used to define the colors for the series available in chart. By default, a set of 10
colors are predefined for applying it to the series. If the colors specified in the series are less than the
number of series, than the remaining series are filled with the specified palette colors rotationally.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Palette colors
palette: <Color>[
Colors.teal,
Colors.orange,
Colors.brown
],
series: <CartesianSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
ColumnSeries<ChartData, String>(

Copyright © 2001 - 2019 Syncfusion Inc. 162

Charts Series customization

dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y2
),
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y3
)
]
)
)
)
);
}

Color mapping for data points

The pointColorMapper property is used to map the color field from the data source.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('Germany', 118, Colors.teal),
ChartData('Russia', 123, Colors.orange),
ChartData('Norway', 107, Colors.brown),
ChartData('USA', 87, Colors.deepOrange)
];

Copyright © 2001 - 2019 Syncfusion Inc. 163

Charts Series customization

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Map color for each data points from the data source
pointColorMapper: (ChartData data, _) => data.color
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, this.color);
final String x;
final double y;
final Color color;
}

Copyright © 2001 - 2019 Syncfusion Inc. 164

Charts Series customization

Gradient fill
The gradient property is used to define the gradient colors. The colors from this property is used for
series.
DART
@override
Widget build(BuildContext context) {
final List<Color> color = <Color>[];
color.add(Colors.deepOrange[50]);
color.add(Colors.deepOrange[200]);
color.add(Colors.deepOrange);
final List<double> stops = <double>[];
stops.add(0.0);
stops.add(0.5);
stops.add(1.0);
final LinearGradient gradientColors =
LinearGradient(colors: color, stops: stops);
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
AreaSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Applies gradient color
gradient: gradientColors
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 165

Charts Series customization

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 property in series, you can decide the action taken
for empty points. Available modes are gap, zero, drop and average. Default mode of the empty point is
gap.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(1, 112),
ChartData(2, null),
ChartData(3, 107),
ChartData(4, 87)
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
emptyPointSettings: EmptyPointSettings(
// Mode of empty point
mode: EmptyPointMode.average
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 166

Charts Series customization

]
)
)
)
);
}

Empty point customization

Specific color for empty point can be set by color property in emptyPointSettings. The borderWidth
property is used to change the stroke width of the empty point and borderColor is used to change the
stroke color of the empty point.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(1, 112),
ChartData(2, null),
ChartData(3, 107),
ChartData(4, 87)
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,

Copyright © 2001 - 2019 Syncfusion Inc. 167

Charts Series customization

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y,
borderColor: Colors.blue,
borderWidth: 5,
emptyPointSettings: EmptyPointSettings(
mode: EmptyPointMode.average,
color: Colors.red,
borderColor: Colors.black,
borderWidth: 2
)
)
]
)
)
)
);
}

Sorting
The chart’s data source can be sorted using the sortingOrder and sortFieldValueMapper properties of
series. The sortingOrder property specifies the data points in the series can be sorted in ascending or
descending order. The data points will be rendered in the specified order if sortingOrder is set to none.
The sortFieldValueMapper specifies the field in the data source, which is considered for sorting the data
points.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 168

Charts Series customization

Widget build(BuildContext context) {

final List<ChartData> chartData = [
ChartData('USA', 112),
ChartData('China', 97),
ChartData('Japan', 107),
ChartData('Africa', 87),
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <CartesianSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
sortingOrder: SortingOrder.descending,
// Sorting based on the specified field
sortFieldValueMapper: (ChartData data, _) => data.x
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 169

Charts Axis

Axis
Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a
horizontal (X) axis.
Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale:

• Category
• Numeric
• Date-time
• Logarithmic

Numeric axis
Numeric axis uses numerical scale and displays numbers as labels. By default, Numeric Axis is set to both
horizontal axis and vertical axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(),
primaryYAxis: NumericAxis()
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 170

Charts Axis

Customizing range
To customize the range of an axis, use the minimum and maximum properties of NumericAxis. By
default, nice range will be calculated automatically based on the provided data.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
minimum: 10,
maximum: 50
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 171

Charts Axis

Customizing interval
Axis interval can be customized using the interval property of ChartAxis. By default, nice interval will be
calculated based on the minimum and maximum values of the provided data.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
// axis interval is set to 10
interval: 10
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 172

Charts Axis

Applying padding to the range

Padding can be applied to the minimum and maximum extremes of the axis range using the
rangePadding property. Numeric axis supports the following types of padding:

• additional
• auto
• none
• normal
• round

additional
When the value of rangePadding property is additional, the axis range will be rounded and an interval of
the axis will be added as padding to the minimum and maximum values of the range.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
// Additional range padding is applied to y axis
rangePadding: ChartRangePadding.additional

Copyright © 2001 - 2019 Syncfusion Inc. 173

Charts Axis

)
)
)
)
);
}

auto
When the value of rangePadding property is auto, the horizontal numeric axis takes none for padding
calculation, whereas the vertical numeric axis takes normal for padding calculation. This is also the
default value of rangePadding.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
rangePadding: ChartRangePadding.auto
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 174

Charts Axis

none
When the value of rangePadding property is none, padding will not be applied to the axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
rangePadding: ChartRangePadding.none
)
)
)
)
);
}

normal
When the value of rangePadding property is normal, padding is applied to the axis based on the default
range calculation.
DART

Copyright © 2001 - 2019 Syncfusion Inc. 175

Charts Axis

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
rangePadding: ChartRangePadding.normal
)
)
)
)
);
}

round
When the value of rangePadding property is round, axis range will be rounded to the nearest possible
numeric value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(

Copyright © 2001 - 2019 Syncfusion Inc. 176

Charts Axis

rangePadding: ChartRangePadding.round
)
)
)
)
);
}

Formatting the labels

The numberFormat property of numeric axis formats the numeric axis labels with globalized label
formats. The following code snippet demonstrates how to format numeric labels.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
// Y axis labels will be rendered with currency format
numberFormat: NumberFormat.simpleCurrency()
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 177

Charts Axis

Also refer label format and date format for formatting the labels further.
Category axis
Category axis displays text labels instead of numbers. When the string values are bound to x values, then
the x-axis must be initialized with CategoryAxis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis()
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 178

Charts Axis

Placing labels between the ticks

Labels in category axis can be placed on the ticks by setting the labelPlacement to onTicks. The default
value of the labelPlacement property is betweenTicks. So, the labels will be placed between the ticks by
default.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
// Axis labels will be placed on the ticks
labelPlacement: LabelPlacement.onTicks
)
)
)
)
);
}

Displaying labels after a fixed interval

To display the labels after a fixed interval n, set the interval property of ChartAxis to n. The default value
of interval is null.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 179

Charts Axis

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
labelPlacement: LabelPlacement.betweenTicks,
interval: 2
)
)
)
)
);
}

Indexed category axis

Category axis can also be rendered based on the index values of data source by setting the
arrangeByIndex property to true in the axis.
DART
final List<ChartData> chartData = [
ChartData('John', 10),
ChartData('David', 9),
ChartData('Brit', 10),
];
final List<ChartData> chartData2 = [
ChartData('Anto', 11),
ChartData('Peter', 12),
ChartData('Parker', 8),

Copyright © 2001 - 2019 Syncfusion Inc. 180

Charts Axis

];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
// Axis will be rendered based on the index values
arrangeByIndex: true
),
series: <ChartSeries<ChartData, String>>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y,
),
ColumnSeries<ChartData, String>(
dataSource: chartData2,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y,
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 181

Charts Axis

Date-time axis
The date-time axis uses date-time scale and displays date-time values as axis labels in specified format.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis()
)
)
)
);
}

Customizing range
To customize the range of an axis, use the minimum and maximum properties of DateTimeAxis. By
default, nice range will be calculated automatically based on the provided data.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(

Copyright © 2001 - 2019 Syncfusion Inc. 182

Charts Axis

child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: DateTime(2010),
maximum: DateTime(2020)
)
)
)
)
);
}

Date-time intervals
The date-time intervals can be customized using the interval and intervalType properties of
DateTimeAxis. For example, setting interval as 2 and intervalType as years will consider 2 years as
interval.
The Flutter Chart supports the following types of interval for date-time axis:

• auto
• years
• months
• days
• hours
• minutes
• seconds

DART

Copyright © 2001 - 2019 Syncfusion Inc. 183

Charts Axis

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
// Interval type will be months
intervalType: DateTimeIntervalType.months,
interval: 2
)
)
)
)
);
}

Applying padding to range

Padding can be applied to the minimum and maximum extremes of a range using the RangePadding
property. The date-time axis supports the following types of padding:

• none
• round
• additional
• normal

none

Copyright © 2001 - 2019 Syncfusion Inc. 184

Charts Axis

When the value of rangePadding property is none, padding will not be applied to the axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
rangePadding: ChartRangePadding.none
)
)
)
)
);
}

round
When the value of rangePadding property is round, axis range will be rounded to the nearest possible
date-time value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 185

Charts Axis

child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
rangePadding: ChartRangePadding.round
)
)
)
)
);
}

additional
When the value of rangePadding property is additional, range will be rounded and date-time interval of
the axis will be added as padding to the minimum and maximum extremes of a range.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
rangePadding: ChartRangePadding.additional
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 186

Charts Axis

)
);
}

normal
When the value of rangePadding property is normal, padding is applied to the axis based on the default
range calculation.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
rangePadding: ChartRangePadding.normal
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 187

Charts Axis

Formatting the labels

The dateFormat property formats the date-time axis labels. The default data-time axis label can be
formatted with various built-in date formats, which depend on the given data source.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
// X axis labels will be rendered based on the below format
dateFormat: DateFormat.y()
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 188

Charts Axis

Also refer label format and number format for formatting the labels further.
Logarithmic axis
Logarithmic axis uses logarithmic scale and displays numbers as axis labels.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(),
primaryYAxis: LogarithmicAxis()
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 189

Charts Axis

Change logarithmic range

To customize the range of log axis, use the minimum, maximum, and interval properties. By default, the
range will be calculated automatically based on the provided data.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: LogarithmicAxis(
minimum: 300,
maximum: 10000,
interval: 1,
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 190

Charts Axis

Change log base value

To customize the log base value, use the logBase property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: LogarithmicAxis(
logBase: 5,
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 191

Charts Axis customization

Axis customization
Common axis features
Customization of features such as axis title, labels, grid lines and tick lines are common to all the axes.
Each of these features are explained in this section.
Axis Visibility
Axis visibility can be controlled using the isVisible property of axis. Default value of isVisible is true.
When the axis visibility is set to false, then the axis elements like ticks, labels, title, etc will be hidden.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
// X axis is hidden now
isVisible: false
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 192

Charts Axis customization

Axis title
The title property in axis provides options to customize the text and font of axis title. Axis does not
display title by default. The title can be customized using following properties,

• text – used to set the title for axis.

• textStyle – used to change the text color, size, font family, font style, and font weight.
• color – used to change the color of the label.
• fontFamily - used to change the font family for the axis title.
• fontStyle - used to change the font style for the axis title.
• fontWeight - used to change the font weight for the axis title.
• fontSize - used to change the font size for the axis title.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
title: AxisTitle(
text: 'X-Axis',
textStyle: ChartTextStyle(
color: Colors.deepOrange,
fontFamily: 'Roboto',
fontSize: 16,

Copyright © 2001 - 2019 Syncfusion Inc. 193

Charts Axis customization

fontStyle: FontStyle.italic,
fontWeight: FontWeight.w300
)
)
)
)
)
)
);
}

Axis label rotation

The labelRotation property of axis can be used to rotate the axis labels position. Default value of
labelRotation property is 0d.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
// Axis labels will be rotated to 90 degree
labelRotation: 90
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 194

Charts Axis customization

)
);
}

Axis line customization

SfCartesianChart provides support to customize the style of the axis line by defining the axisLine
property as shown in the below code snippet.

• color – used to change the stroke color of axis line.

• width – used to change the stroke width of axis line.
• dashArray - used to render axis line series with dashes.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
axisLine: AxisLine(
color: Colors.deepOrange,
width: 2,
dashArray: <double>[5,5]
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 195

Charts Axis customization

)
)
);
}

Axis label customization

The labelStyle property in axis provides options to customize the font of axis label. The axis label can be
customized using following properties,

• labelStyle – used to change the text color, size, font family, font style, and font weight.
• color – used to change the color of the axis label.
• fontFamily - used to change the font family for the axis label.
• fontStyle - used to change the font style for the axis label.
• fontWeight - used to change the font weight for the axis label.
• fontSize - used to change the font size for the axis label.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
labelStyle: ChartTextStyle(
color: Colors.deepOrange,

Copyright © 2001 - 2019 Syncfusion Inc. 196

Charts Axis customization

fontFamily: 'Roboto',
fontSize: 14,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w500
)
)
)
)
)
);
}

Formatting axis label content

The labelFormat property is used to add prefix or suffix with the axis label.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryYAxis: NumericAxis(
// '°C' will be append to all the labels in Y axis
labelFormat: '{value}°C'
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 197

Charts Axis customization

)
);
}

Also refer number format and date format for formatting the labels further.
Label and tick positioning
Axis labels and ticks can be positioned inside or outside the chart area by using labelPosition and
tickPosition properties of ChartAxis. By default labels and ticks will be positioned outside the chart area.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
labelPosition: LabelPosition.inside,
tickPosition: TickPosition.inside
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 198

Charts Axis customization

Edge label placement

Labels with long text at the edges of an axis may appear partially outside the chart. The
edgeLabelPlacement property can be used to avoid the partial appearance of labels at the corners.
Default value of this property is none. Other available options of edgeLabelPlacement are shift and hide.
shift option will move the edge labels inside the axis bounds, where the hide option will hides the edge
labels.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
// Edge labels will be shifted
edgeLabelPlacement: EdgeLabelPlacement.shift
)
)
)
)
);
}

Grid lines customization

The width property is used to control the visibility of grid lines. majorGridLines and minorGridLines
properties in axis are used to customize the major grid lines and minor grid lines of an axis respectively.

Copyright © 2001 - 2019 Syncfusion Inc. 199

Charts Axis customization

We have provided options to change the width, dashes, color of grid lines. By default minor grid lines
will not be visible.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
majorGridLines: MajorGridLines(
width: 1,
color: Colors.red,
dashArray: <double>[5,5]
),
minorGridLines: MinorGridLines(
width: 1,
color: Colors.green,
dashArray: <double>[5,5]
),
minorTicksPerInterval:2
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 200

Charts Axis customization

Tick lines customization

The majorTickLines and minorTickLines properties in axis are used to customize the major tick lines of an
axis and minor tick lines of an axis respectively. We have provided options to change the width, size,
color and minorTicksPerInterval of tick lines. By default minor tick lines will not be visible.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
majorTickLines: MajorTickLines(
size: 6,
width: 2,
color: Colors.red
),
minorTickLines: MinorTickLines(
size: 4,
width: 2,
color: Colors.blue
),
minorTicksPerInterval:2
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 201

Charts Axis customization

Inversing axis
Axis can be inversed using the isInversed property of an axis. Default value of isInversed property is
false.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
// X axis will be inversed
isInversed: true
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 202

Charts Axis customization

Placing axes at the opposite side

The opposedPosition property of axis can be used to place the axis at the opposite side of its default
position. Default value of opposedPosition property is false.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
// X axis will be opposed
opposedPosition: true
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 203

Charts Axis customization

Offset the rendering

The plotOffset property is used to offset the rendering of the axis at start and end position. The
following code snippet demonstrates to apply the plot offset of an axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
// 20 logical pixels gap will be left at the start and end of the x axis
plotOffset: 20
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 204

Charts Axis customization

Maximum number of labels per 100 logical pixels

By default, a maximum of 3 labels are displayed for each 100 logical pixels in axis. The maximum number
of labels that should be present within 100 logical pixels length can be customized using the
maximumLabels property of an axis. This property is applicable only for automatic range calculation and
will not work if you set value for interval property of an axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
maximumLabels: 3
)
)
)
)
);
}

Visible minimum
The visibleMinimum property is used to set the minimum visible range of an axis. When panning is
enabled, you can pan to the actual minimum range of an axis.
DART

Copyright © 2001 - 2019 Syncfusion Inc. 205

Charts Axis customization

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
visibleMinimum: 2
)
)
)
)
);
}

Also refer minimum and maximum range of an axis.

Visible maximum
The visibleMaximum property is used to set the minimum visible range of an axis.When panning is
enabled, you can pan to the actual maximum range of an axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
visibleMaximum: 4
)
)
)
)
);
}

Smart axis labels

Axis labels may overlap with each other based on chart dimensions and label size. The
labelIntersectAction property of axis is used to avoid overlapping of axis labels. The default value of the
labelIntersectAction is hide. Other available values are none, wrap, multipleRows, rotate45 and
rotate90.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
// Axis labels will be placed in multiple rows, if it is intersected
labelIntersectAction: AxisLabelIntersectAction.multipleRows

Copyright © 2001 - 2019 Syncfusion Inc. 206

Charts Axis customization

)
)
)
)
);
}

Axis crossing
Axis can be positioned anywhere in the plot area using the crossesAt property. This property specifies
where the horizontal axis should intersect or cross the vertical axis, or vice-versa. The default value of
the crossesAt property is null.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:NumericAxis(
crossesAt: 0
),
primaryYAxis:NumericAxis(
crossesAt: 0
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 207

Charts Axis customization

)
);
}

Crossing in category axis

For crossing in horizontal category axis, index value should be provided for the crossesAt property of
vertical axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:CategoryAxis(),
primaryYAxis:NumericAxis(
crossesAt: 3
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 208

Charts Axis customization

Crossing in date-time axis

For crossing in horizontal date-time axis, date value should be provided for the crossesAt property of
vertical axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:DateTimeAxis(),
primaryYAxis:NumericAxis(
crossesAt: DateTime(2018, 4, 1)
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 209

Charts Axis customization

Positioning the axis labels when crossing

The placeLabelsNearAxisLine property is used to determine whether the axis labels of crossed axis
should be placed near to the axis line or not. The default value of placeLabelsNearAxisLine property is
false.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:NumericAxis(
placeLabelNearToAxisLine: false
),
primaryYAxis:NumericAxis(
placeLabelNearToAxisLine: false
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 210

Charts Axis customization

Plot bands
Plot bands are also known as strip lines, which are used to shade the different ranges in plot area with
different colors to improve the readability of the chart. You can also add a text to indicate what that
particular region indicates. You can enable the plot bands to be drawn repeatedly at regular intervals.
This will be useful when you need to mark an event that occurs recursively along the timeline of the
chart.
Since plot bands are drawn based on the axis, you have to add plot bands using the plotBands property
of the respective axis. You can also add multiple plot bands to an axis.
The following properties are used to configure the plot bands:

• start – Changes the start position of the plot band.

• end – Changes the end position of the plot band.
• size – Changes how long plot band should be expanded. This is applicable only when end is not
specified.
• sizeType – Changes the date-time unit of the value specified in the size property. The values can
be Year, Month, Day, Hour, Minute, Second, and Millisecond.
• text – Changes the text of the plot band.
• textAngle – Changes the angle of the text.
• color – Changes the color of the plot band.
• gradient – Applies gradient color for plot band.
• opacity – Changes the opacity of the plot band.
• borderWidth – Changes the stroke width of the plot band.
• borderColor – Changes the stroke color of the plot band.
• horizontalTextAlignment – Aligns the text horizontally.

Copyright © 2001 - 2019 Syncfusion Inc. 211

Charts Axis customization

• verticalTextAlignment – Aligns the text vertically.

• isVisible – Changes the visibility of the plot band in chart axis.
• shouldRenderAboveSeries – Changes the rendering order of the plot band.

Add plot band for category axis

Plot band can be added to the category axis by specifying index values to the start and end properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:CategoryAxis(
plotBands: <PlotBand>[
PlotBand(
isVisible: true,
start: 1,
end: 2,
),
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 212

Charts Axis customization

Add plot band for date-time axis

Plot band can be added to the date-time axis by specifying date values to the start and end properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:DateTimeAxis(
plotBands: <PlotBand>[
PlotBand(
isVisible: true,
start: DateTime(2018, 2, 1),
end: DateTime(2018, 4, 1),
),
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 213

Charts Axis customization

Recursive plot band

This feature is used to enable the plot bands to be drawn repeatedly at the regular intervals. This will be
useful when you need to mark an event that occurs recursively along the timeline of the chart. The
following properties are used to configure this feature:

• repeatEvery – Changes the frequency of the plot band being repeated.

• repeatUntil – Specifies the end value at which point strip line has to stop repeating.

The following code snippet and screenshot demonstrate this feature by highlighting weekends.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:DateTimeAxis(
plotBands: <PlotBand>[
PlotBand(
isVisible: true,
isRepeatable: true,
repeatEvery: 2,
size: 1,
sizeType: DateTimeIntervalType.months,
repeatUntil: DateTime(2018, 6, 1),
),

Copyright © 2001 - 2019 Syncfusion Inc. 214

Charts Axis customization

)
)
)
);
}

Segmented plot band

Typically, if you draw a plot band for a vertical axis, the height of the plot band is determined by the
start and end properties, and the end of the plot band is equivalent to the end of its associated
horizontal axis, i.e., plot band is drawn horizontally to the entire stretch of its associated horizontal axis.
Similarly, for horizontal axis, width is determined by the Start and Width properties, and vertically, it is
drawn to the entire stretch of the associated vertical axis.
Suppose, you need to draw a plot band that should not stretch along its associated axis, you have to set
the associatedAxisStart and associatedAxisEnd properties. The values provided in these two properties
correspond to its associated axis specified by the associatedAxisName property in the axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis:DateTimeAxis(
plotBands: <PlotBand>[
PlotBand(

Copyright © 2001 - 2019 Syncfusion Inc. 215

Charts Axis customization

isVisible: true,
start: DateTime(2018,2,1),
end: DateTime(2018,6,1),
associatedAxisStart: 8,
associatedAxisEnd: 15,
shouldRenderAboveSeries: true,
color: const Color.fromRGBO(224, 155, 0, 1)
),
)
)
)
);
}

Multiple axes
By default, the chart is rendered with primary x axis and primary y axis. But, the users can add n number
of axis to the chart. An additional horizontal or vertical axis can be added to the chart using the axes
property, and then you can associate it to a series by specifying the name of the axis to the xAxisName
or yAxisName property in the series.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(

Copyright © 2001 - 2019 Syncfusion Inc. 216

Charts Axis customization

child: SfCartesianChart(
primaryXAxis: CategoryAxis(
title: AxisTitle(text: 'Primary X Axis')
),
primaryYAxis: NumericAxis(
title: AxisTitle(
text: 'Primary Y Axis'
)
),
// adding multiple axis
axes: <ChartAxis>[
NumericAxis(
name: 'xAxis',
opposedPosition: true,
interval:1,
minimum: 0,
maximum: 5,
title: AxisTitle(
text: 'Secondary X Axis'
)
),
NumericAxis(
name: 'yAxis',
opposedPosition: true,
title: AxisTitle(
text: 'Secondary Y Axis'
)
)
],
series: <ChartSeries>[
LineSeries<SalesData, String>(
dataSource: [
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
),
LineSeries<SalesData, double>(
dataSource: [
SalesData('Jan', 15, 1),
SalesData('Feb', 11, 2),
SalesData('Mar', 14, 3),
SalesData('Apr', 12, 4),
],
xValueMapper: (SalesData sales, _) => sales.numeric,
yValueMapper: (SalesData sales, _) => sales.sales,
xAxisName: 'xAxis',
yAxisName: 'yAxis'
)
]
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 217

Charts Marker and data label

);
}

Marker and data label

Marker
Markers are used to provide information about the exact point location. You can add a shape to adorn
each data point. Markers can be enabled by using the isVisible property of markerSettings. You can use
the following properties to customize the appearance.

• color – used to change the color of the marker shape.

• borderWidth – used to change the stroke width of the marker shape.
• borderColor – used to change the stroke color of the marker shape.
• height - used to change the height of the marker shape.
• width - used to change the width of the marker shape.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[

Copyright © 2001 - 2019 Syncfusion Inc. 218

Charts Marker and data label

LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Renders the marker
markerSettings: MarkerSettings(
isVisible: true
)
)
]
)
)
)
);
}

Customizing marker shapes

Markers can be assigned with different shapes using the shape property. By default, markers are
rendered with circle shape. The shapes of markers are listed below.

• circle
• rectangle
• image
• pentagon

Copyright © 2001 - 2019 Syncfusion Inc. 219

Charts Marker and data label

• verticalLine
• horizontalLine
• diamond
• triangle
• invertedTriangle

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
markerSettings: MarkerSettings(
isVisible: true,
// Marker shape is set to diamond
shape: DataMarkerType.diamond
)
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 220

Charts Marker and data label

Image marker
The markers can be rendered with desired image as shape. For this you have to specify the shape as
[image]() and refer the image path using imageUrl property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
markerSettings: MarkerSettings(
isVisible: true,
shape: DataMarkerType.image,
// Renders the image as marker
imageUrl: 'images/livechart.png'
)
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 221

Charts Marker and data label

)
)
);
}

Data label
Data label can be added to a chart series by enabling the isVisible option in the dataLabelSettings. You
can use the following properties to customize the appearance.

• color – used to change the background color of the data label shape.
• borderWidth – used to change the stroke width of the data label shape.
• borderColor – used to change the stroke color of the data label shape.
• alignment - aligns the data label text to near, center and far.
• textStyle – used to change the data label text color, size, font family, font style, and font weight.
• color – used to change the color of the data label.
• fontFamily - used to change the font family for the data label.
• fontStyle - used to change the font style for the data label.
• fontWeight - used to change the font weight for the data label.
• fontSize - used to change the font size for the data label.
• margin - used to change the margin size for data labels.
• opacity - used to control the transparency of the data label.

Copyright © 2001 - 2019 Syncfusion Inc. 222

Charts Marker and data label

• labelAlignment - used to align the Cartesian data label positions. The available options to
customize the positions are outer, auto, top, bottom and middle.
• borderRadius - used to add the rounded corners to the data label shape.
• [angle]() - used to rotate the labels.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
// Renders the data label
isVisible: true
)
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 223

Charts Marker and data label

Formatting label content

Data label considers the format used in the vertical axis by default. In the below code snippet, we have
specified format to y-axis and you can see the same format is applied to the data label.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Applies currency format for y axis labels and also for data labels
primaryYAxis: NumericAxis(numberFormat: NumberFormat.simpleCurrency()),
series: <CartesianSeries>[
LineSeries<ChartData, double>(
dataSource: chartData,
color: Colors.red,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true
)
)
]
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 224

Charts Marker and data label

)
);
}

Label position
The labelAlignment property is used to position the Cartesian chart type data labels at top, bottom,
auto, outer and middle position of the actual data point position. By default, labels are auto positioned.
You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively.
The labelPosition property is used to place the circular series data labels either inside or outside. By
default the label of circular chart is placed inside the series.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(

Copyright © 2001 - 2019 Syncfusion Inc. 225

Charts Marker and data label

isVisible: true,
// Positioning the data label
labelPosition: ChartDataLabelPosition.outside
)
)
]
)
)
)
);
}

Note: The labelAlignment property is used to position the Cartesian chart labels whereas labelPosition
property is used to position the circular chart labels.
Smart labels
This feature is used to arrange the data labels smartly and avoid the intersection when there is
overlapping of labels. The property enableSmartLabels in CircularSeries is used to arrange the data
labels smartly. By default, this property is true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 226

Charts Marker and data label

child: Container(
child:SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, double>(
// Avoid labels intersection
enableSmartLabels: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelMapper: (ChartData data, _) => data.x,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.inside
)
)
]
)
)
)
);
}

Apply series color

The useSeriesColor property is used to apply the series color to background color of the data labels. The
default value of this property is false.

Copyright © 2001 - 2019 Syncfusion Inc. 227

Charts Marker and data label

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelMapper: (ChartData data, _) => data.x,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.outside,
// Renders background rectangle and fills it with series color
useSeriesColor: true
)
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 228

Charts Marker and data label

Connector line
This feature is used to connect label and data point using a line. It can be enabled for Pie and Doughnut
chart types. The connectorLineSettings property used to customize the connector line.

• color – used to change the color of the line

• width – used to change the stroke thickness of the line
• length – specifies the length of the connector line.
• type - specifies the shape of connector line either curve or line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, double>(
enableSmartLabels: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.outside,

Copyright © 2001 - 2019 Syncfusion Inc. 229

Charts Marker and data label

connectorLineSettings: ConnectorLineSettings(
// Type of the connector line
type: ConnectorType.curve
)
)
)
]
)
)
)
);
}

Point text mapping

The dataLabelMapper property is used to map the text from data source.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('USA', 17, '17%'),
ChartData('China', 34, '34%'),
ChartData('Japan', 24, '24%'),
ChartData('Africa', 30, '30%'),
ChartData('UK', 10, '10%')

Copyright © 2001 - 2019 Syncfusion Inc. 230

Charts Marker and data label

];
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
// Map the data label text for each point from the data source
dataLabelMapper: (ChartData data, _) => data.text,
dataLabelSettings: DataLabelSettings(
isVisible: true
)
)
]
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, this.text);
final String x;
final double y;
final String text;
}

Copyright © 2001 - 2019 Syncfusion Inc. 231

Charts Marker and data label

Label template
You can customize the appearance of the data label with your own template using the builder property
of dataLabelSettings.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelMapper: (ChartData data, _) => data.text,
dataLabelSettings: DataLabelSettings(
isVisible: true,
// Templating the data label
builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int
seriesIndex) {
return Container(
height: 30,
width: 30,
child: Image.asset('images/livechart.png')

Copyright © 2001 - 2019 Syncfusion Inc. 232

Charts Legend

);
}
)
)
]
)
)
)
);
}

Legend
The legend 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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
// Enables the legend
legend: Legend(isVisible: true),

Copyright © 2001 - 2019 Syncfusion Inc. 233

Charts Legend

series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Customizing legend
The name property of CartesianSeries is used to define the label for the corresponding series legend
item and for CircularSeries type chart by default values mapped with xValueMapper will be displayed.
The appearance of the label can be customized using the below properties.

• borderWidth – used to change the stroke width of the legend shape.

• borderColor – used to change the stroke color of the legend shape.
• backgroundColor - used to change the background color of legend shape.
• opacity - used to control the transparency of the legend icon shape.
• padding - used to add padding between the icon shape and the text.
• iconHeight - used to change the height of the icon shape.

Copyright © 2001 - 2019 Syncfusion Inc. 234

Charts Legend

• iconWidth - used to change the width of the icon shape.

• borderWidth – used to change the stroke width of the legend icon shape.
• iconBorderColor – used to change the stroke color of the legend icon shape.
• [itemPadding]() - used to add padding between the first legend text and the second legend icon
shape.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
legend: Legend(
isVisible: true,
// Border color and border width of legend
borderColor: Colors.black,
borderWidth: 2
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 235

Charts Legend

Legend title
The following properties are used to define and customize the title of legend.

• text - used to change the text of the title.

• textStyle – used to change the text color, size, font family, fontStyle, and font weight.
• textStyle.color – used to change the color of the text.
• textStyle.fontFamily - used to change the font family for legend text.
• textStyle.fontStyle – used to change the font style for the legend text.
• textStyle.fontSize - used to change the font size for the legend text.
• alignment – used to change the alignment of the title text; it can be near, center, or far.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
legend: Legend(
isVisible: true,
// Legend title
title: LegendTitle(
text:'Country',
textStyle: ChartTextStyle(

Copyright © 2001 - 2019 Syncfusion Inc. 236

Charts Legend

color: Colors.red,
fontSize: 15,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w900
)
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 237

Charts Legend

Toggles the series visibility

You can control the visibility of the series by tapping the legend item. You can enable this feature by
enabling the toggleSeriesVisibility property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
legend: Legend(
isVisible: true,
// Toogles the series visibility on tapping the legend item
toggleSeriesVisibility: true
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Legend visibility
The isVisible property of legend is used to toggle the visibility of legend.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child:SfCircularChart(
legend: Legend(
// Visibility of legend
isVisible: false
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 238

Charts Legend

Legend item visibility

You can control the visibility of a particular series legend item using the isVisibleInLegend property of
series. The default value of the isVisibleInLegend property is true. If it is set to false, then the legend
item for this specific series will not be displayed in the legend.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
legend: Legend(
isVisible: true
),
primaryXAxis: CategoryAxis(),
series: <ColumnSeries>[
ColumnSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
ColumnSeries<ChartData, String>(
// Hiding the legend item for this series
isVisibleInLegend: false,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 239

Charts Legend

Legend overflow
The legend items can be placed in multiple rows or scroll can be enabled using the overflowMode
property if size of the total legend items exceeds the available size. The default value of the
overflowMode property is scroll.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
legend: Legend(
isVisible: true,
// Overflowing legend content will be wraped
overflowMode: LegendItemOverflowMode.wrap
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 240

Charts Legend

)
)
);
}

)
Positioning the legend
You can change the position of the legend inside the chart. The following properties are used to
customize the position of legend. auto position will place the legend at the right, if the chart's width is
greater than the chart's height. Else the legend will be placed at the bottom position.

• [position]() – used to position the legend relatively. The available options are [auto](),
[bottom](), [left](), [right](), and [top](). Defaults to auto.
• [orientation]() - used to change the orientation of the legend, the default value is [auto](). Also
you can set [horizontal]() or [vertical]().

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(

Copyright © 2001 - 2019 Syncfusion Inc. 241

Charts Legend

legend: Legend(
isVisible: true,
// Legend will be placed at the left
position: LegendPosition.left
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
]
)
)
)
);
}

)
Legend item template
You can customize the appearance of legend items with your template by using legendItemBuilder
property of legend. Here you can specify the content that needs to be displayed in the legend text as
widget.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 242

Charts Appearance

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: Container(
child: SfCircularChart(
legend: Legend(
isVisible: true,
// Templating the legend item
legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
return Container(
height: 20,
width: 10,
child: Container(child: Text(point.y.toString()))
);
}
),
series: <CircularSeries>[
PieSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}

Appearance
Chart sizing
Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then
set the size(width/height) to the parent widget.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300, // height of the Container widget
width: 350, // width of the Container widget
child: SfCartesianChart()
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 243

Charts Appearance

Chart margin
Margin to the chart can be specified using the margin property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300,
width: 350,
child: SfCartesianChart(
borderColor: Colors.red,
borderWidth: 2,
// Sets 15 logical pixels as margin for all the 4 sides.
margin: EdgeInsets.all(15)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 244

Charts Appearance

Plot area customization

You can customize the plot area of the chart using the below properties.

• plotAreaBackgroundColor – used to change the plot area background color.

• plotAreaBorderColor – used to change the stroke width of the plot area.
• plotAreaBorderWidth – used to change the stroke color of the plot area.
• plotAreaBackgroundImageUrl - used to set the image path.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300,
width: 350,
child: SfCartesianChart(
plotAreaBorderWidth: 5,
plotAreaBorderColor: Colors.red,
plotAreaBackgroundColor: Colors.lightGreen,
plotAreaBackgroundImageUrl: 'images/livechart.png'
)

Copyright © 2001 - 2019 Syncfusion Inc. 245

Charts Annotation

)
)
)
);
}

Annotation
Chart supports annotations which allows you to mark the specific area of interest in the chart area. You
can add the custom widgets using this annotations feature as depicted below.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget:
Container(
child: const Text('Annotation')
),

Copyright © 2001 - 2019 Syncfusion Inc. 246

Charts Annotation

coordinateUnit: CoordinateUnit.point,
x: 'USA',
y: 20
)
]
)
)
)
)
);
}

Positioning the annotation

The x and y values can be specified with axis units or pixel units, and these can be identified by using
coordinateUnit property. When logicalPixel is specified, the annotation will be placed with respect to
pixel values whereas point is specified, then the annotation will be placed with respect to series point
values.
Positioning based on coordinateUnit as point
To position the annotation based on axis, set the x and yproperties based on axis range values, and set
the coordinateUnit value as point.
DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 247

Charts Annotation

Widget build(BuildContext context) {

return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Container(
child: const Text('Text')
),
coordinateUnit: CoordinateUnit.point,
x: 20, // x position of annotation
y: 40 // y position of annotation
)
]
)
)
)
)
);
}

Positioning based on coordinateUnit as pixels

To position the annotation based on the pixel values, set the CoordinateUnit value as logicalPixel, and
the pixel values in x and y properties of annotation are shown in the following code snippet.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Container(
child: const Text('Text')
),
// Coordinate unit type
coordinateUnit: CoordinateUnit.logicalPixel,
x: 150,
y: 200
)
]
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 248

Charts Annotation

Adding multiple annotation

You can add multiple annotations to the Chart by adding multiple widgets to the [ annotations]()
property. as depicted in below code snippet.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
annotations: <CartesianChartAnnotation>[
// first annotation
CartesianChartAnnotation(
child: Container(child: const Text('High')),
coordinateUnit: CoordinateUnit.logicalPixel,
x: 90,
y: 200),
// second annotation
CartesianChartAnnotation(
child: Container(child: const Text('Low')),
coordinateUnit: CoordinateUnit.logicalPixel,
x: 170,
y: 200)

Copyright © 2001 - 2019 Syncfusion Inc. 249

Charts Annotation

],
)
)
)
),
);
}

Adding annotation for multiple axes

When there are multiple axes in the chart, annotation can be added for a particular axis by using the
xAxisName and yAxisName properties. It is shown in the below code snippet.
DART
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17, 132),
ChartData(20, 34, 134),
ChartData(30, 24, 124),
ChartData(40, 30, 130),
ChartData(50, 10, 110)
];
return Scaffold(
body: SafeArea(
child: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 250

Charts Annotation

child: Container(
child: SfCartesianChart(
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Container(child: const Text('Low')),
coordinateUnit: CoordinateUnit.point,
x: 15,
y: 50
),
CartesianChartAnnotation(
widget: Container(child: const Text('High')),
coordinateUnit: CoordinateUnit.point,
x: 35,
y: 130,
yAxisName: 'YAxis' // Refers to the additional axis
)
],
primaryYAxis: NumericAxis(minimum: 0, maximum: 80),
axes: <ChartAxis>[
NumericAxis(name: 'YAxis', opposedPosition: true)
],
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y2,
yAxisName: 'YAxis'
)
]
)
)
)
)
);
}
class ChartData {
ChartData(this.x, this.y, this.y2);
final double x;
final double y;
final double y2;
}

Copyright © 2001 - 2019 Syncfusion Inc. 251

Charts Zooming and Panning

Zooming and Panning

Pinch zooming
Pinch zooming can be enabled by enablePinching property and defaults to false. Pinching can be
performed by moving two fingers over the chart.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300,
width: 350,
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
// Enables pinch zooming
enablePinching: true
)
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 252

Charts Zooming and Panning

Double tap zooming

Double tap zooming can be enabled using enableDoubleTapZooming property. Defaults to false.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300,
width: 350,
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
// Performs zooming on double tap
enableDoubleTapZooming: true
)
)
)
)
)
);
}

Selection zooming
By specifying enableSelectionZooming property to true, you can long press and drag to select a range on
the chart to be zoomed in.
Selection rectangle customization
You can customize the selection rectangle using the below properties.

• selectionRectBorderWidth – used to change the stroke width of the selection rectangle.

• selectionRectBorderColor – used to change the stroke color of the selection rectangle.
• selectionRectColor - used to change the background color of the selection rectangle.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
height: 300,
width: 350,
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enableSelectionZooming: true,
selectionRectBorderColor: Colors.red,
selectionRectBorderWidth: 1,
selectionRectColor: Colors.grey
)

Copyright © 2001 - 2019 Syncfusion Inc. 253

Charts Zooming and Panning

)
)
)
)
);
}

Following screenshot shows the zoomed area

Copyright © 2001 - 2019 Syncfusion Inc. 254

Charts Zooming and Panning

Show axis tooltip

The axis tooltip on selection zooming can be enabled using enable property of crosshairTooltip. You can
customize the appearance of axis tooltip using the following properties.

• enable - used to enable the axis tooltip.

• borderWidth – used to change the stroke width of the axis tooltip.
• borderColor – used to change the stroke color of the axis tooltip.
• format - by default, axis value will be displayed in the tooltip, and it can be customized by
adding desired text as prefix or suffix.
• textStyle – used to change the text color, size, font family, fontStyle, and font weight.
• textStyle.color – used to change the color of the text.
• textStyle.fontFamily - used to change the font family for chart title.
• textStyle.fontStyle – used to change the font style for the chart title.
• textStyle.fontSize - used to change the font size for the chart title.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
crosshairTooltip: InteractiveTooltip(

Copyright © 2001 - 2019 Syncfusion Inc. 255

Charts Zooming and Panning

// Displays the axis tooltip

enable: true,
borderColor: Colors.red,
borderWidth: 2
)
),
primaryYAxis: NumericAxis(
crosshairTooltip: InteractiveTooltip(
enable: true,
borderColor: Colors.red,
borderWidth: 2
)
),
zoomPanBehavior: ZoomPanBehavior(
enableDoubleTapZooming: true,
enablePinching: true,
// Enables the selection zooming
enableSelectionZooming: true
)
)
)
)
)
);
}

Auto interval on zooming

The enableAutoIntervalOnZooming property determines the update of axis internal based on the
current visible range while zooming the chart. Default value of this property is true. If this property is
false, the nice internal will not be calculated for new range after zoom in and actual interval will be
sustained.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
// Intervals will be fixed, not calculated automatically based on the
visible range on zooming
enableAutoIntervalOnZooming: false
)
)
)
);
}

Maximum zoom level

The maximumZoomLevel property defines the maximum zooming level. Zooming will be stopped after
reaching this value. This defaults to null.

Copyright © 2001 - 2019 Syncfusion Inc. 256

Charts Trackball and Crosshair

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
maximumZoomLevel: 3
)
)
)
)
)
);
}

Also refer zooming, zoom start and zoom end events for customizing the zooming further.
Trackball and Crosshair
Trackball
Trackball feature displays the tooltip for the data points that are closer to the point where you touch on
the chart area. This feature, especially, can be used instead of data label feature when you cannot show
data labels for all data points due to space constraint. This feature can be enabled using enable property
of trackballBehavior. Trackball will be activated once you long-press anywhere on the chart area. Once it
is activated, it will appear in the UI and move based on your touch movement until you stop touching on
the chart.
You can use the following properties to customize the appearance of trackball tooltip.

• lineType - specifies the type of trackball line. By default, vertical line will be displayed.
• lineColor - specifies the color of the trackball line.
• lineWidth - specifies the stroke width of the trackball line.
• lineDashArray- used to render trackball line with dashes.
• shouldAlwaysShow - used to show the trackball even after the touch end.
• tooltipSettings.borderWidth – used to change the stroke width of the axis tooltip.
• tooltipSettings.borderColor – used to change the stroke color of the axis tooltip.
• tooltipSettings.arrowLength - specifies the length of the tooltip arrow.
• tooltipSettings.arrowWidth - specifies the width of the tooltip arrow.
• tooltipSettings.format - by default, axis value will be displayed in the tooltip, and it can be
customized by adding desired text as prefix or suffix.
• tooltipSettings.textStyle – used to change the text color, size, font family, fontStyle, and font
weight.
• tooltipSettings.textStyle.color – used to change the color of the tooltip text.
• tooltipSettings.textStyle.fontFamily - used to change the font family for tooltip text.
• tooltipSettings.textStyle.fontStyle – used to change the font style for tooltip text.
• tooltipSettings.textStyle.fontSize - used to change the font size for tooltip text.
• hideDelay - used to specify disappear delay for trackball.

Copyright © 2001 - 2019 Syncfusion Inc. 257

Charts Trackball and Crosshair

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
trackballBehavior: TrackballBehavior(
// Enables the trackball
enable: true,
tooltipSettings: InteractiveTooltip(
enable: true,
color: Colors.red
)
)
)
)
)
)
);
}

Label display mode

The tooltipDisplayMode property is used to specify whether to display label for all the data points along
the vertical line or display only single label. Following are the options you can set to this property,

Copyright © 2001 - 2019 Syncfusion Inc. 258

Charts Trackball and Crosshair

• floatAllPoints – Displays label for all the data points along the tracker line.
• nearestPoint – Displays label for single data point that is nearer to the touch contact position.
• groupAllPoints – Displays label for all the data points grouped and positioned at the top of the
chart area.
• none - Doesn't display the label.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
trackballBehavior: TrackballBehavior(
enable: true,
// Display mode of trackball tooltip
tooltipDisplayMode: TrackballDisplayMode.floatAllPoints
)
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 259

Charts Trackball and Crosshair

Label alignment
The position of trackball tooltip can be changed using the tooltipAlignment property of
trackballBehavior. The following options are available in tooltipAlignment.

• near - aligns the trackball tooltip to the top position of plot area.
• far - aligns the trackball tooltip to the bottom position of plot area.
• center - aligns the trackball tooltip to the center position of plot area.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
trackballBehavior: TrackballBehavior(
enable: true,
tooltipAlignment: ChartAlignment.near,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints
)
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 260

Charts Trackball and Crosshair

Note: This is applicable only when the tooltipDisplayMode is set to groupAllPoints.

Label format
By default, axis value will be displayed in the tooltip, and it can be customized using [ format]() property
by adding desired text as prefix or suffix.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
trackballBehavior: TrackballBehavior(
enable: true,
tooltipSettings: InteractiveTooltip(
// Formatting trackball tooltip text
format: 'point.x : point.y%'
)
)
)
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 261

Charts Trackball and Crosshair

Activation mode
The activationMode property is used to restrict the visibility of trackball based on the touch actions. The
default value of this property is ActivationMode.longPress.
The ActivationMode enum contains the following values:

• longPress – Activates trackball only when performing the long press action.
• singleTap – Activates trackball only when performing single tap action.
• doubleTap - Activates trackball only when performing double tap action.
• none – Hides the visibility of trackball when setting activation mode to none. It will be activated
when calling the [show]() method.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
trackballBehavior: TrackballBehavior(
enable: true,
// Displays the trackball on single tap
activationMode: ActivationMode.singleTap

Copyright © 2001 - 2019 Syncfusion Inc. 262

Charts Trackball and Crosshair

)
)
)
)
)
);
}

Crosshair
Crosshair has a vertical and horizontal line to view the value of the axis.
Crosshair lines can be enabled by using enable property in the crosshairBehavior. Likewise tooltip label
for an axis can be enabled by using enable property of crosshairTooltip in the corresponding axis. The
hideDelay property can be used to specify a disappear delay for the crosshair.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(
crosshairTooltip: InteractiveTooltip(
// Enables the crosshair tooltip
enable: true
)
),
crosshairBehavior: CrosshairBehavior(
// Enables the crosshair
enable: true
)
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 263

Charts Trackball and Crosshair

Track line customization

The appearance of the track line in crosshair can be customized using the following properties.

• lineType - specifies the type of crosshair line.

• lineColor - specifies the color of the crosshair line.
• lineWidth - specifies the stroke width of the crosshair line.
• lineDashArray - used to render crosshair line with dashes.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
crosshairBehavior: CrosshairBehavior(
enable: true,
lineColor: Colors.red,
lineDashArray: <double>[5,5],
lineWidth: 2,
lineType: CrosshairLineType.vertical
)
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 264

Charts Trackball and Crosshair

)
);
}

Show axis tooltip

The axis tooltip can be enabled using enable property of crosshairTooltip. You can customize the
appearance of axis tooltip using the following properties.

• enable - used to enable the axis tooltip.

• borderWidth – used to change the stroke width of the axis tooltip.
• borderColor – used to change the stroke color of the axis tooltip.
• format - by default, axis value will be displayed in the tooltip, and it can be customized by
adding desired text as prefix or suffix.
• textStyle – used to change the text color, size, font family, fontStyle, and font weight.
• textStyle.color – used to change the color of the text.
• textStyle.fontFamily - used to change the font family for chart title.
• textStyle.fontStyle – used to change the font style for the chart title.
• textStyle.fontSize - used to change the font size for the chart title.

Activation mode
The activationMode property is used to restrict the visibility of trackball based on the touch actions. The
default value of this property is ActivationMode.longPress.
The ActivationMode enum contains the following values:

Copyright © 2001 - 2019 Syncfusion Inc. 265

Charts Tooltip

• longPress – Activates crosshair only when performing the long press action.
• singleTap – Activates crosshair only when performing single tap action.
• doubleTap - Activates crosshair only when performing double tap action.
• none – Hides the visibility of crosshair when setting activation mode to none. It will be activated
when calling the show method.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
child: SfCartesianChart(
crosshairBehavior: CrosshairBehavior(
enable: true,
// Displays the crosshair on single tap
activationMode: ActivationMode.singleTap
)
)
)
)
)
);
}

Also refer crosshair and trackball events for customizing the crosshair and trackball further.
Tooltip
Chart provides tooltip support for all the series. It is used to show information about the segment, when
you tap on the segment. To enable the tooltip, you need to set enableTooltip property as true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
//Enables the tooltip for all the series
tooltipBehavior: TooltipBehavior(
enable: true
),
series: <CartesianSeries>[
LineSeries<ChartData, double>(
//Enables the tooltip for individual series
enableTooltip: true,
)
]
)
)
)
);

Copyright © 2001 - 2019 Syncfusion Inc. 266

Charts Tooltip

Customizing the appearance

You can use the following properties to customize the tooltip appearance.

• color – used to change the background color of tooltip.

• borderWidth – used to change the stroke width of the tooltip.
• borderColor – used to change the stroke color of the tooltip.
• opacity - used to control the transparency of the tooltip.
• duration - specifies the duration for displaying the tooltip that defaults to 3000.
• animationDuration - specifies the duration for animating the tooltip that default to 350.
• elevation - specifies the elevation of tooltip.
• canShowMarker - toggles the visibility of the marker in the tooltip.
• header - specifies the header for tooltip. By default, the series name will be displayed in the
header.
• format - formats the tooltip text. By default, the tooltip will be rendered with x and y-values.
You can add prefix or suffix to x, y, and series name values in the tooltip by formatting them.
• shadowColor - specifies the color of the tooltip shadow.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(

Copyright © 2001 - 2019 Syncfusion Inc. 267

Charts Tooltip

child: Container(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
borderColor: Colors.red,
borderWidth: 5,
color: Colors.lightBlue
)
)
)
)
);
}

Label format
By default, x and y value will be displayed in the tooltip, and it can be customized using format property
as depicted in the below code snippet. You can show the below values in the tooltip. Also you can add
prefix or suffix to these values.

• X value - point.x
• Y value - point.y
• Bubble size - point.size
• Name of the series - series.name

DART

Copyright © 2001 - 2019 Syncfusion Inc. 268

Charts Tooltip

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
// Formatting the tooltip text
format: 'point.y%'
)
)
)
)
);
}

Tooltip positioning
The tooltip can be made to display in the fixed location or at the pointer location itself using the
tooltipPosition property. This defaults to auto.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
tooltipPosition: TooltipPosition.pointer
)
)
)
)
);
}

Tooltip template
You can customize the appearance of the tooltip with your own widget by using the builder property of
tooltipBehavior.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
// Templating the tooltip
builder: (dynamic data, dynamic point, dynamic series,

Copyright © 2001 - 2019 Syncfusion Inc. 269

Charts Tooltip

int pointIndex, int seriesIndex) {

return Container(
child: Text(
'PointIndex : ${pointIndex.toString()}'
)
);
}
)
)
)
)
);
}

Activation mode
The activationMode property is used to restrict the visibility of tooltip based on the touch actions. The
default value of this property is ActivationMode.singleTap.
The ActivationMode enum contains the following values:

• longPress – Activates tooltip only when performing the long press action.
• singleTap – Activates tooltip only when performing single tap action.
• doubleTap - Activates tooltip only when performing double tap action.
• none – Hides the visibility of tooltip when setting activation mode to none.

DART

Copyright © 2001 - 2019 Syncfusion Inc. 270

Charts Selection

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
// Tooltip will be displayed on long press
activationMode: ActivationMode.longPress
)
)
)
)
);
}

Also refer tooltip event for customizing the tooltip further.

Selection
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.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
selectionSettings: SelectionSettings(
// Enables the selection
enable: true
)
)
]
)
)
)
);
}

Customizing the segments

You can customize the segments using the below properties.

• selectedColor - used to change the background color of selected segment.

• unselectedColor - used to change the background color of unselected segment.
• selectedBorderColor - used to change the stroke color of the selected segment.

Copyright © 2001 - 2019 Syncfusion Inc. 271

Charts Selection

• selectedBorderWidth - used to change the stroke width of the selected segment.

• unselectedBorderColor - used to change the stroke color of the unselected segment.
• unselectedBorderWidth - used to change the stroke width of the unselected segment.
• selectedOpacity - used to control the transparency of the selected segment.
• unselectedOpacity - used to control the transparency of the selected segment.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
selectionSettings: SelectionSettings(
enable: true,
selectedColor: Colors.red,
unselectedColor: Colors.grey
)
)
]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 272

Charts Selection

Selection modes
The selection features allows you to select segments in following modes using selectionType property of
chart.

• Point - selects the individual data point.

• Series - selects the entire series.
• Cluster - selects the cluster of points of different series i.e selects the points with same index in
each series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Mode of selection
selectionType: SelectionType.cluster
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 273

Charts Selection

Multi-selection
Multiple selection can be enabled using the enableMultiSelection property of chart.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Enables multiple selection
enableMultiSelection: true
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 274

Charts Selection

Selection on initial rendering

You can select a point or series programmatically on a chart using initialSelectedDataIndexes property of
chart.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
initialSelectedDataIndexes: <IndexesModel>[IndexesModel(1, 0)]
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 275

Charts Cartesian chart methods

Also refer selection event for customizing the selection further.

Cartesian chart methods
Show method in tooltipBehavior
The show method is used to activate the tooltip at the specified location.
DART
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(

Copyright © 2001 - 2019 Syncfusion Inc. 276

Charts Cartesian chart methods

body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: show
),
Container(child: chart)
]
)
)
);
}
void show() {
tooltip.show(121,164);
}
void hide(){
tooltip.hide();
}

Hide method in tooltipBehavior

The hide method is used to hide the displaying tooltip programmatically.
DART
SfCartesianChart chart;
TooltipBehavior tooltip;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
tooltip = TooltipBehavior (enable: true);
chart = SfCartesianChart(
tooltipBehavior: tooltip,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 277

Charts Cartesian chart methods

)
);
}
void hide(){
tooltip.hide();
}

Show method in trackballBehavior

The show method is used to activate the trackball at the specified location.
DART
SfCartesianChart chart;
TrackballBehavior trackball;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
trackball = TrackballBehavior(enable: true);
chart = SfCartesianChart(
trackballBehavior: trackball,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: show
),
Container(child: chart)
]
)
)
);
}
void show() {
trackball.show(121, 164);
}

Hide method in trackballBehavior

The hide method is used to hide the displaying trackball programmatically.
DART
SfCartesianChart chart;

Copyright © 2001 - 2019 Syncfusion Inc. 278

Charts Cartesian chart methods

TrackballBehavior trackball;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
// Add the required data
];
trackball = TrackballBehavior(enable: true);
chart = SfCartesianChart(
trackballBehavior: trackball,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
],
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide() {
trackball.hide();
}

Show method in crosshairBehavior

The show method is used to activate the crosshair at the specified location.
DART
SfCartesianChart chart;
CrosshairBehavior crosshair;
@override
Widget build(BuildContext context) {
// Add the required data
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
];
crosshair = CrosshairBehavior(enable: true);
chart = SfCartesianChart(
crosshairBehavior: crosshair,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(

Copyright © 2001 - 2019 Syncfusion Inc. 279

Charts Cartesian chart methods

enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Show'),
onPressed: show
),
Container(child: chart)
]
)
)
);
}
void show() {
crosshair.show(121, 164);
}

Hide method in crosshairBehavior

The hide method is used to hide the displaying crosshair programmatically.
DART
SfCartesianChart chart;
CrosshairBehavior crosshair;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
// Add the required data
];
crosshair = CrosshairBehavior(enable: true);
chart = SfCartesianChart(
crosshairBehavior: crosshair,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Hide'),

Copyright © 2001 - 2019 Syncfusion Inc. 280

Charts Cartesian chart methods

onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide() {
crosshair.hide();
}

SelectionIndex method in selectionSettings

The selectionIndex method is used to select the data point programmatically. The required arguments
are listed below.

• pointIndex - specifies the point index value.

• seriesIndex - specifies the series index value.
• selectionType - specifies the SelectionType and this is an optional parameter.
• multiSelect - bool property specifies the multiple selection and this is an optional parameter.

DART
SfCartesianChart chart;
SelectionSettings selection;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
hartData(10, 17),
ChartData(20, 34)
// Add the required data
];
selection = SelectionSettings(enable: true);
chart = SfCartesianChart(
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
selectionSettings: selection
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Select'),
onPressed: select
),
Container(child: chart)
]
)

Copyright © 2001 - 2019 Syncfusion Inc. 281

Charts Cartesian chart methods

)
);
}
void select() {
selection.selectionIndex(1, 0);
}

ZoomIn method in zoomPanBehavior

The zoomIn method is used to increases the magnification of the plot area.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomIn();
}

Copyright © 2001 - 2019 Syncfusion Inc. 282

Charts Cartesian chart methods

ZoomOut method in zoomPanBehavior

The zoomOut method is used to decreases the magnification of the plot area.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomOut();
}

zoomByFactor method in zoomPanBehavior

The zoomByFactor method changes the zoom level using zoom factor. Here, you can pass the zoom
factor of an axis to magnify the plot area. The value ranges from 0 to 1.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;

Copyright © 2001 - 2019 Syncfusion Inc. 283

Charts Cartesian chart methods

@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomByFactor(0.5);
}

ZoomByRect method in zoomPanBehavior

The zoomByRect method zooms the chart for a given rectangle value. Here, you can pass the rectangle
with the left, right, top, and bottom values, using which the selection zooming will be performed.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add the required data
];

Copyright © 2001 - 2019 Syncfusion Inc. 284

Charts Cartesian chart methods

zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.zoomByRect(const Rect.fromLTRB(200, 300, 300, 400));
}

ZoomToSingleAxis method in zoomPanBehavior

The zoomToSingleAxis method changes the zoom level of an appropriate axis. Here, you need to pass
axis, zoom factor, zoom position of the zoom level that needs to be modified.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
NumericAxis xAxis;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
xAxis = NumericAxis();

Copyright © 2001 - 2019 Syncfusion Inc. 285

Charts Cartesian chart methods

chart = SfCartesianChart(
zoomPanBehavior: zooming,
primaryXAxis: xAxis,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
final double zoomPosition = 0.5;
final double zoomFactor = 0.4;
zooming.zoomToSingleAxis(xAxis,zoomPosition,zoomFactor);
}

PanToDirection method in zoomPanBehavior

The panToDirection method pans the plot area for given left, right, top, and bottom directions. To
perform this action, the plot area needs to be in zoomed state.
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
NumericAxis xAxis;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34),
//add required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
xAxis = NumericAxis();
chart = SfCartesianChart(
zoomPanBehavior: zooming,

Copyright © 2001 - 2019 Syncfusion Inc. 286

Charts Cartesian chart methods

primaryXAxis: xAxis,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Pan'),
onPressed: pan
),
Container(child: chart)
]
)
)
);
}
void pan() {
//In similar way, specify other directions like bottom, left and right
zooming.panToDirection('top');
}

Reset method in zoomPanBehavior

The reset method returns the plot area back to its original position after zooming..
DART
SfCartesianChart chart;
ZoomPanBehavior zooming;
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, 17),
ChartData(20, 34)
//add the required data
];
zooming = ZoomPanBehavior(
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enablePinching: true,
enablePanning: true
);
chart = SfCartesianChart(
zoomPanBehavior: zooming,
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)

Copyright © 2001 - 2019 Syncfusion Inc. 287

Charts Events

]
);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
FlatButton(
child: Text('Zoom'),
onPressed: zoom
),
Container(child: chart)
]
)
)
);
}
void zoom() {
zooming.reset();
}

Events
The below events are for Cartesian chart.
onTooltipRender
Triggers when the tooltip is rendering. Here, you can customize the text, header, x and y-positions. The
onTooltipRender event contains the following arguments.

• text - specifies the content of the tooltip.

• header - specifies the header content of the tooltip.
• locationX - specifies the x position of tooltip.
• locationY - specifies the y position of tooltip.
• seriesIndex - specifies the current series index.
• dataPoints - holds the data point collection.
• pointIndex - specifies the current point index.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
tooltipBehavior: TooltipBehavior(enable: true),
onTooltipRender: (TooltipArgs args) {
args.text = 'Customized Text';
}
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 288

Charts Events

onActualRangeChanged
Triggers when the visible range of an axis is changed, i.e. value changes for minimum, maximum, and
interval. Here, you can customize the visible range of an axis. The onActualRangeChanged event
contains the following arguments.

• axisName - specifies the axis name.

• axis - holds the information about the current axis.
• actualMin - specifies the actual minimum range of an axis.
• actualMax - specifies the actual maximum range of an axis.
• actualInterval - specifies the actual interval of an axis.
• visibleMin - specifies the visible minimum range of an axis.
• visibleMax - specifies the visible maximum range of an axis.
• visibleInterval - specifies the visible interval of an axis.
• orientation - specifies the current axis orientation.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onActualRangeChanged: (ActualRangeChangedArgs args){
if (args.axisName == 'primaryYAxis'){
args.visibleMin = 10;
}
}
)
)
);
}

onAxisLabelRender
Triggers while rendering the axis labels. Text and text styles such as color, font size, and font weight can
be customized. The onAxisLabelRender event contains the following arguments.

• text - specifies the axis label to be rendered.

• value - specifies the actual value of the current axis label.
• axisName - specifies the axis name.
• orientation - specifies the current axis orientation.
• axis - holds the information about the current axis.
• textStyle – used to change the text color, size, font family, font style, and font weight.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onAxisLabelRender: (AxisLabelRenderArgs args) {

Copyright © 2001 - 2019 Syncfusion Inc. 289

Charts Events

if(args.axisName == 'primaryXAxis'){
args.text = 'Text';
args.textStyle.color = Colors.red;
}
}
)
)
);
}

onDataLabelRender
Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be
customized. The onDataLabelRender event contains the following arguments.

• text - specifies the content of the data label.

• textStyle – used to change the text color, size, font family, font style, and font weight.
• pointIndex - specifies the current point index.
• series - specifies current series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onDataLabelRender:(DataLabelRenderArgs args){
args.text = 'Data label';
},
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
dataLabelSettings: DataLabelSettings(
isVisible: true
)
)
]
)
)
);
}

onLegendItemRender
Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The
onLegendItemRender event contains the following arguments.

• text - specifies the content of the legend.

• pointIndex - specifies the current point index that is applicable for circular chart type alone.
• seriesIndex - specifies the current series index.
• legendIconType - specifies the shape of the legend.

DART

Copyright © 2001 - 2019 Syncfusion Inc. 290

Charts Events

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
legend: Legend(isVisible: true),
onLegendItemRender: (LegendRenderArgs args){
args.text = 'Legend Text';
args.legendIconType = LegendIconType.diamond;
}
)
)
);
}

onTrackballPositionChanging
Triggers while the trackball position is changing. Here, you can customize the text of the trackball.The
onTrackballPositionChanging event contains the following argument.

• chartPointInfo - holds the information about the current point.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onTrackballPositionChanging: (TrackballArgs args) {
args.chartPointInfo.label = 'Custom Text';
},
trackballBehavior: TrackballBehavior(
enable: true
)
)
);
}

onCrosshairPositionChanging
Triggers while the crosshair position is changing. Here, you can customize the text and line color of the
crosshair.The onCrosshairPositionChanging event contains the following arguments.

• text - specifies the crosshair content.

• value - specifies the actual value of the crosshair.
• axisName - specifies the axis name.
• orientation - specifies the current axis orientation.
• axis - holds the information about the current axis.
• lineColor - specifies the line color of the crosshair line.

DART
@override

Copyright © 2001 - 2019 Syncfusion Inc. 291

Charts Events

Widget build(BuildContext context) {

return Scaffold(
body: Center(
child: SfCartesianChart(
onCrosshairPositionChanging: (CrosshairRenderArgs args){
args.text = 'crosshair';
},
crosshairBehavior: CrosshairBehavior(
enable: true
)
)
);
}

onZooming
Triggers when the zooming action is in progress. The onZooming event contains the following
arguments.

• axis - holds the information about the current axis.

• currentZoomPosition - specifies the current zoom position of an axis.
• currentZoomFactor - specifies the current zoom factor of an axis.
• previousZoomPosition - specifies the previous zoom position of an axis.
• previousZoomFactor - specifies the previous zoom factor of an axis.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enableDoubleTapZooming: true,
enablePanning: true,
enablePinching: true,
enableSelectionZooming: true
),
onZooming: (ZoomPanArgs args){
print(args.currentZoomFactor);
print(args.currentZoomPosition);
}
)
);
}

onZoomStart
Triggers when zooming action begins. The onZoomStart event contains the following arguments.

• axis - holds the information about the current axis.

• currentZoomPosition - specifies the current zoom position of an axis.
• currentZoomFactor - specifies the current zoom factor of an axis.
• previousZoomPosition - specifies the previous zoom position of an axis.

Copyright © 2001 - 2019 Syncfusion Inc. 292

Charts Events

• previousZoomFactor - specifies the previous zoom factor of an axis.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enableDoubleTapZooming: true,
enablePanning: true,
enablePinching: true,
enableSelectionZooming: true
),
onZoomStart: (ZoomPanArgs args){
print(args.currentZoomFactor);
print(args.currentZoomPosition);
}
)
);
}

onZoomEnd
Triggers when the zooming action is completed. The onZoomEnd event contains the following
arguments.

• axis - holds the information about the current axis.

• currentZoomPosition - specifies the current zoom position of an axis.
• currentZoomFactor - specifies the current zoom factor of an axis.
• previousZoomPosition - specifies the previous zoom position of an axis.
• previousZoomFactor - specifies the previous zoom factor of an axis.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enableDoubleTapZooming: true,
enablePanning: true,
enablePinching: true,
enableSelectionZooming: true
),
onZoomEnd: (ZoomPanArgs args){
print(args.currentZoomFactor);
print(args.currentZoomPosition);
}
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 293

Charts Events

onZoomReset
Triggers when zoomed state is reset. The onZoomReset event contains the following arguments.

• axis - holds the information about the current axis.

• currentZoomPosition - specifies the current zoom position of an axis.
• currentZoomFactor - specifies the current zoom factor of an axis.
• previousZoomPosition - specifies the previous zoom position of an axis.
• previousZoomFactor - specifies the previous zoom factor of an axis.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enableDoubleTapZooming: true,
enablePanning: true,
enablePinching: true,
enableSelectionZooming: true
),
onZoomReset: (ZoomPanArgs args){
print(args.currentZoomFactor);
print(args.currentZoomPosition);
}
)
);
}

onPointTapped
Triggers when tapping the series point. The onPointTapped event contains the following arguments.

• seriesIndex - specifies the current series index.

• pointIndex - specifies the current point index.
• dataPoints - holds the data point collection.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onPointTapped: (PointTapArgs args){
print(args.seriesIndex);
print(args.pointIndex);
}
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 294

Charts Events

onAxisLabelTapped
Triggers when tapping the axis label. The onAxisLabelTapped event contains the following arguments.

• axis - holds the information about the current axis.

• text - specifies the content of the axis label.
• value - specifies the actual value of the current axis label.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onAxisLabelTapped: (AxisLabelTapArgs args) {
print(args.text);
}
)
);
}

onLegendTapped
Triggers when tapping the legend item. The onLegendTapped event contains the following arguments.

• seriesIndex - specifies the current series index.

• pointIndex - specifies the current point index that is applicable for circular series.
• series - specifies the current series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onLegendTapped: (LegendTapArgs args) {
print(args.seriesIndex);
},
legend: Legend(isVisible: true)
)
);
}

onSelectionChanged
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor,
selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth
properties. The onSelectionChanged event contains the following arguments.

• series - specifies current series.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.

Copyright © 2001 - 2019 Syncfusion Inc. 295

Charts Events

• selectedColor - specifies color of the selected data points or series.

• unselectedColor - specifies color of the unselected data points or series.
• selectedBorderColor - specifies border color of the selected data points or series.
• selectedBorderWidth - specifies border width of the selected data points or series.
• unselectedBorderColor - specifies border color of the unselected data points or series.
• unselectedBorderWidth - specifies border width of the unselected data points or series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCartesianChart(
onSelectionChanged: (SelectionArgs args){
args.selectedColor = Colors.red;
args.unselectedColor = Colors.lightGreen;
},
series: <CartesianSeries>[
ColumnSeries<ChartData, double>(
selectionSettings: SelectionSettings(
enable: true,
)
)
]
)
);
}

The below events are for Circular chart.

onLegendItemRender
Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The
onLegendItemRender event contains the following arguments.

• text - specifies the content of the legend.

• pointIndex - specifies the current point index that is applicable for circular chart type alone.
• seriesIndex - specifies the current series index.
• legendIconType - specifies the shape of the legend.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
legend: Legend(isVisible: true),
onLegendItemRender: (LegendRenderArgs args){
args.text = 'Legend Text';
args.legendIconType = LegendIconType.diamond;
}
)

Copyright © 2001 - 2019 Syncfusion Inc. 296

Charts Events

)
);
}

onTooltipRender
Triggers while tooltip is rendering. Here, you can customize the text, header, x and y-positions. The
onTooltipRender event contains the following arguments.

• text - specifies the content of the tooltip.

• header - specifies the header content of the tooltip.
• locationX - specifies the x position of tooltip.
• locationY - specifies the y position of tooltip.
• seriesIndex - specifies the current series index.
• dataPoints - holds the data point collection.
• pointIndex - specifies the current point index.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
onTooltipRender: (TooltipArgs args){
args.text = 'Custom Text';
},
tooltipBehavior: TooltipBehavior(enable: true),
)
)
);
}

onDataLabelRender
Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be
customized. The onDataLabelRender event contains the following arguments.

• text - specifies the content of the data label.

• textStyle – used to change the text color, size, font family, font style, and font weight.
• pointIndex - specifies the current point index.
• series - specifies current series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
onDataLabelRender:(DataLabelRenderArgs args){
args.text = 'Data label';
},

Copyright © 2001 - 2019 Syncfusion Inc. 297

Charts Events

series: <CircularSeries>[
PieSeries<ChartData, String>(
dataLabelSettings: DataLabelSettings(
isVisible: true
)
)
]
)
)
);
}

onPointTapped
Triggers when tapping the series point. The onPointTapped event contains the following arguments.

• seriesIndex - specifies the current series index.

• pointIndex - specifies the current point index.
• dataPoints - holds the data point collection.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
onPointTapped: (PointTapArgs args){
print(args.seriesIndex);
print(args.pointIndex);
}
)
);
}

onLegendTapped
Triggers when tapping the legend item. The onLegendTapped event contains the following arguments.

• seriesIndex - specifies the current series index.

• pointIndex - specifies the current point index that is applicable for circular series.
• series - specifies the current series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
onLegendTapped: (LegendTapArgs args) {
print(args.seriesIndex);
},
legend: Legend(isVisible: true)
)

Copyright © 2001 - 2019 Syncfusion Inc. 298

Radial Gauge Overview

);
}

onSelectionChanged
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor,
selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth
properties. The onSelectionChanged event contains the following arguments.

• series - specifies current series.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.
• selectedColor - specifies color of the selected data points or series.
• unselectedColor - specifies color of the unselected data points or series.
• selectedBorderColor - specifies border color of the selected data points or series.
• selectedBorderWidth - specifies border width of the selected data points or series.
• unselectedBorderColor - specifies border color of the unselected data points or series.
• unselectedBorderWidth - specifies border width of the unselected data points or series.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfCircularChart(
onSelectionChanged: (SelectionArgs args){
args.selectedColor = Colors.red;
args.unselectedColor = Colors.lightGreen;
},
series: <CircularSeries>[
PieSeries<ChartData, String>(
selectionSettings: SelectionSettings(
enable: true
)
)
]
)
);
}

Radial Gauge
Overview
Syncfusion flutter radial gauge is a data visualization widget, which is written in dart, to create modern,
interactive, and animated gauge that is used to craft high-quality mobile app user interfaces using
Flutter.

Copyright © 2001 - 2019 Syncfusion Inc. 299

Radial Gauge Overview

Key Features

• Axes - The radial gauge axis is a circular arc in which a set of values are displayed along a linear
or custom scale based on the design requirements. Axis elements, such as labels, ticks, and axis
line, can be easily customized with built-in properties
• Ranges - Gauge range is a visual element that helps to quickly visualize a value where it falls on
the axis. The text can be easily annotated in range to improve the readability.
• Pointers - Pointer is used to indicate values on an axis. Radial gauge has three types of pointers:
needle pointer, marker pointer, and range pointer. All the pointers can be customized as
needed.
• Pointer Animation - Animates the pointer in a visually appealing way when the pointer moves
from one value to another. Gauge supports various pointer animations.
• Pointer interaction - Radial gauge provides an option to drag a pointer from one value to
another. It is used to change the value at run time.
• Annotations - Adds multiple widgets such as text and image as an annotation at a specific point
of interest in the radial gauge.

You can get the sample in the following link: Flutter Gauges.

Copyright © 2001 - 2019 Syncfusion Inc. 300

Radial Gauge Getting Started

Getting Started
This section explains the steps required to add the radial gauge and its elements such as title, axis,
range, pointer and annotation. This section covers only basic features needed to know to get started
with Syncfusion radial gauge.
To get start quickly with our Flutter radial gauge widget, you can check on this video.
<style>#flutterRadialGaugeVideoTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutterRadialGaugeVideoTutorial'
src='https://www.youtube.com/embed/2NuipO7j2tA'></iframe>
Add Flutter Radial Gauge to an application
Create a simple project using the instructions given in the Getting Started with your first Flutter app
documentation.
Add dependency
Add the Syncfusion Flutter Gauge dependency to your pubspec.yaml file.
DART
dependencies:
syncfusion_flutter_gauges: ^1.0.0-beta

Get packages
Run the following command to get the required packages.
DART
$ flutter pub get

Import package
Import the following package in your Dart code.
DART
import 'package:syncfusion_flutter_gauges/gauges.dart';

Initialize the radial gauge

After the package has been imported, initialize the SfRadialGauge as a child of any widget such as
container widget.
DART
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child:SfRadialGauge()
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 301

Radial Gauge Getting Started

);
}

Add title
You can add a title to the radial gauge to provide information to users about the designed gauge. The
title can be set to gauge as demonstrated in following code snippet.
DART
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SfRadialGauge(
title:GaugeTitle(text: 'Speedometer', textStyle: TextStyle(
fontSize: 20.0,fontWeight: FontWeight.bold))
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 302

Radial Gauge Getting Started

Add axis
Axes contain a list of axis elements, where you can add any number of radial axes inside the gauge. You
can specify the minimum and maximum values of axis using the minimum and maximum properties as
demonstrated in the following code snippet.
DART
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(minimum: 0, maximum: 150)]
)
)
)
)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 303

Radial Gauge Getting Started

Add range
Ranges contain a list of range elements, where you can add any number of ranges inside the axis. You
can specify the start value, end value, and color for range using the startValue, endValue, and color
properties as demonstrated in the following code.
DART
axes: <RadialAxis>[
RadialAxis(minimum: 0,maximum: 150,
ranges: <GaugeRange>[
GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth:
10,endWidth:10),
GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth:
10,endWidth: 10),
GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth:
10,endWidth: 10)]
)]

Copyright © 2001 - 2019 Syncfusion Inc. 304

Radial Gauge Getting Started

Add pointer
Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as
needlePointer, rangePointer and markerPointer inside the axis to indicate the value.
DART
axes: <RadialAxis>[
RadialAxis(minimum: 0,maximum: 150,
pointers: <GaugePointer>[NeedlePointer(value:90)]
)]

Copyright © 2001 - 2019 Syncfusion Inc. 305

Radial Gauge Getting Started

Add annotation
You can add any number of widgets such as text or image as an annotation inside the axis. The position
of annotation can be customized using the angle and positionFactor properties as demonstrated in the
following code.
DART
axes: <RadialAxis>[
RadialAxis(minimum: 0,maximum: 150,
annotations: <GaugeAnnotation>[
GaugeAnnotation(widget: Container(child:
Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
angle: 90,positionFactor: 0.5)]
)]

Copyright © 2001 - 2019 Syncfusion Inc. 306

Radial Gauge Getting Started

The following code example gives you the complete code of above configurations.
DART
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';
void main() => runApp(ChartApp());
class ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(minimum: 0,maximum: 150,
ranges: <GaugeRange>[
GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth:
10,endWidth: 10),
GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth:
10,endWidth: 10),
GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth:
10,endWidth: 10)],
pointers: <GaugePointer>[NeedlePointer(value:90)],
annotations: <GaugeAnnotation>[
GaugeAnnotation(widget: Container(child:
Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))),
angle: 90,positionFactor: 0.5)]
)]
)
)
)

Copyright © 2001 - 2019 Syncfusion Inc. 307

Radial Gauge Title

)
);
}
}

Title
You can define and customize the gauge title using the title property of SfRadialGauge. The text property
of GaugeTitle is used to set text to the title.
The following properties are used to customize the appearance of title:

• backgroundColor - Changes the background color.

• borderWidth –Changes the border width.
• borderColor – Changes the border color.
• textStyle - Changes the text color, size, font family, fontStyle, and font weight.

Text Alignment
You can align the title text content horizontally to the near, center, or far to the gauge using the
alignment property oftitle.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
title: GaugeTitle(text: 'SfRadialGauge',
backgroundColor: Colors.lightBlueAccent,
textStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: Colors.black, fontFamily: 'Times'),
borderColor: Colors.indigo, borderWidth: 3,
alignment: GaugeAlignment.near),
axes: <RadialAxis>[RadialAxis()],)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 308

Radial Gauge Axis

Axis
The radial axis is a circular arc in which a set of values are displayed along a linear or custom scale based
on the design requirements. Axis elements such as labels, ticks, and axis line can be easily customized
with built-in properties.
Axis Customization
Axis minimum and maximum
The minimum and maximum properties of an axis can be used to customize the axis range.The default
value of minimum is 0, and the default value of maximum is 100.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(minimum: -60, maximum: 60
)
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 309

Radial Gauge Axis

Angle Customization
The start and end angles of radial axis can be customized using the startAngle and endAngle properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(startAngle: 180, endAngle: 90,
)
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 310

Radial Gauge Axis

Radius customization
The radius of the radial axis can be customized using the radiusFactor property. The default value of the
radiusFactor is 0.95. The value of radiusFactor ranges from 0 to 1. For example, When the radiusFactor
value is 1, the full radius will be considered for rendering the axis, and when the radiusFactor value is
0.5, then half of the radius value will be considered for rendering the circle.
DART
@@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(),
RadialAxis(radiusFactor: 0.5)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 311

Radial Gauge Axis

Axis position customization

The position of the radial axis can be customized using the centerX and centerY values. The default value
of centerX and centerY properties is 0.5. Therefore, the axis will be positioned in the center of provided
size of gauge.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(startAngle: 270, endAngle: 270, interval: 10),
RadialAxis( centerY: 0.55, centerX: 0.35,
radiusFactor: 0.3, startAngle: 270,
endAngle: 270, interval: 20
)
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 312

Radial Gauge Axis

Axis label rotation

The axis label can be rotated based on its current angle using the needsRotateLabels property of axis.
The default value of needsRotateLabels is false.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(needsRotateLabels: true)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 313

Radial Gauge Axis

Edge label customization

The visibility of the first and last labels of an axis can be customized using the showFirstLabel and
showLastLabel properties.

• showFirstLabel – Enables or disables the first label of the axis.

• showLastLabel – Enables or disables the last label of the axis.

The default value of both the showFirstLabel and the showLastLabel properties is true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis( interval: 1, showFirstLabel: false,
startAngle: 270, endAngle: 270, minimum: 0, maximum: 12),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 314

Radial Gauge Axis

Axis direction customization

The direction of radial axis can be customized by its isInversed property.
When the isInversed property is true, the axis can be placed in counter-clockwise direction. When the
isInversed property is set to false, the axis will be positioned in clockwise direction.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis( isInversed: true)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 315

Radial Gauge Axis

Maximum number of labels per 100 logical pixels

By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum
number of labels that should present within 100 logical pixels length can be customized using the
maximumLabels property of the axis. This property is applicable only for automatic range calculation
and will not work if you set value for interval property of an axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis( maximumLabels: 5)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 316

Radial Gauge Axis

Interval
The interval between labels can be customized using the interval property of axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(interval: 20)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 317

Radial Gauge Axis

Axis line customization

The radial axis line can be customized using the axisLineStyle property. The following properties can be
customized using axisLineStyle.

• thickness – Customizes the thickness of axis line.

• thicknessUnit – Allows to specify the thickness of the axis either in logical pixel or factor. Its
default value is logicalPixel.
• color – Customizes the color of the axis line.
• cornerStyle – Allows to customize the corner of the axis line.
• dashArray – Allows to customize the axis line as dashed circular arc.
• gradient - Allows to apply the gradient for axis line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle(thickness: 0.1,
thicknessUnit: GaugeSizeUnit.factor, color: Colors.deepPurple,)),
]
),
),
);
}

Rounded Corners
The cornerStyle property of axisLineStyle specifies the corner type for axis line. The corners can be
customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this
property is bothFlat.

Copyright © 2001 - 2019 Syncfusion Inc. 318

Radial Gauge Axis

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(axisLineStyle: AxisLineStyle(thickness: 15,
cornerStyle:CornerStyle.bothCurve)),
]
),
),
);
}

Dashed axis line

The dashArray property of axisLineStyle allows to render the dashed axis line.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle( dashArray: <double>[5,5])),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 319

Radial Gauge Axis

Gradient support
The gradient property of axisLineStyle allows to specify the smooth color transition to the axis line by
specifying the different colors based on provided factor value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle(thickness: 0.1,
thicknessUnit: GaugeSizeUnit.factor,
gradient: const SweepGradient(
colors: <Color>[Color(0xFFFF7676), Color(0xFFF54EA2)],
stops: <double>[0.25, 0.75]
),
)
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 320

Radial Gauge Axis

Axis line visibility

The visibility of the axis line can be customized using the showAxisLine property of axis. By default, this
property is set to true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(showAxisLine: false)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 321

Radial Gauge Axis

Background image support

Radial axis allows to add an image frame as its background using backgroundImage property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(showAxisLine: false,
radiusFactor: 1,
showLastLabel: false,
needsRotateLabels: true,
tickOffset: 0.32,
offsetUnit: GaugeSizeUnit.factor,
onLabelCreated: axisLabelCreated,
startAngle: 270,
endAngle: 270,
labelOffset: 0.05,
maximum: 360,
minimum: 0,
interval: 30,
minorTicksPerInterval: 4,
axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494)),
minorTickStyle: MinorTickStyle(color: const Color(0xFF616161),
thickness: 1.6,
length: 0.058,
lengthUnit: GaugeSizeUnit.factor),
majorTickStyle: MajorTickStyle(color: const Color(0xFF949494),
thickness: 2.3,
length: 0.087,
lengthUnit: GaugeSizeUnit.factor),

Copyright © 2001 - 2019 Syncfusion Inc. 322

Radial Gauge Axis

backgroundImage: const AssetImage(

'images/dark_theme_gauge.png'),
pointers: <GaugePointer>[
MarkerPointer(value: 90,
color: const Color(0xFFDF5F2D),
enableAnimation: true,
animationDuration: 1200,
markerOffset: 0.71,
offsetUnit: GaugeSizeUnit.factor,
markerType: MarkerType.triangle,
markerHeight: 10,
markerWidth: 15)
],
annotations: <GaugeAnnotation>[
GaugeAnnotation(angle: 270,
positionFactor: 0.025,
widget: Text('90',
style: TextStyle(
color: const Color(0xFFDF5F2D),
fontWeight: FontWeight.bold,
fontSize: 22
)
)
)
]
)
],
),
)
),
);
}
void axisLabelCreated(AxisLabelCreatedArgs args) {
if (args.text == '90') {
args.text = 'E';
args.labelStyle = GaugeTextStyle(
color: const Color(0xFFDF5F2D));
}else{
if (args.text == '0') {
args.text = 'N';
}else if (args.text == '180') {
args.text = 'S';
} else if (args.text == '270') {
args.text = 'W';
}
args.labelStyle = GaugeTextStyle(
color: const Color(0xFFFFFFFF),
);
}
}

Copyright © 2001 - 2019 Syncfusion Inc. 323

Radial Gauge Axis

Label style customization

The axis labels can be customized using the axisLabelStyle property of axis. The following properties can
be customized using the axisLabelStyle

• color – Allows to customize the color of the labels.

• fontFamily – Allows to specify the font family for labels.
• fontStyle – Allows to specify the font style for labels.
• fontWeight – Allows to specify the font weight for labels.
• fontSize – Allows to specify the font size for labels.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(axisLabelStyle: GaugeTextStyle(
color: Colors.red, fontSize: 15,
fontStyle:FontStyle.italic,
fontWeight: FontWeight.bold, fontFamily: 'Times') ),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 324

Radial Gauge Axis

Formatting axis label

The following property of the axis allows to customize the axis label text.

• labelFormat - Allows to add prefix or suffix with the axis labels.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(labelFormat: '{value}m' ),]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 325

Radial Gauge Axis

• numberFormat- Allows to customize the axis label with the [globalized label format].

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
numberFormat: NumberFormat.compactSimpleCurrency()),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 326

Radial Gauge Axis

Label visibility
The showLabels property of axis allows to enable or disable the visibility of labels. The default value of
the property is true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(showLabels: false ),]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 327

Radial Gauge Axis

Tick customization
The major and minor tick lines of an axis can be customized using the majorTickStyle and minorTickStyle
properties, respectively. The following properties can be customized for both the major and the minor
ticks:

• color – Allows to customize the tick color.

• thickness – Allows to customize the thickness of ticks.
• length – Specifics the length of ticks.
• lengthUnit – Allows to specify the tick length either in logical pixels or factor.
• dashArray – Specify the dash array to draw the dashed tick line.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(majorTickStyle: MajorTickStyle(length: 0.1,
lengthUnit: GaugeSizeUnit.factor, thickness: 1.5, color: Colors.black),
minorTickStyle: MinorTickStyle(length: 0.05,
lengthUnit: GaugeSizeUnit.factor, thickness: 1.5, color: Colors.black)
)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 328

Radial Gauge Axis

Dashed tick lines

The dashArray property of both the majorTickStyle and minorTickStyle allows to draw the tick line as
dashed line.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
majorTickStyle: MajorTickStyle(length: 20, dashArray: <double>[5,2.5]),
minorTickStyle: MinorTickStyle(length: 15, dashArray: <double>[3,2.5])),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 329

Radial Gauge Axis

Minor tick interval

The major ticks are generated based on the interval property.Like major ticks, the minor ticks are
calculated using the minorTicksPerInterval property of axis. By default, the value of this property is 1.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(minorTicksPerInterval: 4
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 330

Radial Gauge Axis

Tick line visibility

The showTicks property of the axis is used to enable or disable the visibility of both the major and the
minor ticks of axis. The default value of this property is true.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(showTicks: false)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 331

Radial Gauge Axis

Label and tick Placement

The radial axis allows to position the labels and ticks either inside or outside the axis line using the
labelsPosition and ticksPosition properties.By default, both labels and ticks are positioned inside the axis
line.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
labelsPosition: ElementsPosition.outside,
ticksPosition: ElementsPosition.outside)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 332

Radial Gauge Axis

Tick position customization

The ticks can be moved near or far to the axis line using the tickOffset property. The offsetUnit property
of axis allows to specify the tick offset either in factor or logical pixels, and the default value of
offsetUnit is logicalPixel.
The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along
with the ticks.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
tickOffset: 20)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 333

Radial Gauge Axis

The following code example shows how to tick offset with the offsetUnit property of axis.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(tickOffset: 0.2,
labelOffset: 0.2, offsetUnit: GaugeSizeUnit.factor
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 334

Radial Gauge Axis

Label position customization

The labelOffset property allows to adjust the distance between the tick end and the labels. The
offsetUnit property of axis allows to specify the label offset either in factor or logical pixels. By default,
the value of the label offset is 15.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 335

Radial Gauge Axis

The offsetUnit property of axis is common for both the tickOffset and labelOffset
Note: GaugeSizeUnit allows to specify the value either in logical pixels or in factor. GaugeSizeUnit.factor
ranges from 0 to 1. For example, when setting factor as 0.5, the half of axis radius value will be
considered.
Multiple axis
The Radial Gauge allows you to add n number of radial axis in its axes collection. You can also customize
individual axis added in the axes collection.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[ RadialAxis(minimum: 0 , maximum: 100, interval: 10,
ticksPosition: ElementsPosition.outside,
labelsPosition: ElementsPosition.outside,
minorTicksPerInterval: 5,
radiusFactor: 0.9, labelOffset: 15,
minorTickStyle: MinorTickStyle(thickness: 1.5,
color: Color.fromARGB(255, 143, 20, 2),
length: 0.07, lengthUnit: GaugeSizeUnit.factor),
majorTickStyle: MinorTickStyle(thickness: 1.5,
color: Color.fromARGB(255, 143, 20, 2),
length: 0.15, lengthUnit: GaugeSizeUnit.factor,),
axisLineStyle: AxisLineStyle( thickness: 3,
color: Color.fromARGB(255, 143, 20, 2), ),
axisLabelStyle: GaugeTextStyle(fontSize: 12,
color:Color.fromARGB(255, 143, 20, 2),),),
RadialAxis(minimum: 0 , maximum: 60, interval: 10,
radiusFactor: 0.6, labelOffset: 15, isInversed: true,
minorTicksPerInterval: 5,
minorTickStyle: MinorTickStyle(color: Colors.black, thickness: 1.5,

Copyright © 2001 - 2019 Syncfusion Inc. 336

Radial Gauge Axis

lengthUnit: GaugeSizeUnit.factor, length: 0.07),

majorTickStyle: MajorTickStyle(color: Colors.black, thickness: 1.5,
lengthUnit: GaugeSizeUnit.factor, length: 0.15),
axisLineStyle: AxisLineStyle(color: Colors.black, thickness: 3, ),
axisLabelStyle: GaugeTextStyle(color: Colors.black, fontSize: 12)),
],
)
),
);
}

Events
onLabelCreated
The onLabelCreated event is called when an axis label is created. The following properties can be
customized for the corresponding axis label when this event args:

• text – Allows to customize the text property of label.

• labelStyle – Customizes the label color, font style, font family, and font weight.
• canRotate – Specifies whether to rotate the label based on its current angle.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
onLabelCreated:axisLabelCreated,),
]
),
),
);

Copyright © 2001 - 2019 Syncfusion Inc. 337

Radial Gauge Axis

}
void axisLabelCreated(AxisLabelCreatedArgs args){
if(args.text == '100'){
args.labelStyle = GaugeTextStyle(color: Colors.red,fontStyle:
FontStyle.italic,
fontFamily: 'Times', fontWeight: FontWeight.bold, fontSize: 15);
args.canRotate = true;
args.text = '100 %';
}
}

onAxisTapped
The onAxisTapped event is called when an axis is tapped. The corresponding axis value at the tapped
position will be got from the event.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
onAxisTapped: axisTapped),
]
),
),
);
}
void axisTapped(double _tappedValue){
}

Copyright © 2001 - 2019 Syncfusion Inc. 338

Radial Gauge Axis

Custom scale
Radial gauge allows you to display a set of values along with a custom scale based on your business
logic.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
CustomAxis(minimum: 0,
maximum: 150,
)
],
)
),
);
}
class CustomAxis extends RadialAxis{
CustomAxis({
double minimum,
double maximum}) :super(
minimum: minimum ,
maximum: maximum ,
);
@override
List<CircularAxisLabel> generateVisibleLabels(){
final List<CircularAxisLabel> _visibleLabels = <CircularAxisLabel>[];
for (num i = 0; i < 9; i++) {
double _value = _calculateLabelValue(i);
final CircularAxisLabel label =
CircularAxisLabel(axisLabelStyle, _value.toInt().toString(), i, false);
label.value = _value;
_visibleLabels.add(label);
}
return _visibleLabels;
}
@override
double valueToFactor(double value)
{
if(value >= 0 && value <=2){
return (value * 0.125)/2;
}else if(value > 2 && value <=5){
return (((value - 2) * 0.125)/(5 - 2)) + (1 * 0.125);
}else if(value > 5 && value <=10){
return (((value - 5) * 0.125)/(10 - 5)) + (2 * 0.125);
}else if(value > 10 && value <=20){
return (((value - 10) * 0.125)/(20 - 10)) + (3 * 0.125);
}else if(value > 20 && value <=30){
return (((value - 20) * 0.125)/(30 - 20)) + (4 * 0.125);
}else if(value > 30 && value <=50){
return (((value - 30) * 0.125)/(50 - 30)) + (5 * 0.125);
}else if(value > 50 && value <=100){
return (((value - 50) * 0.125)/(100 - 50)) + (6 * 0.125);
}else if(value > 100 && value <=150){

Copyright © 2001 - 2019 Syncfusion Inc. 339

Radial Gauge Pointers

return (((value - 100) * 0.125)/(150 - 100)) + (7 * 0.125);

}else{
return 1;
}
}
/// To return the label value based on interval
double _calculateLabelValue(num value){
if(value == 0){
return 0;
}else if(value == 1){
return 2;
}else if(value == 2){
return 5;
}else if(value == 3){
return 10;
}else if(value == 4){
return 20;
}else if(value == 5){
return 30;
}else if(value == 6){
return 50;
}else if(value == 7){
return 100;
}else{
return 150;
}
}
}

Pointers
Pointer is used to indicate values on an axis. The radial gauge control has three types of pointers:
Marker pointer
Needle pointer

Copyright © 2001 - 2019 Syncfusion Inc. 340

Radial Gauge Pointers

Range pointer
All the pointers can be customized as needed. You can add multiple pointers to the gauge to point
multiple values on the same scale. The value of the pointer is set using the value property.

Multiple pointers
In addition to the default pointer, you can add n number of pointers to an axis by adding in the pointers
property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[RangePointer(value: 30, ),
MarkerPointer(value: 70),
NeedlePointer(value: 60)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 341

Radial Gauge Pointers

Pointer Dragging
Pointers can be dragged over the scale value. It can be achieved by clicking and dragging the pointer. To
enable or disable the pointer drag, use the enableDragging property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle(thickness: 30, color: Colors.lightBlueAccent),
showTicks: false,
pointers: <GaugePointer>[
MarkerPointer(value: 30, enableDragging: true,
markerWidth: 30, markerHeight: 30, markerOffset: -15,
color: Colors.indigo)
]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 342

Radial Gauge Pointers

Event
onValueChangeStart - Occurs whenever the pointer starts to drag.
onValueChanging - Occurs before the current drag value gets updated as pointer value. The cancel
argument of ValueChangingArgs allows to restrict the update of current drag value as pointer value.
onValueChanged - Occurs whenever the pointer value is changed while dragging.
onValueChangeEnd - Occurs once the dragging of the pointer gets completed.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[ RangePointer(value: 30,
enableDragging: true,
onValueChanging: onValueChanging,
onValueChanged: onvalueChanged)]
)],
)
),
);
}
void onValueChanging(ValueChangingArgs args){
if(args.value > 60){
args.cancel = true;
}
}
void onvalueChanged(double value){
}

Copyright © 2001 - 2019 Syncfusion Inc. 343

Radial Gauge Marker pointer

Marker pointer
Different types of markers are used to mark the pointer values in a scale. You can change the marker
type using the markerType property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[MarkerPointer(value: 60)]
)],
)
),
);
}

Gauge supports the following types of marker:

• Circle
• Diamond
• Image
• Inverted triangle
• Rectangle
• Text
• Triangle

Copyright © 2001 - 2019 Syncfusion Inc. 344

Radial Gauge Marker pointer

Image pointer
Image is used to denote the current pointer values instead of shape. It can be achieved by specifying the
markerType as image and specifying the imageUrl property of marker pointer.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[MarkerPointer(value: 60,
markerType: MarkerType.image,markerHeight: 30,
markerWidth: 30,
imageUrl: 'images/pin.png')]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 345

Radial Gauge Marker pointer

Text pointer
Text is used to denote the current pointer value instead of any marker shape. It can be achieved by
setting the markerType as text. The provided text can be customized using the textStyle property of
marker pointer.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[MarkerPointer(value: 50,
markerType: MarkerType.text, text: 'Average',
textStyle: GaugeTextStyle(fontSize: 15,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic)
)]
)],
)
),
);
}

Marker Customization
The marker pointer can be customized using the following properties:

• color – Allows to customize the marker color.

• markerHeight – Allows to specify the marker height.
• markerWidth – Allows to specify the marker width.
• borderColor – Allows to specify the border color for the marker.
• borderWidth – Allows to specify the border width of the marker.

Copyright © 2001 - 2019 Syncfusion Inc. 346

Radial Gauge Marker pointer

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[MarkerPointer(value: 60,
markerHeight: 30, markerWidth: 30,
markerType: MarkerType.circle, color: Colors.lightBlue,
borderWidth: 3, borderColor: Colors.black)]
)],
)
),
);
}

Position customization
The marker pointer can be moved near or far from its actual position using the markerOffset and
offsetUnit properties.
When you set offsetUnit to logical pixel, then the marker pointer will be moved based on the logical
pixel value. If you set offsetUnit to factor, then provided factor will be multiplied with the axis radius
value, and then the pointer will be moved to corresponding value. The default value of offsetUnit is
GaugeSizeUnit.logicalPixel.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis( radiusFactor: 0.9, centerY: 0.65,
pointers: <GaugePointer>[MarkerPointer(value: 60,

Copyright © 2001 - 2019 Syncfusion Inc. 347

Radial Gauge Needle Pointer

markerOffset: -5
)
]
)],
)
),
);
}

Needle Pointer
Needle Pointer contains three parts, namely needle, knob, and tail and that can be placed on a gauge to
mark the values.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60)
]
)
],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 348

Radial Gauge Needle Pointer

Needle customization
The needle can be customized using the following properties:

• needleLength – Customizes the length of the needle. The length of the pointer can be set either
in logical pixel or factor.
• lengthUnit –Specifies whether to set the length in logical pixel or factor.
• needleStartWidth – Specifies the start width of the needle.
• needleEndWidth – Specifies the end width of the needle.
• needleColor – Specifies the needle color.
• gradient - Specifies the gradient for the needle.

Needle length customization

The needle length can be controlled using the needleLength and lengthUnit properties. The length can
be set either in logical pixels or factor using lengthUnit.
If the lengthUnit is set to logical pixel, the logical pixel value will be set to the needleLength
If the lengthUnit is set to factor, then the factor value will be set to the needleLength. The factor value
ranges from 0 to 1. For example, if the needle length is set to 0.5, the half of the radius value of axis to
needle length. The default value of lengthUnit is GaugeSizeUnit.factor
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,
lengthUnit: GaugeSizeUnit.logicalPixel,
needleLength: 130)]
)
],

Copyright © 2001 - 2019 Syncfusion Inc. 349

Radial Gauge Needle Pointer

)
),
);
}

Needle width customization

The width of the needle pointer can be customized using the needleStartWidth and needleEndWidth
properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,
lengthUnit: GaugeSizeUnit.factor,
needleLength: 0.75, needleColor: Colors.red,
needleStartWidth: 6, needleEndWidth: 6)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 350

Radial Gauge Needle Pointer

Gradient support for needle

The gradient property of needle pointer allows to specify the smooth color transition to pointer by
specifying the different colors based on provided factor value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(,
pointers: <GaugePointer>[
NeedlePointer(
value: 65,
lengthUnit: GaugeSizeUnit.factor,
needleLength: 0.8,
needleEndWidth: 11,
gradient: const LinearGradient(
colors: <Color>[
Color(0xFFFF6B78), Color(0xFFFF6B78),
Color(0xFFE20A22), Color(0xFFE20A22)],
stops: <double>[0, 0.5, 0.5, 1]),
needleColor: const Color(0xFFF67280),
knobStyle: KnobStyle(
knobRadius: 0.08,
sizeUnit: GaugeSizeUnit.factor,
color: Colors.black)),
]
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 351

Radial Gauge Needle Pointer

Knob customization
The knob can be customized using the following properties:

• knobRadius – Specifies the knob radius either in logical pixels or factor.

• color – Specifies the knob color.
• borderWidth – Specifies the border width of knob either in logical pixels or factor.
• borderColor – Specifies the border color of knob.
• sizeUnit – Allows to specify whether the value of knob radius and border width is in logical pixels
or in factor.

Knob radius customization

The radius of the knob can be customized using the knobRadius and sizeUnit.
The logical pixel value can be set to knob radius when the sizeUnit is set to logical pixel
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,
needleStartWidth: 1, needleEndWidth: 5,
knobStyle: KnobStyle(knobRadius: 10,
sizeUnit: GaugeSizeUnit.logicalPixel, color: Colors.red))
]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 352

Radial Gauge Needle Pointer

If the sizeUnit is set to factor, the factor value will be set to knob radius. The factor value ranges from 0
to 1. For example, if the needle length is set to 0.1, 10% of the radius value of axis will be set to knob
radius. By default, the value of sizeUnit is GaugeSizeUnit.factor
Knob border customization
Like radius, the borderWidth can be specified either in logical pixel or factor. The sizeUnit property of
knob style is common for both knobRadius and borderWidth properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,
needleStartWidth: 1, needleEndWidth: 5,
knobStyle: KnobStyle(knobRadius: 0.05, borderColor: Colors.black,
borderWidth: 0.02,
color: Colors.white
)
)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 353

Radial Gauge Needle Pointer

Tail Customization
The tail of the needle can be customized using the following properties,

• length – Specifies the length of tail either in logical pixels or factor.

• lengthUnit – Specifies whether the tail length value is defined in logical pixels or factor.
• width – Specifies the width for the tail.
• borderColor – Allows to specify the border color of tail.
• borderWidth – Allows to specify the border width of tail.
• gradient - Specifies the gradient for the tail.

By default, the value of lengthUnit is GaugeSizeUnit.factor.The factor value ranges from 0 to 1. When
the length is set to 0.2, 20 % of axis radius value will be considered as tail length.The following code
example shows how to specify the length in factor.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,
tailStyle: TailStyle(width: 8, length: 0.15)
)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 354

Radial Gauge Needle Pointer

The following code example shows how to specify the length in logical pixels.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 60,needleStartWidth: 3,
needleEndWidth: 3,
knobStyle: KnobStyle(color: Colors.white, knobRadius: 0.07,
borderColor: Colors.black, borderWidth: 0.02),
tailStyle: TailStyle(width: 5, length: 30, lengthUnit:
GaugeSizeUnit.logicalPixel,
color: Colors.white, borderWidth: 3, borderColor: Colors.black)
)
]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 355

Radial Gauge Needle Pointer

The following code shows how to apply the gradient for the tail.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[
NeedlePointer(
value: 65,
lengthUnit: GaugeSizeUnit.factor,
needleLength: 0.8,
needleEndWidth: 11,
tailStyle: TailStyle(length: 0.2, width: 11,
gradient:LinearGradient(
colors: <Color>[
Color(0xFFFF6B78), Color(0xFFFF6B78),
Color(0xFFE20A22), Color(0xFFE20A22)],
stops: <double>[0, 0.5, 0.5, 1]),
),
gradient: LinearGradient(
colors: <Color>[
Color(0xFFFF6B78), Color(0xFFFF6B78),
Color(0xFFE20A22), Color(0xFFE20A22)],
stops: <double>[0, 0.5, 0.5, 1]),
needleColor: Color(0xFFF67280),
knobStyle: KnobStyle(
knobRadius: 0.08,
sizeUnit: GaugeSizeUnit.factor,
color: Colors.black)),
]
),
]
),

Copyright © 2001 - 2019 Syncfusion Inc. 356

Radial Gauge Range Pointer

),
);
}

Range Pointer
A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark
the current value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[RangePointer(value: 30)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 357

Radial Gauge Range Pointer

The following properties are used to customize the range pointer:

• color – Customizes the color of range pointer.

• width - Specifies the width of pointer either in logical pixels or factor.
• sizeUnit – Specifies whether the width and the pointerOffset are defined in logical pixels or
factor.

The width of the pointer can be specified either in logical pixel or factor. If the sizeUnit is specified as
logicalPixel, then the range will be rendered based on the provided pixel value. If the sizeUnitis set as
factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as
0.1, then 10% of axis radius is considered as range pointer width.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[RangePointer(value: 30, width: 0.1,
color: Colors.indigo, sizeUnit: GaugeSizeUnit.factor
)
]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 358

Radial Gauge Range Pointer

The default value of SizeUnit is GaugeSizeUnit.logicalPixel.

Gradient support
The gradient property of range pointer allows to specify the smooth color transition to pointer by
specifying the different colors based on provided factor value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle(thickness: 0.1,
thicknessUnit: GaugeSizeUnit.factor,),
pointers: <GaugePointer>[RangePointer(
value: 40, width: 0.1, sizeUnit: GaugeSizeUnit.factor,
gradient: const SweepGradient(
colors: <Color>[Color(0xFFCC2B5E), Color(0xFF753A88)],
stops: <double>[0.25, 0.75]
),
)]
),
]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 359

Radial Gauge Range Pointer

Corner customization
The cornerStyle property of range pointer specifies the corner type for pointer. The corners can be
customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this
property is bothFlat.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(pointers:<GaugePointer>[RangePointer(value:
30,
cornerStyle: CornerStyle.bothCurve)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 360

Radial Gauge Range Pointer

Position customization
The range pointer can be moved far or near to the axis line using the pointerOffset property. The
pointerOffset can be set either in logical pixel or factor value using its sizeUnit. The sizeUnit property is
common for bothwidth and pointerOffset
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[RangePointer(value: 30, pointerOffset: 50)]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 361

Radial Gauge Range

When you set the sizeUnit as logical pixel, the pointer will be moved to the provided logical pixel value.
If the sizeUnit is specified as factor, the factor value will be multiplied with the axis radius. For example,
if you set pointerOffset as 0.1, then the pointer offset is considered as 10% of axis radius.
Range
Gauge range is a visual element that helps to quickly visualize where a value falls on the axis. The text
can be easily annotated in range to improve the readability.
Setting start and end value
The start and end values of ranges are set using the startValue and endValue properties.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
ranges: <GaugeRange>[GaugeRange(startValue: 30, endValue: 65)]
)
],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 362

Radial Gauge Range

Range Customization
The following properties are used for the range customization:

• color – Specifies the color for the range.

• startWidth – Specifies the start width of the range either in logical pixels or factor.
• endWidth – Specifies the end width of the range either in logical pixels or factor.
• sizeUnit – Specifies whether the start width and end width of the range are set in logical pixels
or factor.
• gradient - Specifies the gradient for the range.

DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
ranges: <GaugeRange>[GaugeRange(startValue: 30, endValue: 65,
startWidth: 5, endWidth: 20
)]
)
],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 363

Radial Gauge Range

When the sizeUnit is set as logical pixels, the range will be rendered based on the provided logical pixel
values in startWidth and endWidth
If the sizeUnit is set as factor, the provided factor value in the start width and end width will be
multiplied with the axis radius, respectively. The factor value ranges from 0 to 1.
Gradient support
The gradient property of range allows to specify the smooth color transition to pointer by specifying the
different colors based on provided factor value.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
ranges: <GaugeRange>[
GaugeRange(startValue: 30,
endValue: 65,
gradient: const SweepGradient(
colors: <Color>[Color(0xFFBC4E9C), Color(0xFFF80759)],
stops: <double>[0.25, 0.75]),
startWidth: 5,
endWidth: 20
)
]
)
],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 364

Radial Gauge Range

Position customization
The range can be moved far or near to the axis line with using the rangeOffset property. The property
can be specified either in the logical pixels or the factor value.
If the sizeUnit is set as logical pixels, then the range will be moved based on the provided logical pixel
value.
If the sizeUnit is set as factor, the factor value will be multiplied with the axis radius.Then the pointer
will be moved to the corresponding value
The sizeUnit property is common for the rangeOffset, startWidth and the endWidth properties. The
default value of sizeUnit is logicalPixel.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
ranges: <GaugeRange>[GaugeRange(startValue: 30, endValue: 65,
rangeOffset: 50,
)]
)
],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 365

Radial Gauge Range

Setting range color to axis elements

You can set range color to axis labels and ticks using the useRangeColorForAxis property of axis,
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(showAxisLine: false,
ticksPosition: ElementsPosition.outside,
labelsPosition: ElementsPosition.outside,
startAngle: 270, endAngle: 270, useRangeColorForAxis: true,
interval: 10,
axisLabelStyle:GaugeTextStyle(
fontWeight: FontWeight.w500,
fontSize: 12),
majorTickStyle: MajorTickStyle(length: 0.15,
lengthUnit: GaugeSizeUnit.factor,
thickness: 1),
minorTicksPerInterval: 4, labelOffset: 15,
minorTickStyle: MinorTickStyle(length: 0.04,
lengthUnit: GaugeSizeUnit.factor,
thickness: 1),
ranges: <GaugeRange>[GaugeRange(startValue: 0, endValue: 35,
color: Color(0xFFF8B195),
sizeUnit: GaugeSizeUnit.factor,
rangeOffset: 0.06,
startWidth: 0.05, endWidth: 0.25),
GaugeRange(startValue: 35, endValue: 70,
rangeOffset: 0.06,
sizeUnit: GaugeSizeUnit.factor,
color: Color(0xFFC06C84),
startWidth: 0.05, endWidth: 0.25),

Copyright © 2001 - 2019 Syncfusion Inc. 366

Radial Gauge Range

GaugeRange(startValue: 70, endValue: 100,

rangeOffset: 0.06,
sizeUnit: GaugeSizeUnit.factor,
color: Color(0xFF355C7D),
startWidth: 0.05, endWidth: 0.25),]
)],
)
),
);
}

Range label
A text can be displayed on range using the label property. The provided text can be customized using the
labelStyle property.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes:<RadialAxis>[
RadialAxis(showLabels: false, showAxisLine: false, showTicks: false,
minimum: 0, maximum: 99,
ranges: <GaugeRange>[GaugeRange(startValue: 0, endValue: 33,
color: Color(0xFFFE2A25), label: 'Slow',
sizeUnit: GaugeSizeUnit.factor,
labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20),
startWidth: 0.65, endWidth: 0.65
),GaugeRange(startValue: 33, endValue: 66,
color:Color(0xFFFFBA00), label: 'Moderate',
labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20),
startWidth: 0.65, endWidth: 0.65, sizeUnit: GaugeSizeUnit.factor,
),
GaugeRange(startValue: 66, endValue: 99,

Copyright © 2001 - 2019 Syncfusion Inc. 367

Radial Gauge Annotation

color:Color(0xFF00AB47), label: 'Fast',

labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20),
sizeUnit: GaugeSizeUnit.factor,
startWidth: 0.65, endWidth: 0.65,
),
],
pointers: <GaugePointer>[NeedlePointer(value: 60
)]
)
],
)
),
);
}

Annotation
Radial axis allows you to add multiple widgets such as text and image as an annotation to a specific point
of interest in radial gauge.
The following properties are available in annotation to customizes the position and alignment of
annotation widget

• angle – Allows to position the annotation using the angle.

• axisValue – Allows to position the annotation using the axis value.
• positionFactor –Specifies the factor value to position the annotation based on the provided axis
value or angle
• horizontalAlignment – Specifies the horizontal alignment for positioning the annotation widget.
• verticalAlignment – Specifies the vertical alignment for positioning the annotation.

DART
@override
Widget build(BuildContext context) {

Copyright © 2001 - 2019 Syncfusion Inc. 368

Radial Gauge Annotation

return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
annotations: <GaugeAnnotation>[
GaugeAnnotation(axisValue: 50, positionFactor: 0.4,
widget: Text('50.0', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))]
)
],
)
)
);
}

Positioning annotation
The annotation can be positioned either using the angle or axis value. When providing both the angle
and the axis value, priority will be provided to the angle value. The following example shows how to
position the annotation widget using angle.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
pointers: <GaugePointer>[NeedlePointer(value: 90)],
annotations: <GaugeAnnotation>[
GaugeAnnotation(angle: 90, positionFactor: 0.5,
widget: Text('90.0', style: TextStyle(fontWeight: FontWeight.bold,
fontSize: 20),))])],)
),
);

Copyright © 2001 - 2019 Syncfusion Inc. 369

Radial Gauge Annotation

The following code example shows how to position the annotation using axis value
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
annotations: <GaugeAnnotation>[
GaugeAnnotation(axisValue: 50, positionFactor: 0.4,
widget: Text('50.0', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))]
)],)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 370

Radial Gauge Annotation

PositionFactoris used to move the annotation widget from the center of axis to the edge of the axis. For
example, when you specify the positionFactor as 0.5, the annotation widget will be moved from the
center towards the corresponding direction with the distance of half of the radius value of axis.
By default, the value of positionFactor is 0.
Setting image for annotation
Annotations provide options to add any image over the gauge control with respect to its offset position.
You can add multiple images in a single control.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis( interval: 10,
startAngle: 0, endAngle: 360, showTicks: false,
showLabels: false,
axisLineStyle: AxisLineStyle(thickness: 20),
pointers: <GaugePointer>[RangePointer(value: 73,
width: 20, color: Color(0xFFFFCD60),
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve)],
annotations: <GaugeAnnotation>[
GaugeAnnotation(widget: Column(children: <Widget>[Container(
width: 50.00 ,
height: 50.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage('images/sun.png'),
fit: BoxFit.fitHeight,
),
)),
Padding(padding: EdgeInsets.fromLTRB(0, 2, 0, 0),
child: Container(child:Text('73°F',

Copyright © 2001 - 2019 Syncfusion Inc. 371

Radial Gauge Annotation

style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25)) ,),)
],) , angle: 270, positionFactor: 0.1)]
)])
);
}

Alignment of annotation
Annotation can be aligned to center, near and far using the horizontalAlignment and verticalAlignment
properties of annotation.
The following code example demonstrates how to set the horizontalAlignment for annotation
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
annotations: <GaugeAnnotation>[
GaugeAnnotation(axisValue: 50, positionFactor: 0.4,
horizontalAlignment: GaugeAlignment.far,
widget: Text('50.0', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))]
)],)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 372

Radial Gauge Annotation

The following code example demonstrates how to set verticalAlignment for annotation,
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
annotations: <GaugeAnnotation>[
GaugeAnnotation(axisValue: 50, positionFactor: 0.4,
verticalAlignment: GaugeAlignment.far,
widget: Text('50.0', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))]
)],)
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 373

Radial Gauge Animation

Animation
Initial animation
The radial gauge allows all of its elements to be animated with enableLoadingAnimation property. The
default value for this property is false. The duration of the animation can be controlled by
animationDuration property of the gauge.
DART
override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
enableLoadingAnimation: true, animationDuration: 4500,
axes: <RadialAxis>[
RadialAxis(minimum: 0,maximum: 150,
ranges: <GaugeRange>[
GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth:
10,endWidth: 10),
GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth:
10,endWidth: 10),
GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth:
10,endWidth: 10)],
pointers: <GaugePointer>[NeedlePointer(value:90, )],
annotations: <GaugeAnnotation>[
GaugeAnnotation(widget: Container(child:
Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))),
angle: 90,positionFactor: 0.5)]
)]
),
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 374

Radial Gauge Animation

Pointer Animation
The enableAnimation property of pointer allows to enable or disable animation for pointer. The gauge
pointer has the following animation type:

• bounceOut
• ease
• easeInCir
• easeOutBack
• elasticOut
• linear
• slowMiddle

The animation type can be changed using the animationTypeproperty of pointer. By default, the
animation type is linear.
DART
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
axisLineStyle: AxisLineStyle(thickness: 30), showTicks: false,
pointers: <GaugePointer>[NeedlePointer(value: 60, enableAnimation: true,
needleStartWidth: 0,
needleEndWidth: 5, needleColor: Color(0xFFDADADA),
knobStyle: KnobStyle(color: Colors.white, borderColor: Color(0xFFDADADA),
knobRadius: 0.06,
borderWidth: 0.04),

Copyright © 2001 - 2019 Syncfusion Inc. 375

Radial Gauge Animation

tailStyle: TailStyle(color:Color(0xFFDADADA), width: 5,

length: 0.15)
),
RangePointer(value: 60, width: 30, enableAnimation: true, color:
Colors.orange)
]
)],
)
),
);
}

Copyright © 2001 - 2019 Syncfusion Inc. 376