flutter charts timeseries bar chart with x axis time as label - flutter

Question

i'm using charts_flutter: ^0.12.0 to implement bar chart with fixed time like 6,8,10,12,14,16,18,22 hours of the day in x axis, but with no success, tried the example but i get only two label's on the x axis 6 and 18 corresponding to the data, kindly help me with implementing the same. Trying to achieve as shown in the pic
The code sample i have tried is
class ChartsDaily extends StatelessWidget {
List<charts.Series<dynamic, DateTime>> seriesList = _createSampleData();
bool animate = false;
//ChartsDaily(this.seriesList, {this.animate = false});
ChartsDaily({Key? key}) : super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory ChartsDaily.withSampleData() {
return ChartsDaily();
}
#override
Widget build(BuildContext context) {
return charts.TimeSeriesChart(
seriesList,
defaultRenderer: charts.BarRendererConfig<DateTime>(
barRendererDecorator:
charts.BarLabelDecorator<DateTime>() // charts.BarLabelDecorator
),
animate: animate,
// Optionally pass in a [DateTimeFactory] used by the chart. The factory
// should create the same type of [DateTime] as the data provided. If none
// specified, the default creates local date time.
// dateTimeFactory: const charts.LocalDateTimeFactory(),
domainAxis: charts.DateTimeAxisSpec(
tickProviderSpec: charts.DayTickProviderSpec(increments: [1]),
tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
day: charts.TimeFormatterSpec(
format: 'HH:mm', transitionFormat: 'HH:mm')),
),
secondaryMeasureAxis: charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec(
dashPattern: [4, 4],
color: charts.ColorUtil.fromDartColor(Colors.grey.shade300))),
tickProviderSpec: charts.BasicNumericTickProviderSpec(
desiredMinTickCount: 5,
desiredTickCount: 5,
dataIsInWholeNumbers: true,
zeroBound: true,
)),
// domainAxis: charts.DateTimeAxisSpec(
// tickProviderSpec: charts.DateTimeEndPointsTickProviderSpec(),
// tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
// day: charts.TimeFormatterSpec(
// format: 'HH:mm', transitionFormat: 'HH:mm', noonFormat: 'HH:mm'),
// // hour: charts.TimeFormatterSpec(format: 'Hm', transitionFormat: 'Hm'),
// ),
// showAxisLine: false,
// viewport: charts.DateTimeExtents(
// start: DateTime(2022, 05, 04, 06), end: DateTime(2022, 05, 04, 22)),
// ),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
final data = [
TimeSeriesSales(DateTime(2022, 5, 4, 6, 0), 5),
TimeSeriesSales(DateTime(2022, 5, 4, 10, 30), 25),
TimeSeriesSales(DateTime(2022, 5, 4, 14, 0), 100),
TimeSeriesSales(DateTime(2022, 5, 4, 18, 0), 75),
];
return [
charts.Series<TimeSeriesSales, DateTime>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: data,
)
];
}
}
/// Sample time series data type.
class TimeSeriesSales {
final DateTime time;
final int sales;
TimeSeriesSales(this.time, this.sales);
}
Also need to have y axis values not starting from 0. TIA

Answer 1

I think you need the StaticNumericTickProviderSpec for the domainAxis of your chart.
This is the example from Google. I hope it can help you