SfSparkAreaChart.custom constructor

SfSparkAreaChart.custom({
  1. Key? key,
  2. int? dataCount,
  3. SparkChartIndexedValueMapper? xValueMapper,
  4. SparkChartIndexedValueMapper<num>? yValueMapper,
  5. SparkChartPlotBand? plotBand,
  6. double borderWidth = 2,
  7. Color? borderColor,
  8. Color color = Colors.blue,
  9. bool isInversed = false,
  10. double axisCrossesAt = 0,
  11. Color axisLineColor = Colors.black,
  12. double axisLineWidth = 2,
  13. List<double>? axisLineDashArray,
  14. Color? highPointColor,
  15. Color? lowPointColor,
  16. Color? negativePointColor,
  17. Color? firstPointColor,
  18. Color? lastPointColor,
  19. SparkChartMarker? marker,
  20. SparkChartLabelDisplayMode? labelDisplayMode,
  21. TextStyle labelStyle = const TextStyle(fontFamily: 'Roboto', fontStyle: FontStyle.normal, fontWeight: FontWeight.normal, fontSize: 12),
  22. SparkChartTrackball? trackball,
})

Creates the spark area chart for the provided set of data with its default view.

The difference between the default constructor and this constructor is, in the default constructor uses its data property to get the input data value. The data property of the default constructor is of type List

The custom constructor uses its dataCount, xValueMapper and yValueMapper to get the input data.

The dataCount property allows declaring the total data count going to be displayed in the chart.

The xValueMapper returns the x- value of the corresponding data point. The xValueMapper allows providing num, DateTime, or string as x-value.

The yValueMapper returns the y-value of the corresponding data point.

class SalesData {
   SalesData(this.month, this.sales);
   final String month;
   final double sales;
}

 List<SalesData> data;

@override
void initState() {
 super.initState();
 data = <SalesData>[
   SalesData('Jan', 200),
   SalesData('Feb', 215),
   SalesData('Mar', 380),
   SalesData('Apr', 240),
   SalesData('May', 280),
 ];
}

 @override
Widget build(BuildContext context) {
 return Scaffold(
   body: Center(
       child: SfSparkAreaChart.custom(
        dataCount: 5,
         xValueMapper: (int index) => data[index].month,
         yValueMapper: (int index) => data[index].sales
      )
    ),
 );
}

Implementation

SfSparkAreaChart.custom(
    {Key? key,

    /// Data count for the spark charts.
    int? dataCount,

    /// Specifies the x-value mapping field.
    SparkChartIndexedValueMapper<dynamic>? xValueMapper,

    /// Specifies the y-value mapping field.
    SparkChartIndexedValueMapper<num>? yValueMapper,
    this.plotBand,
    this.borderWidth = 2,
    this.borderColor,
    this.color = Colors.blue,
    this.isInversed = false,
    this.axisCrossesAt = 0,
    this.axisLineColor = Colors.black,
    this.axisLineWidth = 2,
    this.axisLineDashArray,
    this.highPointColor,
    this.lowPointColor,
    this.negativePointColor,
    this.firstPointColor,
    this.lastPointColor,
    this.marker,
    this.labelDisplayMode,
    this.labelStyle = const TextStyle(
        fontFamily: 'Roboto',
        fontStyle: FontStyle.normal,
        fontWeight: FontWeight.normal,
        fontSize: 12),
    this.trackball})
    : _sparkChartDataDetails = SparkChartDataDetails(
          dataCount: dataCount,
          xValueMapper: xValueMapper,
          yValueMapper: yValueMapper),
      super(key: key);