Change X-axis Line Chart flutter
6,096
With just one point the X axis has no scale, so it zooms in showing the single date in as much resolution as it can - in this case down to the nearest minute. That's midnight ("12AM") on the twelfth of March. To force a fixed scale use a StaticDateTimeTickProviderSpec
. For example:
return Scaffold(
appBar: AppBar(
title: Text('Graph'),
),
body: Container(
height: 500,
width: double.infinity,
child: charts.TimeSeriesChart(
_createSampleData(seriesList),
domainAxis: charts.DateTimeAxisSpec(
tickProviderSpec: charts.StaticDateTimeTickProviderSpec(
<charts.TickSpec<DateTime>>[
charts.TickSpec<DateTime>(DateTime(2020, 3, 1)),
charts.TickSpec<DateTime>(DateTime(2020, 3, 6)),
charts.TickSpec<DateTime>(DateTime(2020, 3, 11)),
charts.TickSpec<DateTime>(DateTime(2020, 3, 16)),
charts.TickSpec<DateTime>(DateTime(2020, 3, 21)),
charts.TickSpec<DateTime>(DateTime(2020, 3, 26)),
charts.TickSpec<DateTime>(DateTime(2020, 4, 1)),
],
),
tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
day: charts.TimeFormatterSpec(
format: 'dd MMM',
transitionFormat: 'dd MMM',
),
),
),
animate: false,
behaviors: [
charts.SlidingViewport(),
charts.PanAndZoomBehavior(),
],
dateTimeFactory: const charts.LocalDateTimeFactory(),
defaultRenderer: charts.LineRendererConfig(
includePoints: true,
),
),
),
);
Comments
-
Tony over 1 year
I want to draw a line chart in flutter. I follow this tutorial, it works fine if the date and month is different.
But why if it only has one date and one point, the graph turn to this?
Code
/// Timeseries chart example import 'package:charts_flutter/flutter.dart' as charts; import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'My app', // used by the OS task switcher theme: ThemeData( accentIconTheme: const IconThemeData.fallback().copyWith( color: Colors.white, ), primaryTextTheme: TextTheme(title: TextStyle(color: Colors.white)), primarySwatch: Colors.orange, primaryIconTheme: const IconThemeData.fallback().copyWith( color: Colors.white, ), ), home: SimpleTimeSeriesChart()), ); } class SimpleTimeSeriesChart extends StatelessWidget { @override Widget build(BuildContext context) { var seriesList = List<Data>(); seriesList.add(Data(DateTime(2020, 03, 12), int.parse("50"))); return Scaffold( appBar: AppBar( title: Text("Graph"), ), body: Container( height: 500, width: double.infinity, child: charts.TimeSeriesChart(_createSampleData(seriesList), animate: false, behaviors: [ new charts.SlidingViewport(), new charts.PanAndZoomBehavior(), ], dateTimeFactory: const charts.LocalDateTimeFactory(), defaultRenderer: new charts.LineRendererConfig(includePoints: true)))); } List<charts.Series<Data, DateTime>> _createSampleData(List<Data> data) { return [ charts.Series<Data, DateTime>( id: 'time', domainFn: (Data sales, _) => sales.time, measureFn: (Data sales, _) => sales.sales, data: data, ) ]; } } /// Sample linear data type. class Data { final DateTime time; final int sales; Data(this.time, this.sales); }
Output
What is 12:00 mean exactly here? I want the x-axis display all the march of date. Is it possible?
-
Tony about 4 yearsCan I display the month as 03 instead of Mar?
-
Richard Heap about 4 yearsSee the DateFormat class.
MM
should produce the numeric form. -
Pedro Molina almost 4 yearsAlso you can create the dateTime like DateTime(year, month), without the day and in the formatter : tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec( month: charts.TimeFormatterSpec( format: 'MMM', transitionFormat: 'MMM', noonFormat: 'MMM', ), ),