How to pass string parameter in line chart x axis flutter

Question

I was trying to make a line chart in flutter application with Y-Axis as values(int) and X-Axis as Date(String), as I show in the image below but flutter predefined class not allowing me to do that cause when I try to send string as parameter then it throwing error saying that String is not Subtype of int, I am new to flutter please help me out..

Example which I am trying to do click here.

This is how I want to show my chart.

Answer 1

I override the title using titlesData attribute of LineChartData and you can override the others side title using other attributes:

bottomTitles: SideTitles(
 showTitles: true,
 getTitles: (index) {
 return monthsName[index.toInt()];
}),

Package:

fl_chart: ^0.35.0

Dummy Data:

final List<FlSpot> dummyData1 = List.generate(12, (index) {
return FlSpot(index.toDouble(), index * Random().nextDouble());
});

List of Month name:

List<String> monthsName = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];

Chart Code:

LineChart(
    LineChartData(
      titlesData: FlTitlesData(
        bottomTitles: SideTitles(
            showTitles: true,
            getTitles: (index) {
              return monthsName[index.toInt()];
            }),
        leftTitles: SideTitles(showTitles: false),
        rightTitles: SideTitles(showTitles: false),
        topTitles: SideTitles(showTitles: false),
      ),
      borderData: FlBorderData(show: false),
      lineBarsData: [
        LineChartBarData(
          spots: dummyData1,
          isCurved: false,
          barWidth: 4,
          colors: [
            Colors.orange,
          ],
        ),
      ],
    ),
),      

This will help you for sure! Enjoy programming.

Answer 2

_graphSection(ScreenType type) {
final customTickFormatter =
charts.BasicNumericTickFormatterSpec((num value) {
  if (value == 0) {
    return "Mon";
  } else if (value == 1) {
    return "Tue";
  } else if (value == 2) {
    return "Wed";
  } else if (value == 3) {
    return "Thr";
  } else if (value == 4) {
    return "Fri";
  } else if (value == 5) {
    return "Sat";
  } else if (value == 6) {
    return "Sun";
  }
});

return SizedBox(
  height: 200,
  child: charts.LineChart(
    _createSampleData(),
    defaultRenderer:
    charts.LineRendererConfig(includeArea: true, stacked: true),
    animate: true,
    // Sets up a currency formatter for the measure axis.

    primaryMeasureAxis: new charts.NumericAxisSpec(
      tickProviderSpec:
      new charts.BasicNumericTickProviderSpec(desiredTickCount: 6),
    ),
    domainAxis: charts.NumericAxisSpec(
      tickProviderSpec:
      charts.BasicNumericTickProviderSpec(desiredTickCount: 7),
      tickFormatterSpec: customTickFormatter,
    ),
  ),
);
}

_createSampleData() {
final myFakeDesktopData = [
  new LinearSales(0, 1000),
  new LinearSales(1, 2000),
  new LinearSales(2, 4000),
  new LinearSales(3, 1000),
  new LinearSales(4, 4000),
  new LinearSales(5, 5000),
  new LinearSales(6, 6000),
];

var shadowColor = chartColor.Color(r: 240, g: 246, b: 244, a: 160);
var yellowThemeColor = chartColor.Color.fromHex(code: "#f4e400");

return [
  charts.Series<LinearSales, int>(
    id: 'Cost',
    domainFn: (LinearSales row, _) => row.day,
    measureFn: (LinearSales row, _) => row.sales,
    colorFn: (_, __) => yellowThemeColor,
    areaColorFn: (_, __) => shadowColor,
    data: myFakeDesktopData,
  )
];
}

Same output

Answer 3

Because the Domain axis (x-axis) is days, you need to use a TimeSeriesChart, not a LineChart. Then supply tickFormatterSpec to format the ticks as days of the week. See complete example below:

class SimpleTimeSeriesChart extends StatelessWidget {
  const SimpleTimeSeriesChart(this.seriesList);

  /// Creates a [TimeSeriesChart] with sample data and no transition.
  factory SimpleTimeSeriesChart.withSampleData() {
    return SimpleTimeSeriesChart(
      _createSampleData(),
    );
  }

  final List<charts.Series<TimeSeriesSales, DateTime>> seriesList;

  @override
  Widget build(BuildContext context) => charts.TimeSeriesChart(
        seriesList,
        animate: false,
        dateTimeFactory: const charts.LocalDateTimeFactory(),
        domainAxis: charts.DateTimeAxisSpec(
          tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
            day: charts.TimeFormatterSpec(
              format: 'EEE',
              transitionFormat: 'EEE',
            ),
          ),
        ),
      );

  /// Create one series with sample hard coded data.
  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
    final List<TimeSeriesSales> data = <TimeSeriesSales>[
      TimeSeriesSales(DateTime(2019, 1, 7), 5),
      TimeSeriesSales(DateTime(2019, 1, 8), 25),
      TimeSeriesSales(DateTime(2019, 1, 9), 100),
      TimeSeriesSales(DateTime(2019, 1, 10), 75),
    ];

    return <charts.Series<TimeSeriesSales, DateTime>>[
      charts.Series<TimeSeriesSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

class TimeSeriesSales {
  TimeSeriesSales(this.time, this.sales);

  final DateTime time;
  final int sales;
}