Syncfusion in Flutter is library for data visualisation by beautiful charts. The syncfusion_flutter_charts is native library written in dart. In this tutorial we will learn about how to use its library with our data.
Installation
Run the following command to install the library into the terminal
flutter pub add syncfusion_flutter_charts
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:newflutter/utils/constants.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class MyImpact extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
MyImpact({Key? key}) : super(key: key);
@override
_MyImpactState createState() => _MyImpactState();
}
class _MyImpactState extends State<MyImpact> {
late List<_ChartData> data;
late TooltipBehavior _tooltip;
@override
void initState() {
data = [
_ChartData('Jan', 12),
_ChartData('Feb', 15),
_ChartData('March', 30),
_ChartData('April', 6.4),
_ChartData('May', 14),
_ChartData('June', 12),
_ChartData('July', 15),
// _ChartData('Agust', 30),
// _ChartData('Sip', 6.4),
// _ChartData('Oct', 14),
// _ChartData('Nov', 14),
// _ChartData('Dec', 14)
];
_tooltip = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations(Constants().allOrientations);
return Scaffold(
appBar: AppBar(
title: const Text('Emission Data'),
),
body: Container(
margin: EdgeInsets.all(10),
child: Card(
elevation: 5,
child: Container(
padding: EdgeInsets.all(16.0),
height: 300, // Adjusted height
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"Feburary: 2024",
textAlign: TextAlign.start,
style: TextStyle(fontWeight: FontWeight.w800),
),
),
Align(
alignment: Alignment.topLeft,
child: Text(
"45.90 KgCo2",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.black),
),
),
Align(
alignment: Alignment.topLeft,
child: Text(
"Average Monthly: 15.78 KgCo2",
textAlign: TextAlign.start,
style: TextStyle(fontWeight: FontWeight.w800),
),
),
SizedBox(
height: 20,
)
],
),
Expanded(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
primaryYAxis:
NumericAxis(minimum: 0, maximum: 40, interval: 10),
tooltipBehavior: _tooltip,
series: <CartesianSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
name: 'Gold',
color: Color.fromRGBO(8, 142, 255, 1))
]),
),
],
),
),
),
));
}
}
class _ChartData {
_ChartData(this.x, this.y);
final String x;
final double y;
}
Output of the above example
Following is the output graph using syncfusion flutter.
You can use your data in to this syncfusion flutter chart. You can have details look here.
Thank you for reaching out us, please have look into other useful tutorials.
