diff --git a/example/lib/presentation/samples/line/line_chart_sample2.dart b/example/lib/presentation/samples/line/line_chart_sample2.dart index 7535242e8..70f0464d3 100644 --- a/example/lib/presentation/samples/line/line_chart_sample2.dart +++ b/example/lib/presentation/samples/line/line_chart_sample2.dart @@ -146,6 +146,8 @@ class _LineChartSample2State extends State { maxY: 6, lineBarsData: [ LineChartBarData( + strokeColor: Colors.red, + strokeWidth: 3, spots: const [ FlSpot(0, 3), FlSpot(2.6, 2), diff --git a/lib/src/chart/line_chart/line_chart_data.dart b/lib/src/chart/line_chart/line_chart_data.dart index e42be381c..9666f66f8 100644 --- a/lib/src/chart/line_chart/line_chart_data.dart +++ b/lib/src/chart/line_chart/line_chart_data.dart @@ -251,6 +251,8 @@ class LineChartBarData with EquatableMixin { this.isStrokeJoinRound = false, BarAreaData? belowBarData, BarAreaData? aboveBarData, + this.strokeColor, + this.strokeWidth = 0, this.dotData = const FlDotData(), this.errorIndicatorData = const FlErrorIndicatorData(), @@ -346,6 +348,14 @@ class LineChartBarData with EquatableMixin { /// otherwise it draws line with hard edges. final bool isCurved; + /// Optional border color for the line. + /// Useful for improving visibility when lines overlap. + final Color? strokeColor; + + /// Width of the border around the line. + /// Default is 0 (no border). + final double strokeWidth; + /// If [isCurved] is true, it determines smoothness of the curved edges. final double curveSmoothness; @@ -427,6 +437,8 @@ class LineChartBarData with EquatableMixin { isStepLineChart: b.isStepLineChart, lineChartStepData: LineChartStepData.lerp(a.lineChartStepData, b.lineChartStepData, t), + strokeColor: Color.lerp(a.strokeColor, b.strokeColor, t), + strokeWidth: lerpDouble(a.strokeWidth, b.strokeWidth, t)!, ); /// Copies current [LineChartBarData] to a new [LineChartBarData], @@ -454,6 +466,8 @@ class LineChartBarData with EquatableMixin { Shadow? shadow, bool? isStepLineChart, LineChartStepData? lineChartStepData, + Color? strokeColor, + double? strokeWidth, }) => LineChartBarData( spots: spots ?? this.spots, @@ -479,6 +493,8 @@ class LineChartBarData with EquatableMixin { shadow: shadow ?? this.shadow, isStepLineChart: isStepLineChart ?? this.isStepLineChart, lineChartStepData: lineChartStepData ?? this.lineChartStepData, + strokeColor: strokeColor ?? this.strokeColor, + strokeWidth: strokeWidth ?? this.strokeWidth, ); /// Used for equality check, see [EquatableMixin]. @@ -505,6 +521,8 @@ class LineChartBarData with EquatableMixin { shadow, isStepLineChart, lineChartStepData, + strokeColor, + strokeWidth, ]; } diff --git a/lib/src/chart/line_chart/line_chart_painter.dart b/lib/src/chart/line_chart/line_chart_painter.dart index 3932f6d3c..2a4cf33fc 100644 --- a/lib/src/chart/line_chart/line_chart_painter.dart +++ b/lib/src/chart/line_chart/line_chart_painter.dart @@ -281,6 +281,18 @@ class LineChartPainter extends AxisChartPainter { barData, ); drawBarShadow(canvasWrapper, barPath, barData); + if (barData.strokeColor != null && barData.strokeWidth > 0) { + final borderPaint = Paint() + ..color = barData.strokeColor! + ..strokeWidth = barData.barWidth + (barData.strokeWidth * 2) + ..style = PaintingStyle.stroke + ..strokeCap = + barData.isStrokeCapRound ? StrokeCap.round : StrokeCap.butt + ..strokeJoin = + barData.isStrokeJoinRound ? StrokeJoin.round : StrokeJoin.miter; + + canvasWrapper.canvas.drawPath(barPath, borderPaint); + } drawBar(canvasWrapper, barPath, barData, holder); } }