imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.86k stars 1.78k forks source link

Tooltip margin problem #1724

Closed SalihCanBinboga closed 3 months ago

SalihCanBinboga commented 3 months ago

** Don't make a duplicate issue. I have just searched but i could not find any related issue.

Describe the bug As seen in the photo I added and the sample code snippet, when there is no padding/margin on the horizontal axis, the tooltip displays at the beginning and end go outside the screen.

To Reproduce I added the example app.

Screenshots

Versions

Example

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: ConstrainedBox(
            constraints: const BoxConstraints(
              maxHeight: 300,
            ),
            child: LineChart(
              LineChartData(
                lineBarsData: [
                  LineChartBarData(
                    isCurved: true,
                    color: const Color(0xFF191B1E),
                    barWidth: 4,
                    curveSmoothness: .5,
                    isStrokeCapRound: true,
                    spots: [
                      const FlSpot(0, 5),
                      const FlSpot(1, 6),
                      const FlSpot(2, 6),
                      const FlSpot(3, 6),
                      const FlSpot(4, 4),
                      const FlSpot(5, 7),
                      const FlSpot(6, 3),
                      const FlSpot(7, 6),
                      const FlSpot(8, 6),
                      const FlSpot(9, 8),
                      const FlSpot(10, 9),
                    ],
                    dotData: const FlDotData(
                      show: false,
                    ),
                    belowBarData: BarAreaData(
                      show: true,
                      gradient: const LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Color(0x35191B1E),
                          Color(0xFFFFFFFF),
                        ],
                      ),
                    ),
                  ),
                ],
                gridData: const FlGridData(
                  show: false,
                ),
                borderData: FlBorderData(
                  show: false,
                ),
                titlesData: const FlTitlesData(
                  show: false,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
SalihCanBinboga commented 3 months ago

I have just found fitInsideHorizontally parameter inside touchTooltipData thank you.