Charts in Flutter
Introduction
In this blog, we shall discuss how to implement various types of charts in flutter. Charts are very useful to picture the huge amount of data in simple and explanatory for. Establish a relationship between different types of data. Line charts, pie charts, and Bar charts are more frequently used charts in daily life because they are easy to examine. There are various methods that can be used to extract meaningful content from the given data.
Table of content
Adding charts dependency
This package provides us a lot of variety of charts. Also, there are lots of properties that can be used to make our charts more interactive and easy to understand.
syncfusion_flutter_charts | Flutter Package
Add this to your package’s pubspec.yaml file: dependencies: syncfusion_flutter_charts: ^18.2.46 You can install…pub.dev
dependencies:
syncfusion_flutter_charts: ^latest versionArea chart
Initializing our first chart
Widget _chart() {
return SfCartesianChart();
}
SfCartesianChart this class provides us access with various types of cartesian charts such as line charts, bar charts, Spline charts, etc, and various properties the design our chart more attractive and easy to understand.
Charts with title
Widget _areaChart() {
return SfCartesianChart(
title: ChartTitle(text: "Area Chart"),
);
}
title property is used to initialize the chart title.
Chart with ChartSeries
Widget _areaChart() {
return SfCartesianChart(
title: ChartTitle(text: "Area Chart"),
series: <ChartSeries>[
AreaSeries()
]);
}
series property provides use ChartSeries i.e type of chart that we need to initialize. AreaSeries is used to make a are chart.
Charts with Data
Widget _areaChart() {
return SfCartesianChart(
title: ChartTitle(text: "Area Chart"),
series: <ChartSeries>[
AreaSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales)
]);
}
Since this type of chart is a cartesian chart, so it will have two dimensions i.e. x, y-axis. AreaSeries class provides us properties xValueMapper and yValueMapper to map our values on the respective axis.
We have created a class SalesData that have two properties year, sales .
class SalesData {
SalesData(this.year, this.sales);
final double year;
final double sales;
}
dataSource property contains the source of data.
List<SalesData> chartData = [
SalesData(2004, 7),
SalesData(2005, 5),
SalesData(2006, 9),
SalesData(2007, 2),
SalesData(2008, 10)
];
Line chart
Widget _lineChart() {
return SfCartesianChart(
primaryXAxis: CategoryAxis(),
title: ChartTitle(text: 'Line Charts'),
series: [
LineSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
)
],
);
}
Transposed Chart
isTransposed property is used to transpose or reverse the chart.
Widget _lineChart() {
return SfCartesianChart(
isTransposed: true,
title: ChartTitle(text: 'Line Charts'),
series: [
LineSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
)
],
);
}
Spline Chart
Widget _splineChart() {
return SfCartesianChart(
title: ChartTitle(text: "Spine Chart"),
series: <ChartSeries>[
SplineSeries<SalesData, double>(
dataSource: chartData,
cardinalSplineTension: 0.9,
splineType: SplineType.natural,
dashArray: <double>[1, 3],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales),
],
);
}
Enable DataLevel
DataLevelSetting class provides us isVisible a property to display the data levels.
Widget _splineChart() {
return SfCartesianChart(
title: ChartTitle(text: "Spine Chart"),
series: <ChartSeries>[
SplineSeries<SalesData, double>(
dataSource: chartData,
cardinalSplineTension: 0.9,
splineType: SplineType.natural,
dataLabelSettings: DataLabelSettings(
showCumulativeValues: true,
isVisible: true,
),
dashArray: <double>[1, 3],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales),
],
);
}
Column Chart
Widget _columnChart() {
return SfCartesianChart(
title: ChartTitle(text: "Column Chart"),
series: <ChartSeries>[
ColumnSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales),
],
);
}
Bar Chart
Widget _barChart() {
return SfCartesianChart(
title: ChartTitle(text: "Bar Chart"),
series: <ChartSeries>[
// Renders bar chart
BarSeries<SalesData, double>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales)
]);
}
You can also use fl_charts package to implement charts:
fl_chart | Flutter Package
💥 A library to draw fantastic charts in Flutter 💥 ScatterChart Coming Soon Read More Banner designed by…pub.dev
Github Link
flutter-devs/charts_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
