syncfusion_flutter_charts 24.2.6
syncfusion_flutter_charts: ^24.2.6 copied to clipboard
A Flutter Charts library which includes data visualization widgets such as cartesian and circular charts, to create real-time, interactive, high-performance, animated charts.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';
void main() {
return runApp(_ChartApp());
}
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
List<_SalesData> data = [
_SalesData('Jan', 35),
_SalesData('Feb', 28),
_SalesData('Mar', 34),
_SalesData('Apr', 32),
_SalesData('May', 40)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: Column(children: [
//Initialize the chart widget
SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Chart title
title: ChartTitle(text: 'Half yearly sales analysis'),
// Enable legend
legend: Legend(isVisible: true),
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: true),
series: <CartesianSeries<_SalesData, String>>[
LineSeries<_SalesData, String>(
dataSource: data,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
name: 'Sales',
// Enable data label
dataLabelSettings: DataLabelSettings(isVisible: true))
]),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
//Initialize the spark charts widget
child: SfSparkLineChart.custom(
//Enable the trackball
trackball: SparkChartTrackball(
activationMode: SparkChartActivationMode.tap),
//Enable marker
marker: SparkChartMarker(
displayMode: SparkChartMarkerDisplayMode.all),
//Enable data label
labelDisplayMode: SparkChartLabelDisplayMode.all,
xValueMapper: (int index) => data[index].year,
yValueMapper: (int index) => data[index].sales,
dataCount: 5,
),
),
)
]));
}
}
class _SalesData {
_SalesData(this.year, this.sales);
final String year;
final double sales;
}