Introducing the New Flutter Spark Charts Widget
Tags: flutter, android, ios, webdev
Published: 2021-02-19 12:44:24

---
title: Introducing the New Flutter Spark Charts Widget
published: true
date: 2021-02-04 12:05:30 UTC
tags: flutter, android, ios, webdev
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-flutter-spark-charts-widget.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Introducing-the-New-Flutter-Spark-Charts-Widget-672x372.png
---

A new [Spark Charts (Sparkline Charts) widget](https://www.syncfusion.com/flutter-widgets/flutter-spark-charts) has been added to the Syncfusion Flutter platform in the [2020 Volume 4](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) 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:

- [Four chart types](#chart-types)
- [Data binding](#data-binding)
- [Three axis types](#axis-types)
- [Markers and data labels](#marker-and-data-labels)
- [Plot band](#plot-band)
- [Trackball](#trackball)
- [Special point customization](#special-point-customization)

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 type** | **Widget** | **Usage** |
| Line chart | SfSparkLineChart | Used to identify patterns and trends in data, such as seasonal effects, with large changes and turning points over a period of time. |
| Area chart | SfSparkAreaChart | Used when the magnitude of a trend is to be communicated rather than individual data values. |
| Bar (Column) chart | SfSparkBarChart | Used to compare several items in a specific range of values. |
| Win loss chart | SfSparkWinLossChart | Used 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
[Dart]
@override
Widget build(BuildContext context) {
  return Container(
    child: SfSparkLineChart()
  );
}
```

![Spark Chart types](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Spark-Chart-types.jpg)<figcaption>Spark Chart types</figcaption>

## 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
[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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/SfSparkAreaChart.custom.html) constructor in the widget class.

Refer to the following code example.

```dart
[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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/SfSparkAreaChart.custom.html) constructor. In the following code snippet, a date-time value is bound to the spark chart.

```dart
[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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Spark-Charts-axis-types.jpg)<figcaption>Spark Charts axis types</figcaption>

## 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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/marker.html) 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
[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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/labelDisplayMode.html) 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
[Dart]
SfSparkLineChart(
  labelDisplayMode: SparkChartLabelDisplayMode.all
)
```

![Sparkline chart with marker and data labels](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Sparkline-chart-with-marker-and-data-labels.jpg)<figcaption>Sparkline chart with marker and data labels</figcaption>

## 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
[Dart]
SfSparkLineChart(
  plotBand: SparkChartPlotBand(
    start: 5, 
    end: 8,
    color: Colors.blue
  )
)
```

![Sparkline chart with plot band](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Sparkline-chart-with-plot-band.jpg)<figcaption>Sparkline chart with plot band</figcaption>

## 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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/activationMode.html) 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
[Dart]
SfSparkLineChart(
  trackball: SparkChartTrackball
  (
    width: 2,
    color: Colors.black, 
    activationMode: SparkChartActivationMode.doubleTap
  )
)
```

![Spark Charts with trackball](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Spark-Charts-with-trackball.gif)<figcaption>Spark Charts with trackball</figcaption>

## 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
[Dart]
SfSparkBarChart(
  highPointColor: Colors.green,
  lowPointColor: Colors.red
)
```

![Spark Charts with modified color for special points](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Spark-Charts-with-modified-color-for-special-points.png)<figcaption>Spark Charts with modified color for special points</figcaption>

## Useful links

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

- [User guide documentation](https://help.syncfusion.com/flutter/sparkcharts/overview)
- [Feature tour](https://www.syncfusion.com/flutter-widgets/flutter-spark-charts)
- [API reference](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/sparkcharts-library.html)
- [Demo samples](https://flutter.syncfusion.com/#/spark/micro-charts/chart-types)
- [Samples source code](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sparkline)

## Conclusion

I hope you now have a clear idea of the [Flutter Spark Charts widget](https://www.syncfusion.com/flutter-widgets/flutter-spark-charts) 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](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) release.

Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview) to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples). Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341).

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) 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 forum](https://www.syncfusion.com/forums), [feedback portal](https://www.syncfusion.com/feedback), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents). We are always happy to assist you!