Fl_chart: I can't change the background color

[lukepighetti]

I'm not sure what's going on, I feel like I'm making a mistake but for some reason I cannot change the background color

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:provider/provider.dart';
import 'package:wlw/extensions/extensions.dart';
import 'package:wlw/state/app_state.dart';

class BalanceHistoryChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    final data = appState.transactions.getBalanceHistory();

    return Container(
      color: Colors.green,
      child: LineChart(
        LineChartData(
          backgroundColor: Colors.red,
          borderData: FlBorderData(show: false),
          titlesData: FlTitlesData(
            bottomTitles: SideTitles(showTitles: false),
            topTitles: SideTitles(showTitles: false),
            rightTitles: SideTitles(showTitles: false),
            leftTitles: SideTitles(showTitles: false),
          ),
          lineBarsData: [
            LineChartBarData(
              barWidth: 2.5,
              spots: [
                for (var d in data)
                  FlSpot(
                    data.indexOf(d).toDouble(),
                    d.amount,
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

[imaNNeoFighT]

I can not run this code to debug.

[lukepighetti]

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:provider/provider.dart';
import 'package:wlw/extensions/extensions.dart';
import 'package:wlw/state/app_state.dart';

class BalanceHistoryChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    // final data = appState.transactions.getBalanceHistory();
    final data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    return Container(
      width: double.maxFinite,
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: LineChart(
        LineChartData(
          borderData: FlBorderData(show: false),
          titlesData: FlTitlesData(show: false),
          lineTouchData: LineTouchData(enabled: false),
          // backgroundColor: Colors.white,
          lineBarsData: [
            LineChartBarData(
              barWidth: 2.5,
              dotData: FlDotData(show: false),
              spots: [
                for (var d in data)
                  FlSpot(
                    d * 2.0,
                    d * 1.0,
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

This gives me this. Are the horizontal lines getting stretched?

[lukepighetti]

I had to do this to resolve. I don't think I've ever yelled at my computer so much before haha.

          gridData: FlGridData(show: false),

[imaNNeoFighT]

If this issue is resolved close remove it :))

[lukepighetti]

I don't consider it resolved. The grid data shouldn't ever look like a background.

[imaNNeoFighT]

Then please tell me what's wrong?
You should set gridData: FlGridData(show: false), to disable drawing horizontal lines.

[lukepighetti]

If you look at the example at the top the background is actually the grid data, but the lines are so close together it looks like a solid background. That's a bug.

[imaNNeoFighT]

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:provider/provider.dart';
import 'package:wlw/extensions/extensions.dart';
import 'package:wlw/state/app_state.dart';

class BalanceHistoryChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    // final data = appState.transactions.getBalanceHistory();
    final data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    return Container(
      width: double.maxFinite,
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: LineChart(
        LineChartData(
          borderData: FlBorderData(show: false),
          titlesData: FlTitlesData(show: false),
          lineTouchData: LineTouchData(enabled: false),
          // backgroundColor: Colors.white,
          lineBarsData: [
            LineChartBarData(
              barWidth: 2.5,
              dotData: FlDotData(show: false),
              spots: [
                for (var d in data)
                  FlSpot(
                    d * 2.0,
                    d * 1.0,
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

This gives me this. Are the horizontal lines getting stretched?

Your sample is working well, and I see the background color working.

[lukepighetti]

That sample shows it working as intended. The initial screenshot shows it working not as intended. I don't care if you close this issue but it is a bug.

[imaNNeoFighT]

I can't find the bug.
could you explain it clearly please?

[lukepighetti]

Don't worry about it. Thanks for your time and dedication to this package. :)