Search code examples
flutterdartfl-chartflutter-charts

How to remove double y-axis labels and yellow lines in Flutter chart?

I'm working on a Flutter chart and I'm encountering two issues:

1. Double Y-Axis Labels: The y-axis is displaying duplicate labels for some values. How can I fix this to show only one label per value?

2. Yellow Lines: Yellow lines appear underneath my chart. What might cause these lines and how do I remove them?

Image:

chart demonstrating the issue

Code:

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineTitles {
  static GetTitleData() => FlTitlesData(
      show: true,
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 35,
            getTitlesWidget: (value, meta) {
              switch (value.toInt()) {
                case 2:
                  return Text(
                    'MAR',
                    style: TextStyle(
                      color: Color(0xff68737d),
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  );
                case 5:
                  return Text(
                    'JUN',
                    style: TextStyle(
                      color: Color(0xff68737d),
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  );
                case 8:
                  return Text('SEP',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ));
              }
              return Text(" ");
            }),

      ),
      leftTitles: AxisTitles(
          sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 35,
              getTitlesWidget: (value, meta) {
                switch (value.toInt()) {
                  case 1:
                    return Text(
                      '10k',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                    );
                  case 3:
                    return Text(
                      '30k',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                    );
                  case 5:
                    return Text('50k',
                        style: TextStyle(
                          color: Color(0xff68737d),
                          fontWeight: FontWeight.bold,
                          fontSize: 15,
                        )
                    );

                }
                return Text(" ");
              },

          )));
}

Things I've tried:

I tried uninstalling and reinstalling the app, but it didn't resolve the issues.

Solution

  • Use Scaffold as your parent widget.

    Scaffold(
  body: ///rest of your widgets here
)