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

Side titles are not placed the same way when values are translated #1605

Closed
julien4215 opened this issue Mar 12, 2024 · 2 comments
Closed

Side titles are not placed the same way when values are translated #1605

julien4215 opened this issue Mar 12, 2024 · 2 comments
Labels
Fundamental question Further information is requested

Comments

@julien4215
Copy link
Contributor

julien4215 commented Mar 12, 2024

Describe the bug
The sides titles are not placed the same way if I translate the x values (see both screenshot).

To Reproduce
Try with offset=0 first. Then with offset=5.

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

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

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

  @override
  Widget build(BuildContext context) {
    const numberOfPoints = 31;
    const offset = 0;
    final xValues = List<double>.generate(
        numberOfPoints, (index) => offset + index.toDouble());

    final yValues =
        List<double>.generate(numberOfPoints, (index) => index.toDouble());

    Widget bottomTitlesWidget(double value, TitleMeta meta) {
      return SideTitleWidget(
        axisSide: meta.axisSide,
        child: Text(value.toInt().toString()),
      );
    }

    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(50.0),
          child: LineChart(
            LineChartData(
              lineBarsData: [
                LineChartBarData(
                  spots: List.generate(
                    numberOfPoints,
                    (i) => FlSpot(
                      xValues[i],
                      yValues[i],
                    ),
                  ),
                ),
              ],
              titlesData: FlTitlesData(
                rightTitles:
                    const AxisTitles(sideTitles: SideTitles(showTitles: false)),
                topTitles:
                    const AxisTitles(sideTitles: SideTitles(showTitles: false)),
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 25,
                    getTitlesWidget: bottomTitlesWidget,
                    interval: 10,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots
In the second screenshot the x values are translated of 5 but the side titles are placed differently. I was expecting side titles to be placed at the postion (5, 15, 25, 35) in the second second screenshot.

Versions

  • Flutter 3.19.3
  • FL Chart 0.66.2
@julien4215 julien4215 changed the title Side titles are not placed the same way when translated Side titles are not placed the same way when values are translated Mar 12, 2024
@imaNNeo imaNNeo added bug Something isn't working Fundamental labels Apr 30, 2024
@imaNNeo
Copy link
Owner

imaNNeo commented Apr 30, 2024

There is a complicated logic to handle these titles. So the point is that we try to show round values such as 10, 20, 30, 50, 100, 200, 300, 500, 1k, 2k, 3k, 5k...
And we use these values based on the baseline that we have. The default value for baselineX and baselineY is zero, and if you change the baselineX to offset, your issue is fixed.

Add this line of code baselineX: offset.toDouble(), in line 34 of your sample.

image image

@imaNNeo imaNNeo added question Further information is requested and removed bug Something isn't working labels Apr 30, 2024
@imaNNeo
Copy link
Owner

imaNNeo commented Apr 30, 2024

I can't count it as a bug actually, so I mark it as a question and I think your issue is resolved.
If you have any issues, please let me know here

@imaNNeo imaNNeo closed this as completed Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fundamental question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants