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

BarTouchTooltipData cannot be displayed under Y-axis 0, Y-axis <0 #1462

Closed
Tate-zwt opened this issue Oct 20, 2023 · 4 comments
Closed

BarTouchTooltipData cannot be displayed under Y-axis 0, Y-axis <0 #1462

Tate-zwt opened this issue Oct 20, 2023 · 4 comments
Labels
Bar Chart bug Something isn't working

Comments

@Tate-zwt
Copy link

Tate-zwt commented Oct 20, 2023

Describe the bug
When the Y-axis is less than 0, the BarTouchTooltipData prompt can only be displayed on the 0-point baseline. In fact, I want it to be above the -X point. This should be a BUG. Please take a look. Thank you very much!
To Reproduce
maxY = 180
minY = -600

BarTouchTooltipData(
                direction: TooltipDirection.top,
                tooltipHorizontalAlignment: FLHorizontalAlignment.center,
                fitInsideHorizontally: true, 
                fitInsideVertically: true, 
                tooltipBgColor: Colors.transparent,
                tooltipPadding: EdgeInsets.zero,
                tooltipMargin: 0,
                getTooltipItem: ((group, groupIndex, rod, rodIndex) {
                  return (rod.fromY != 0 && rod.toY != 0)
                      ? BarTooltipItem(
                          rod.toY.toInt().toString(),
                          10.textStyle(MYColors.colorB1B1B1, bold: true),
                        )
                      : BarTooltipItem('', 10.textStyle(Colors.transparent, bold: true));
                }),
              )

Screenshots
If applicable, add screenshots, or videoshots to help explain your problem.
image

Versions

  • which version of the Flutter are you using?
    Flutter 3.10.5
  • which version of the FlChart are you using?
    fl_chart: ^0.63.0

I hope BarTouchTooltip supports displaying at the bottom of the bar chart,Looking forward to your reply!

@imaNNeo
Copy link
Owner

imaNNeo commented Nov 11, 2023

I didn't understand it. Can you also provide me a reproducible code? Thanks!

@Tate-zwt
Copy link
Author

Tate-zwt commented Dec 1, 2023

image

Hello, the distance on the picture, according to the distance set by the code, should be equivalent. However, when running, the result is not equal. At present, it is because if it is lower than -Y, it can only be displayed at the 0 point position. I I think the prompt should be based on the top of the histogram, thank you!

 tooltipPadding: EdgeInsets.zero,
 tooltipMargin: 0,

The following code example can be run:

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

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[_setupChart()],
        ),
      ),
    );
  }

  Widget _setupChart() {
    Widget? chart;
    chart = BarChart(
      barChartData(),
      swapAnimationDuration: Duration.zero,
    );

    return AspectRatio(
      aspectRatio: 339 / 147,
      child: Row(
        children: [
          Expanded(
            child: Stack(
              children: [
                chart,
              ],
            ),
          ),
        ],
      ),
    );
  }

  BarChartData barChartData() {
    return BarChartData(
      barGroups: [
        _createGroupDataSleep(
          0,
          -250,
          -50,
        ),
        _createGroupDataSleep(
          1,
          -280,
          -100,
        ),
        _createGroupDataSleep(
          2,
          -210,
          10,
        )
      ],
      maxY: 100,
      minY: -300,
      barTouchData: BarTouchData(
          enabled: true,
          touchTooltipData: BarTouchTooltipData(
            direction: TooltipDirection.top,
            tooltipHorizontalAlignment: FLHorizontalAlignment.center,
            fitInsideHorizontally: true,
            fitInsideVertically: true,
            tooltipBgColor: Colors.transparent,
            tooltipPadding: EdgeInsets.zero,
            tooltipMargin: 0,
            getTooltipItem: ((group, groupIndex, rod, rodIndex) {
              return (rod.fromY != 0 && rod.toY != 0)
                  ? BarTooltipItem(rod.toY.toString(), const TextStyle(color: Colors.black, fontSize: 10))
                  : BarTooltipItem('', const TextStyle(color: Colors.black, fontSize: 10));
            }),
          )),
      alignment: BarChartAlignment.spaceAround,
      titlesData: const FlTitlesData(
        show: true,
        leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
      ),
      gridData: const FlGridData(
        show: false,
      ),
    );
  }

  BarChartGroupData _createGroupDataSleep(
    int x,
    double fromY,
    double toY, {
    double width = 15,
  }) {
    return BarChartGroupData(
      x: x,
      groupVertically: true,
      barRods: [
        BarChartRodData(
          fromY: fromY,
          toY: toY,
          color: Colors.amber,
          width: width,
          borderRadius: BorderRadius.circular(0),
        ),
      ],
      showingTooltipIndicators: [0],
    );
  }
}

Versions

which version of the Flutter are you using?
Flutter 3.10.5
which version of the FlChart are you using?
fl_chart: ^0.64.0

@Tate-zwt
Copy link
Author

Tate-zwt commented Dec 1, 2023

I hope BarTouchTooltip supports displaying at the bottom of the bar chart!

@imaNNeo imaNNeo added bug Something isn't working and removed Lack of Information labels Dec 3, 2023
This was referenced Dec 25, 2023
@imaNNeo
Copy link
Owner

imaNNeo commented Dec 25, 2023

Fixed in 0.66.0

@imaNNeo imaNNeo closed this as completed Dec 25, 2023
OlehSv pushed a commit to Oleh-Sv/fl_chart that referenced this issue May 14, 2024
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
Projects
None yet
Development

No branches or pull requests

2 participants