Gradient in TimeSeries chart.

[techiesanket]

Current Implementation.

Required Implementation.

I want to achieve a gradient below the line just like the above-required example.

Current Implemented Code

import 'dart:math';

import 'package:agro_trade_specialist/ui/home/model/res_home.dart';
import 'package:agro_trade_specialist/utils/preference_key.dart';
import 'package:agro_trade_specialist/utils/preference_utils.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter/flutter.dart';
import 'package:charts_flutter/src/text_element.dart' as element;
import 'package:charts_flutter/src/text_style.dart' as style;
import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';

class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
  @override
  void paint(ChartCanvas canvas, Rectangle<num> bounds,
      {List<int> dashPattern,
      Color fillColor,
      FillPatternType fillPattern,
      Color strokeColor,
      double strokeWidthPx}) {
    super.paint(canvas, bounds,
        dashPattern: dashPattern,
        fillColor: fillColor,
        fillPattern: fillPattern,
        strokeColor: strokeColor,
        strokeWidthPx: strokeWidthPx);
    canvas.drawRect(Rectangle(bounds.width + 25, -10, 135, bounds.height + 15),
        fill: Color.fromHex(code: "fE2F0D9"));
    var textStyle = style.TextStyle();
    textStyle.color = Color.black;
    textStyle.fontSize = 15;
    canvas.drawText(
        element.TextElement(
            "${getString(PreferenceKey.tapData)}  ${getString(PreferenceKey.tapDate)}",
            style: textStyle),
        (bounds.width + 30).round(),
        (-5).round());
  }
}

class AreaAndLineChart extends StatelessWidget {
  final List<charts.Series<TimeSeriesSales, DateTime>> seriesList;
  final bool showChart;

  AreaAndLineChart(this.seriesList, this.showChart);

  factory AreaAndLineChart.withSampleData(
      List<ChartData> tempData, bool showChart) {
    return new AreaAndLineChart(_createSimpleData(tempData), showChart);
  }

  @override
  Widget build(BuildContext context) {
    initializeDateFormatting();
    return charts.TimeSeriesChart(
      seriesList,
      animate: true,
      defaultRenderer: new LineRendererConfig(includeArea: true, stacked: true),
      behaviors: [
        LinePointHighlighter(symbolRenderer: CustomCircleSymbolRenderer()),
        SelectNearest(eventTrigger: SelectionTrigger.tapAndDrag),
        charts.DomainHighlighter(),
      ],
      selectionModels: [
        SelectionModelConfig(changedListener: (SelectionModel model) async {
          if (model.hasDatumSelection) {
            await setString(
                PreferenceKey.tapData,
                model.selectedSeries[0]
                    .measureFn(model.selectedDatum[0].index)
                    .toString());
            await setString(
                PreferenceKey.tapDate,
                DateFormat("dd-MMM-yyyy").format(
                    DateFormat("yyyy-MM-dd hh:mm:ss").parse(model
                        .selectedSeries[0]
                        .domainFn(model.selectedDatum[0].index)
                        .toString())));
          }
        })
      ],
      dateTimeFactory: const charts.UTCDateTimeFactory(),
      domainAxis: charts.DateTimeAxisSpec(
        showAxisLine: showChart ? true : false,
        tickProviderSpec:
            charts.AutoDateTimeTickProviderSpec(includeTime: true),
        renderSpec: !showChart
            ? charts.NoneRenderSpec()
            : charts.SmallTickRendererSpec(
                labelOffsetFromAxisPx: 10,
                labelStyle: charts.TextStyleSpec(
                    fontSize: 12, color: charts.MaterialPalette.gray.shade600)),
      ),
      secondaryMeasureAxis:
          charts.AxisSpec(showAxisLine: showChart ? true : false),
      primaryMeasureAxis: charts.NumericAxisSpec(
          renderSpec: !showChart
              ? charts.NoneRenderSpec()
              : charts.GridlineRendererSpec(
                  labelStyle: charts.TextStyleSpec(
                      fontSize: 12,
                      color: charts.MaterialPalette.gray.shade600),
                  lineStyle: charts.LineStyleSpec(
                      thickness: 1, color: MaterialPalette.gray.shade100),
                ),
          tickProviderSpec: charts.BasicNumericTickProviderSpec(
              zeroBound: false, desiredTickCount: 4, desiredMaxTickCount: 4),
          showAxisLine: false),
    );
  }

  static List<charts.Series<TimeSeriesSales, DateTime>> _createSimpleData(
      List<ChartData> tempData) {
    List<TimeSeriesSales> datum = [];
    tempData.forEach((element) {
      datum.add(
          TimeSeriesSales(DateTime.tryParse(element.x), element.y.toInt()));
    });
    return <charts.Series<TimeSeriesSales, DateTime>>[
      charts.Series<TimeSeriesSales, DateTime>(
          id: 'Sales',
          colorFn: (_, __) => charts.Color.fromHex(code: "#699E3C"),
          domainFn: (TimeSeriesSales sales, _) => sales.time,
          measureFn: (TimeSeriesSales sales, _) => sales.sales,
          data: datum),
    ];
  }
}

class TimeSeriesSales {
  TimeSeriesSales(this.time, this.sales);

  final DateTime time;
  final int sales;
}

Calling Widget

AreaAndLineChart.withSampleData(tempData, tempData.isNotEmpty ? true : false),

Not able to achieve gradient below the line in Time Series Chart. Please let me know other details if required.

[rlch]

I would also love to see this.

[randhika]

Please help us to provide the Gradient in Time Series