Strange rounding when the x values are 0

[guvanch07]

Describe the bug i get List values from backend where all values are above 0 or 0 and when isCurved param set true, i see unexpected rounding

To Reproduce

                      LineChart(
                        LineChartData(
                          borderData: FlBorderData(
                            show: true,
                            border: Border(
                                bottom: BorderSide(
                                    color: context.colors.outlineVariantTint)),
                          ),
                          lineTouchData: LineTouchData(
                            enabled: true,
                            getTouchedSpotIndicator: (barData, spotIndexes) =>
                                spotIndexes.isNotEmpty
                                    ? spotIndexes
                                        .map(
                                          (e) => TouchedSpotIndicatorData(
                                            FlLine(
                                                color: context
                                                    .colors.outlineVariantTint),
                                            FlDotData(
                                              show: true,
                                              getDotPainter: (spot, percent,
                                                      barData, index) =>
                                                  FlDotCirclePainter(
                                                radius: 8,
                                                color: context.colors.surface,
                                                strokeWidth: 1.5,
                                                strokeColor:
                                                    context.colors.primary,
                                              ),
                                            ),
                                          ),
                                        )
                                        .toList()
                                    : [],
                            touchTooltipData: LineTouchTooltipData(
                              getTooltipColor: (touchedSpot) =>
                                  context.colors.surface,
                              tooltipBorder: BorderSide(
                                  color: context.colors.outlineVariantTint),
                              tooltipRoundedRadius: 10,
                              getTooltipItems:
                                  (List<LineBarSpot> lineBarsSpot) =>
                                      lineBarsSpot.isNotEmpty
                                          ? lineBarsSpot
                                              .map(
                                                (lineBarSpot) =>
                                                    LineTooltipItem(
                                                  '${lineBarSpot.y.toInt()} m',
                                                  AppTextStyles.body2(context),
                                                ),
                                              )
                                              .toList()
                                          : [],
                            ),
                          ),
                          lineBarsData: [
                            LineChartBarData(
                              spots: List.generate(
                                  items.length,
                                  (index) => FlSpot(
                                        index.toDouble(),
                                        items[index].value.toInt() / 60,
                                      ),
                                  growable: false),
                              isCurved: true,
                              curveSmoothness: 0.2,
                              barWidth: 2,
                              color: context.colors.primary,
                              dotData: const FlDotData(show: false),
                            ),
                          ],
                          // minY: -2,
                          // minX: 0,
                          titlesData: FlTitlesData(
                            bottomTitles: AxisTitles(
                              sideTitles: SideTitles(
                                showTitles: true,
                                interval: _interval,
                                getTitlesWidget: (value, meta) =>
                                    periodType == PeriodEntityResType.month &&
                                            value == 0
                                        ? Transform.translate(
                                            offset: const Offset(15, 0),
                                            child: _bottomTitlesManager(
                                                value, meta, context))
                                        : _bottomTitlesManager(
                                            value, meta, context),
                              ),
                            ),
                            rightTitles: AxisTitles(
                              sideTitles: SideTitles(
                                showTitles: true,
                                getTitlesWidget: (value, meta) =>
                                    rightTitles(value, meta, context),
                                reservedSize: 60,
                              ),
                            ),
                            topTitles: const AxisTitles(
                              sideTitles: SideTitles(showTitles: false),
                            ),
                            leftTitles: const AxisTitles(
                              sideTitles: SideTitles(showTitles: false),
                            ),
                          ),
                          gridData: FlGridData(
                            show: true,
                            drawVerticalLine: false,
                            getDrawingHorizontalLine: (value) => FlLine(
                              color: context.colors.outlineVariantTint,
                              strokeWidth: 1,
                            ),
                          ),
                        ),
                      ),

Screenshots

Versions fl_chart: ^0.67.0 sdk: 3.19.4

[TobiasRump]

Hey, you need to set the the property for preventing overshooting:

 LineChartBarData(
    ...
      isCurved: true,
      curveSmoothness: 0.4,
      preventCurveOverShooting: true,  <--
     ...
  ),

[guvanch07]

@TobiasRump Thanks but faced other problem after adding preventCurveOverShooting, not all corners are curved

[techouse]

The answer here is obvious: Don't use curves.

[TobiasRump]

@guvanch07 pls check the docs you have three properties to manipulate the curve behavior:

PropName	Description	default value
isCurved	curves the corners of the line on the spot's positions	false
curveSmoothness	smoothness radius of the curve corners (works when isCurved is true)	0.35
preventCurveOverShooting	prevent overshooting when draw curve line on linear sequence spots, check this https://github.com/imaNNeo/fl_chart/issues/25	false
preventCurveOvershootingThreshold	threshold for applying prevent overshooting algorithm	10.0

[guvanch07]

okay, thank you for clarifying @TobiasRump

[edgarfroes]

So, I'm facing the same issue and I am NOT using curved lines, and all junctions are weird:

[edgarfroes]

I just cloned the sample app and ran it without any modifications, and the result is the same, the corners are not matching.

Flutter: 3.19.6

I tested on both iOS Simulator and Android emulator. The print above is on an iPhone 11 physical device, and the print below is from an iOS Simulator.

[edgarfroes]

By the looks of it, it appears to be a calculation error when painting the corners of the lines onto the right coordinates, which are the coordinates that match the connection between the end of said line and the start of the next one.

[artsooter]

@edgarfroes I also encountered the same problem. You can lower the version of flutter and the problem will be solved. My flutter version is 3.16.5 #https://github.com/imaNNeo/fl_chart/issues/1625

[techouse]

@edgarfroes @artsooter disable Impeller and it will be fixed. You might also try to play around with the latest Flutter master branch, as this PR https://github.com/flutter/engine/pull/52978 might have fixed it.