Fl_chart: How to creat line chart with date (as string) in x-axis

[mukhammad-akilov]

For example I have such data:
List<Map<String, dynamic> data = [ { 'date': '17.10.2020 ', 'value': 10.5, }, { 'date': '118.10.2020 ', 'value': 20.5, }, { 'date': '19.10.2020 ', 'value': 30.5, }, { 'date': '20.10.2020 ', 'value': 40.5, }, ]

I want to display this data like this chart:

!!But the problem is that FLSpot class only accepts double value. For example:
List<FlSpot> allSpots = [ FlSpot(0, 1), FlSpot(1, 2), FlSpot(2, 1.5), FlSpot(3, 3), FlSpot(4, 3.5), FlSpot(5, 5), FlSpot(6, 8), ];

[imaNNeoFighT]

Hi, you have to map your dates to indices values and put in x property,
then show dates in the title section instead of indices numbers.

[mukhammad-akilov]

@imaNNeoFighT Thanks for you reply. I could not find anything in documentation. Can you provide some simple example?

[masc-it]

@imaNNeoFighT Thanks for you reply. I could not find anything in documentation. Can you provide some simple example?

Quite straightforward:

// get your flSpots
flSpots = yourObjects
              .map((e) => FlSpot(
                 DateTime.parse(e.date)  // e.date = "2020-10-24"
                    .millisecondsSinceEpoch
                    .toDouble(),
                e.value))

// in your chart
...
titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,

          getTextStyles: (value) => const TextStyle(
              color: Color(0xff68737d),

              fontSize: 14),
          getTitles: (value) {
            final DateTime date =
                DateTime.fromMillisecondsSinceEpoch(value.toInt());
            final parts = date.toIso8601String().split("T");
            return parts.first;
          },
          margin: 12,
          interval:
              (widget.spots[widget.spots.length - 1].x - widget.spots[0].x),
        ),
...

[mukhammad-akilov]

@masc-it Thanks, I will try it