Chart types in Flutter Spark Charts

5 May 202111 minutes to read

Line chart

SfSparkLineChart is used for identifying patterns and trends in the data such as seasonal effects, large changes and turning points over a period of time.

The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfSparkLineChart(
                axisLineWidth: 0,
                data: <double>[
                    5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
                ],
                highPointColor: Colors.red,
                lowPointColor: Colors.red,
                firstPointColor: Colors.orange,
                lastPointColor: Colors.orange,
                width: 3,
                marker: SparkChartMarker(
                  displayMode: SparkChartMarkerDisplayMode.all
                ),
              )
            )
          );
        }

    Spark line chart

    Dashed line

    The dashArray property of SfSparkLineChart is used to render line chart with dashes. Odd value is considered as rendering size and even value is considered as gap.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child:  SfSparkLineChart(
                axisLineWidth: 0,
                data: <double>[
                            5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
                          ],
                dashArray: <double>[5,3],
              )
            )
          );
        }

    Spark line dashArray

    Area chart

    SfSparkAreaChart is used to emphasize a change in values. This is primarily used when the magnitude of the trend is to be communicated rather than individual data values.

    The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child:  SfSparkAreaChart(
                data: <double>[
                    34, 36, 32, 35, 40, 38, 33, 37, 34, 31, 30
                ],
                borderColor: Colors.red.withOpacity(0.8),
                borderWidth: 2,
                marker: SparkChartMarker(
                  displayMode: SparkChartMarkerDisplayMode.high
                ),
              )
            )
          );
        }

    Spark area chart

    Bar chart

    SfSparkBarChart is used to render the spark bar type series.The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child:  SfSparkBarChart(
                data: <double>[
                  10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10
                ],
                highPointColor: Colors.red,
                lowPointColor: Colors.green,
                firstPointColor: Colors.orange,
                lastPointColor: Colors.orange,
              )
            )
          );
        }

    Spark Bar chart

    WinLoss Sparkline chart

    SfSparkWinLossChart is used to show whether each value is positive or negative visualizing a Win/Loss scenario.

    The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child:  SfSparkWinLossChart(
                data: <double>[
                  12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10
                ],
              )
            )
          );
        }

    Spark win-loss chart