Hello everyone, Welcome to
this video tutorial on how
 to get started with our
Syncfusion Flutter charts. 
 Today I'm going to teach you how
to add a simple Syncfusion 
Flutter chart into your Flutter application, and add a column  
series to it, and how to enable
an axis, data labels and legend
 without moving further, I like
to point out the supported 
platforms. Right now, we support
Android and iOS, for Android, we
support the device types like
 phone, tablet and the supported
 version is from API level 16 and
later. For iOS, we support iPhone 
 iPod and iPad and supported
version is from iOS 8 and 
 later. The minimum flutter
SDK version that is required 
 to render this Syncfusion Flutter chart is version - 1.7.8
And you can always
look into our 
help.syncfusion.com for any
getting started
documentation related to chart.
 The entire chart package is
available in pub.dev
Let's move on to the tutorial.
I'm using the Visual Studio Code
 and I have already installed the
 Flutter and Dart extensions. So 
it is easy for me to create a
Flutter application. Go to
command palette. 
Type in Flutter: New Project
Name the project.
 Choose the folder where you want
to place the application. 
Now this will create a simple hello 
 world program, for your flutter 
application. As you can see it
will automatically download
 every required file and
dependencies from the pub
 since the entire package of Syncfusion is available in pub.dev
Go to pubspec.yaml file
And declare the
dependencies. 
 The dependency is 
syncfusion_flutter_charts
And you have
to name the version.
Save it.
And you can see that the
package is getting downloaded
 from the pub.dev
Once the packages have
downloaded move to
 main.dart file
You can import the package.
After importing the package
navigate to the home page.
 As you can see, there is a
collection of widget available here.
I'm just going to remove
this code since this is a Hello World
program, I'm just removing the 
already available codes.
I'm going to add a container.
 The container widget is used to
set the height for the widgets. 
I'm going to set it as 550.
And I'm going to place a
child inside the container,
 which is the SfCartesianChart. I'm just going to 
 initialize the chart and I'm
going to run this 
application.
 There you go, you can find a
simple chart rendered here 
with X&Y Axis. But we have
not added any series to it,
so let's add a chart series.
To add a chart series, I
need a data source, so I'm
going to define a class.
Called SalesData. 
Inside the Class I'm
going to declare a variable
of type string.
 Which is X.
 And, another variable of
type double. 
 Which is Y.
And I'm going to declare a constructor called SalesData.
 Which initializes
these 2 variables.
Next I'm going to define a
method, which returns the
data source.
 Dynamic getColumnData
So I'm going to declare a list.
 Of type SalesData. 
 I'm going to name the
list as columnData. 
And I'm going to add data to it. So I'm just going to call
 these SalesData constructor and
initialize variables like.
 Now, what I'm going to do is I'm
going to return the columnData. 
 So now move on to the Cartesian
chart you have series API to add 
 the series. This is of type
chart series collection. 
 So inside this collection, I'm
going to add a column series. 
 as of type SalesData. 
And it is of type string.
 I have to define the data source
for the column series. 
So I'm going to get the
data source from get column
data method.
And I have to map the 2 Fields
X&Y to the X value mapper.
 And Y value mapper. 
 Next I have to define
the axis. 
Since we have given the
X value as string, it is
of type category axis.
And I'm going to declare the
primary Y axis?
 Which is of double so
numerical axis
So I'm just going to save it.
Since you have hot reload
available in flatter so you can
see the output. Then in there,
while you save the application.
So there, you go. You have a
simple column series. Now let us
see how to add data labels to
it. Inside the series you have
to set the data label settings.
 Is visible to true
I'm going to save it.
 And you can see the data label
is the refreshed in the sample. 
If you want to place the data
labels to the center of the
column segment, then you can
set the position.
to middle I'm just
going to save it. 
 So, there, you go you can see
that the data label is now 
rendering at the middle of the
column segment and the data
label. Color has been changed
smartly based on the contrast
 background. Now let us make this
 chart more readable by providing. 
 Title to the chart and adding
title to the chart axis. 
Go to chart. Add title. Title is
of type chart title.
Add the text.
And inside the category axis you
 can keep title. 
 Which is of type axis title
 And inside Y axis
I'm going to provide another
title. Which is of axis title,
Which is of type axis title?
I'm going to save it.
So, there, you go now you have
the title car sales and you have
the title for the X and you have
the title for the Y axis now let
us add a legend to the.
 Chart. 
So I'm just going to
enable the legend.
 Is visible property to true I'm going to save it. 
 You can see that it is
rendering as a default 
series of type index zero.
You can change that by
providing name to the
series. So I'm just going to
provide a name.
I'm going to save it.
So, there, you go now you have a
simple column chart with data
labels legends. axis titles and
 chart title. Let me summarize
what we have learned. 
 We have learned how to add a
simple column chart to the 
Flutter application, and to
enable the data labels and we 
have learned how to add an axis
and title for the Axis and we
 have also learned how to add
legends. Thank you everyone for 
watching this video tutorial if
you like this tutorial hit the
like button. If you want
more video tutorials.
Subscribe to our channel.
Thank you once again.
