How update the domainAxis in charts.DateTimeAxisSpec viewport in flutter_chart? - flutter

Question

I have confused with working of flutter_graph. I want to two help yu guys.
I trying to make datetetime charts using charts_flutter package.
I want to make x-axis value 1-2-2018 format instead of oct-2017(this is default style). I want to update all x-values tp dd-MM-YYY style. How to do that,.
2)I want to make update domainAxis in charts.DateTimeAxisSpec viewport. How to update start and end properity in correct format? i actually iam using API value. so its not static, its dynamic, its changes all time. so how to update viewport in properly.
I am stucking in this two things. here i am sharing the model one code. Please add your things.
class LineChart extends StatefulWidget {
final List<LineChartModel> firstGraph;
const LineChart({
Key? key,
required this.firstGraph,
}) : super(key: key);
#override
State<LineChart> createState() => _LineChartState();
}
class _LineChartState extends State<LineChart> {
//late AnalyticsNotifier noti;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
List<charts.Series<LineChartModel, DateTime>> series = [
charts.Series<LineChartModel, DateTime>(
id: 'Graph1',
colorFn: (_, __) => charts.MaterialPalette.deepOrange.shadeDefault,
domainFn: (LineChartModel sales, _) => sales.date,
measureFn: (LineChartModel sales, _) => sales.count,
data: widget.firstGraph,
),
];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: charts.TimeSeriesChart(
series,
animate: true,
behaviors: [
charts.SlidingViewport(),
charts.PanAndZoomBehavior(),
charts.ChartTitle('Day',
behaviorPosition: charts.BehaviorPosition.bottom,
titleStyleSpec: const charts.TextStyleSpec(fontSize: 15),
titleOutsideJustification:
charts.OutsideJustification.middleDrawArea),
charts.ChartTitle('Count of observations',
behaviorPosition: charts.BehaviorPosition.start,
titleStyleSpec: const charts.TextStyleSpec(fontSize: 15),
titleOutsideJustification:
charts.OutsideJustification.middleDrawArea),
],
dateTimeFactory: const charts.LocalDateTimeFactory(),
domainAxis: charts.DateTimeAxisSpec(//how to add this one in proper.
viewport: charts.DateTimeExtents(
start: widget.firstGraph.first.date,
end: widget.firstGraph[5].date,
),
renderSpec: const charts.SmallTickRendererSpec(
labelCollisionOffsetFromAxisPx: 35,
labelCollisionRotation: -80,
// Tick and Label styling here.
labelStyle: charts.TextStyleSpec(
fontSize: 12, // size in Pts.
fontFamily: 'Montserrat',
color: charts.MaterialPalette.black,
),
)),
primaryMeasureAxis: const charts.NumericAxisSpec(
//viewport: charts.NumericExtents(0, 10),
renderSpec: charts.GridlineRendererSpec(
// Tick and Label styling here.
labelStyle: charts.TextStyleSpec(
fontSize: 9, // size in Pts.
fontFamily: 'Montserrat',
color: charts.MaterialPalette.black,
),
),
),
defaultRenderer: charts.LineRendererConfig(
includeArea: true,
includeLine: true,
areaOpacity: 0.25,
includePoints: true,
layoutPaintOrder: 1,
radiusPx: 3,
roundEndCaps: false,
strokeWidthPx: 1,
),
),
)
],
);
}
}
class LineChartModel {
final DateTime date;
final int count;
LineChartModel(
this.date,
this.count,
);
}