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