Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip not displaying when touched value from BackgroundBarChartRodData is less than zero. #1345

Closed
koodimetsa opened this issue May 20, 2023 · 2 comments · Fixed by #1378
Closed
Labels
Bar Chart bug Something isn't working good first issue Good for newcomers

Comments

@koodimetsa
Copy link

Describe the bug
Sometimes there is a need to show a bar chart with y-axis that starts from less than zero, for example from -5. When adding BackgroundBarChartRodData with fromY less than zero, tooltip does not show when the part that is less than zero of BackgroundBarChartRodData is touched.

Similar issue is when BarChartRodData toY is less than zero. Then tooltip doesn't show no matter what part of the BackgroundBarChartRodData is touched.

To Reproduce

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: SafeArea(child: _BarChart()));
  }
}

class _BarChart extends StatelessWidget {
  const _BarChart();

  @override
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
          barTouchData: barTouchData,
          titlesData: titlesData,
          borderData: borderData,
          barGroups: barGroups,
          gridData: FlGridData(show: false),
          alignment: BarChartAlignment.spaceAround,
          maxY: 20,
          minY: -5),
    );
  }

  BarTouchData get barTouchData => BarTouchData(
        enabled: true,
        handleBuiltInTouches: true,
        allowTouchBarBackDraw: true,
        touchTooltipData: BarTouchTooltipData(
          tooltipBgColor: Colors.red,
          tooltipPadding: EdgeInsets.zero,
          tooltipMargin: 8,
          fitInsideVertically: true,
          getTooltipItem: (
            BarChartGroupData group,
            int groupIndex,
            BarChartRodData rod,
            int rodIndex,
          ) {
            return BarTooltipItem(
              rod.toY.round().toString(),
              const TextStyle(
                color: Colors.cyan,
                fontWeight: FontWeight.bold,
              ),
            );
          },
        ),
        touchCallback: (p0, p1) {},
      );

  Widget getTitles(double value, TitleMeta meta) {
    const style = TextStyle(
      color: Colors.blue,
      fontWeight: FontWeight.bold,
      fontSize: 14,
    );
    String text = 'Test';

    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 4,
      child: Text(text, style: style),
    );
  }

  FlTitlesData get titlesData => FlTitlesData(
        show: true,
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 30,
            getTitlesWidget: getTitles,
          ),
        ),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        rightTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
      );

  FlBorderData get borderData => FlBorderData(
        show: false,
      );

  LinearGradient get _barsGradient => const LinearGradient(
        colors: [
          Colors.blue,
          Colors.cyan,
        ],
        begin: Alignment.bottomCenter,
        end: Alignment.topCenter,
      );

  List<BarChartGroupData> get barGroups {
    return List.generate(
      7,
      (index) => BarChartGroupData(
        x: 1,
        barRods: [
          BarChartRodData(
            toY: index + 5,
            gradient: _barsGradient,
            backDrawRodData: BackgroundBarChartRodData(
              show: true,
              fromY: -5,
              toY: index + 5,
              color: Colors.grey.shade300,
            ),
          )
        ],
      ),
    );
  }
}

class BarChartSample3 extends StatefulWidget {
  const BarChartSample3({super.key});

  @override
  State<StatefulWidget> createState() => BarChartSample3State();
}

class BarChartSample3State extends State<BarChartSample3> {
  @override
  Widget build(BuildContext context) {
    return const AspectRatio(
      aspectRatio: 1.6,
      child: _BarChart(),
    );
  }
}

Video
https://github.com/imaNNeo/fl_chart/assets/9356589/467fd249-2657-4471-b8a3-2818ef98a7a5

Versions
Flutter 3.10.1
fl_ chart 0.62.0

@imaNNeo
Copy link
Owner

imaNNeo commented Jul 7, 2023

Merged!
Will be ready in the next version

@imaNNeo
Copy link
Owner

imaNNeo commented Oct 7, 2023

Check it out in 0.64.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bar Chart bug Something isn't working good first issue Good for newcomers
Projects
None yet
2 participants