How to use TimeStamp in domain Axis while creating scatterPlot in charts_flutter instead of num. As ScatterPlot takes series in <T,D> ,D = num

Question

I am Creating a ScatterPlot chart based on the data in which I will show TimeStamp on the domain Axis(X-Axis). I have already built Bar and TimeSeries chart successfully. In case of ScatterPlot, it takes Series<T,D> D as num. I tried using epoch time but not getting much further as it should show time and also not able to add viewPort if iN terms of int only. Below is what I have tried.

Creating Series :

List<charts.Series<ValueAtTime, int>> _getScatterPlotSeries() {
List<charts.Series<ValueAtTime, int>> chartsSeriesList = [];
chartsSeriesList = _ccdList
    .map((ccd) => charts.Series<ValueAtTime, int>(
          id: ccd.dataType,
          data: ccd.data,
          domainFn: (datum, _) => DateTime.parse(datum.date).millisecond,
          measureFn: (datum, _) => datum.value,
          colorFn: (datum, _) =>
              charts.ColorUtil.fromDartColor(datum.color),
          strokeWidthPxFn: (datum, _) => 2.0,
        ))
    .toList();

var lineData = [
  ValueAtTime(
    date: _ccdList.first.data.first.date,
    value: _ccdList.first.data.first.value,
    color: Colors.red,
  ),
  ValueAtTime(
    date: _ccdList.last.data.last.date,
    value: _ccdList.last.data.last.value,
    color: Colors.blue,
  ),
];

chartsSeriesList.add(
  charts.Series(
    id: 'Line',
    data: lineData,
    domainFn: (datum, _) => DateTime.parse(datum.date).second,
    measureFn: (datum, _) => datum.value,
    colorFn: (datum, _) => charts.ColorUtil.fromDartColor(datum.color),
  )..setAttribute(charts.rendererIdKey, 'customLine'),
);
return chartsSeriesList;

}

Then while setting up the Chart :

Container(
          color: Colors.white,
          height: 350,
          width: double.infinity,
          child: charts.ScatterPlotChart(
            _getScatterPlotSeries(),
            animate: true,
            domainAxis: charts.NumericAxisSpec(
              renderSpec: charts.SmallTickRendererSpec(
                labelStyle: charts.TextStyleSpec(
                  fontSize: 10,
                  color: charts.ColorUtil.fromDartColor(Colors.black),
                ),
              ),
            ),
            // defaultRenderer: ,
            customSeriesRenderers: [
              charts.LineRendererConfig(
                customRendererId: 'customLine',
                layoutPaintOrder:
                charts.LayoutViewPaintOrder.point + 1,
            ),
            ],
            behaviors: [
              charts.SeriesLegend(
                cellPadding: const EdgeInsets.all(2),
                showMeasures: true,
                position: charts.BehaviorPosition.top,
                desiredMaxColumns: 5,
              ),
              charts.ChartTitle(
                'Real-time scatter plot for Meter  ${meter.meterName}',
                behaviorPosition: charts.BehaviorPosition.top,
                titleOutsideJustification:
                    charts.OutsideJustification.middleDrawArea,
                innerPadding: 2,
                titleStyleSpec: charts.TextStyleSpec(
                  fontSize: 14,
                  color: charts.ColorUtil.fromDartColor(Colors.black),
                ),
              ),
              charts.ChartTitle(
                'Values',
                behaviorPosition: charts.BehaviorPosition.start,
                titleOutsideJustification:
                    charts.OutsideJustification.middleDrawArea,
                innerPadding: 2,
                titleStyleSpec: charts.TextStyleSpec(
                  fontSize: 14,
                  color: charts.ColorUtil.fromDartColor(Colors.black),
                ),
              ),
              charts.ChartTitle(
                'Time',
                behaviorPosition: charts.BehaviorPosition.bottom,
                titleOutsideJustification:
                    charts.OutsideJustification.middleDrawArea,
                innerPadding: 2,
                titleStyleSpec: charts.TextStyleSpec(
                  fontSize: 14,
                  color: charts.ColorUtil.fromDartColor(Colors.black),
                ),
              ),
              charts.SlidingViewport(),
              charts.PanAndZoomBehavior(),
            ],
            selectionModels: [
              charts.SelectionModelConfig(
                changedListener: (charts.SelectionModel model) {
                  AppConstants.logger({
                    model.selectedSeries[0]
                        .measureFn(model.selectedDatum[0].index)
                  });
                },
              ),
            ],
          ),
        ),

I think the chart may be plotting points at the proper place but I want to show the time at the bottom. The problem is, that It takes Numerical Axis Spec only and also how can I format shown milliseconds if I want to.