Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (147).NET Core  (24)Angular  (41)ASP.NET  (48)ASP.NET Core  (55)ASP.NET MVC  (84)Azure  (28)Blazor  (62)DocIO  (18)Essential JS 2  (65)Essential Studio  (160)Flutter  (71)JavaScript  (137)Microsoft  (100)PDF  (53)React  (30)Succinctly series  (120)Syncfusion  (448)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (15)Windows Forms  (54)WPF  (103)Xamarin  (112)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (101)Chart  (43)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (33)Development  (243)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (15)Extensions  (9)File Manager  (3)Gantt  (7)Gauge  (4)Git  (3)Grid  (25)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (166)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (18)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (17)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (37)UI  (91)Uncategorized  (68)Unix  (2)User interface  (62)Visual State Manager  (1)Visual Studio  (15)Visual Studio Code  (8)Web  (135)What's new  (84)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing the New Flutter Spark Charts Widget

Introducing the New Flutter Spark Charts Widget

A new Spark Charts (Sparkline Charts) widget has been added to the Syncfusion Flutter platform in the 2020 Volume 4 release. It is a lightweight chart that can fit in a very small area. With this chart, you can elegantly display trends in the data and convey quick information to the user. It has simplified APIs to populate and visualize data quickly.

Some of the use cases of spark charts are as follows:

  • You can easily place it in a data grid cell.
  • It can also be placed inline of paragraph text.
  • You can use it to visualize the CPU performance and disk usage with a real-time live chart in the Windows task manager, etc.

The Flutter Spark Charts widget comes with the following key features:

Let’s look at them along with code examples!

Chart types

The Spark Charts widget supports the following four chart types. Each one is implemented as a separate widget.

Chart typeWidgetUsage
Line chartSfSparkLineChartUsed to identify patterns and trends in data, such as seasonal effects, with large changes and turning points over a period of time.
Area chartSfSparkAreaChartUsed when the magnitude of a trend is to be communicated rather than individual data values.
Bar (Column) chartSfSparkBarChartUsed to compare several items in a specific range of values.
Win loss chartSfSparkWinLossChartUsed to show whether each value is positive or negative while visualizing a win/loss scenario.

Refer to the following code example for the Sparkline Charts.

[Dart]
@override
Widget build(BuildContext context) {
  return Container(
    child: SfSparkLineChart()
  );
}
Spark Chart types
Spark Chart types

Data binding

Spark Charts accept both one- and two-dimensional data as input.

In one dimensional data binding, use the default constructor while binding a list of numeric values to the spark charts. Those numeric values will be considered y-values and their corresponding linear index values (0, 1, 2, …) will be considered x-values internally in this case.

Refer to the following code example.

[Dart]
SfSparkAreaChart(
  data: <double>[10, 6, 8, 11, 5]
)

As mentioned already, you can bind two-dimensional data to the Flutter Spark Charts widget. You can also bind custom x- and y-values, i.e. numeric, category and date-time values can be bound in this case. The x- and y-values will be displayed in the trackball tooltip. You can bind the custom data source to spark charts using the custom constructor in the widget class.

Refer to the following code example.

[Dart]
SfSparkAreaChart.custom(
  dataCount: 5,
  xValueMapper: (index) => data[index].xval,
  yValueMapper: (index) => data[index].yval
)

final List<SalesData> data = [
  SalesData(xval: 'John', yval: 10),
  SalesData(xval: 'Mary', yval: 6),
  SalesData(xval: 'Michael', yval: 8),
  SalesData(xval: 'Joy', yval: 11),
  SalesData(xval: 'Jack', yval: 5)
];
 
class SalesData {
  SalesData({this.xval, this.yval});
  final String xval;
  final double yval;
}

Axis types

Spark Charts support the following axis types:

  • Numeric
  • Category
  • Date-time

Note: A Spark Charts’ x-value can be any one of these data types and y-value should always be numeric.

As stated in the previous topic, you can bind the custom data source to spark charts using the custom constructor. In the following code snippet, a date-time value is bound to the spark chart.

[Dart]
SfSparkBarChart.custom(
  dataCount: 5,
  xValueMapper: (index) => data[index].xval,
  yValueMapper: (index) => data[index].yval
)

final List<SalesData> data = [
  SalesData(xval: DateTime(2018, 0, 1), yval: 4),
  SalesData(xval: DateTime(2018, 0, 2), yval: 4.5),
  SalesData(xval: DateTime(2018, 0, 3), yval: 8),
  SalesData(xval: DateTime(2018, 0, 4), yval: 7),
  SalesData(xval: DateTime(2018, 0, 5), yval: 6)
];
 
class SalesData {
  SalesData({this.xval, this.yval});
  final DateTime xval;
  final double yval;
}
Spark Charts axis types
Spark Charts axis types

Marker and data labels

Marker

A marker is used to provide information about the exact point location in Spark Charts. You can add a shape to adorn each data point. You can also enable and customize the markers using the marker property. It can be enabled for all the data points or for the high, low, first, or last data points.

Note: The markers are applicable only to line and area chart types.

Refer to the following code example.

[Dart]
SfSparkLineChart(
  marker: SparkChartMarker(
    borderColor: Colors.orange,
    borderWidth: 2,
    displayMode: SparkChartMarkerDisplayMode.all
  )
)

Data labels

Data labels are used to display the values of data points to improve the readability of a chart. You can easily display labels by setting values to the labelDisplayMode property. Like the markers, data labels can also be enabled for all the data points or for the high, low, first, or last data points.

Refer to the following code.

[Dart]
SfSparkLineChart(
  labelDisplayMode: SparkChartLabelDisplayMode.all
)
Sparkline chart with marker and data labels
Sparkline chart with marker and data labels

Plot band

Plot bands are used to highlight a particular region in the Spark Chart’s vertical axis. You can easily render a plot band by specifying the start and end range and fill color values.

Refer to the following code example.

[Dart]
SfSparkLineChart(
  plotBand: SparkChartPlotBand(
    start: 5, 
    end: 8,
    color: Colors.blue
  )
)
Sparkline chart with plot band
Sparkline chart with plot band

Trackball

This feature allows you to display the tooltip for the data points closest to the point you touch in the chart area. This feature can be used instead of the data label feature when you cannot show data labels for all the data points due to space constraint.

You can activate the trackball feature by using the activationMode property. Once it is activated, it will appear in the UI. You can move it by touching it in the chart.

Refer to the following code example.

[Dart]
SfSparkLineChart(
  trackball: SparkChartTrackball
  (
    width: 2,
    color: Colors.black, 
    activationMode: SparkChartActivationMode.doubleTap
  )
)
Spark Charts with trackball
Spark Charts with trackball

Special point customization

The color of special points, such as high, low, first, and last data points, can be customized to highlight them. For example, in the win-loss chart type, you can easily customize the tie point color.

Refer to the following code example.

[Dart]
SfSparkBarChart(
  highPointColor: Colors.green,
  lowPointColor: Colors.red
)
Spark Charts with modified color for special points
Spark Charts with modified color for special points

Useful links

If you want more information about our new Flutter Spark Charts widget, please refer to the following links:

Conclusion

I hope you now have a clear idea of the Flutter Spark Charts widget and its features. It will be useful wherever you wish to fit a chart in a very small area in your Flutter applications. This widget is available in our 2020 Volume 4 release.

Browse our documentation to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play and the App Store.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top