Repository: imaNNeo/fl_chart (dart)

Issue:
Manage z-index for Scatter Chart
Hi.

It would be very nice to be able to manage a z-index in the Scatter plot. I have a lot of point in my scatter plot, and they do not have the same color. And some are more important than others. I'd like them to be on front, so they are not hidden by others.

Current hack would probably be to change the order of the array of my Spots, but it is an hack.

Having a z-index property, CSS-style, would be super.

Thanks for this awesome lib !

Victor

Pull request:
Add `renderPriority` for ScatterSpot. If some spots need to be in front, spots can be sorted by this property.

fixes #1545

Patch:
diff --git a/lib/src/chart/scatter_chart/scatter_chart_data.dart b/lib/src/chart/scatter_chart/scatter_chart_data.dart
index fa2e5990f..ad5d160f0 100644
--- a/lib/src/chart/scatter_chart/scatter_chart_data.dart
+++ b/lib/src/chart/scatter_chart/scatter_chart_data.dart
@@ -193,8 +193,10 @@ class ScatterSpot extends FlSpot with EquatableMixin {
     super.x,
     super.y, {
     bool? show,
+    int? renderPriority,
     FlDotPainter? dotPainter,
   })  : show = show ?? true,
+        renderPriority = renderPriority ?? 0,
         dotPainter = dotPainter ??
             FlDotCirclePainter(
               radius: 6,
@@ -205,6 +207,9 @@ class ScatterSpot extends FlSpot with EquatableMixin {
   /// Determines show or hide the spot.
   final bool show;
 
+  // Determines Z-Index of the spot
+  final int renderPriority;
+
   /// Determines shape of the spot
   final FlDotPainter dotPainter;
 
@@ -223,12 +228,14 @@ class ScatterSpot extends FlSpot with EquatableMixin {
     double? x,
     double? y,
     bool? show,
+    int? renderPriority,
     FlDotPainter? dotPainter,
   }) =>
       ScatterSpot(
         x ?? this.x,
         y ?? this.y,
         show: show ?? this.show,
+        renderPriority: renderPriority ?? this.renderPriority,
         dotPainter: dotPainter ?? this.dotPainter,
       );
 
@@ -238,6 +245,7 @@ class ScatterSpot extends FlSpot with EquatableMixin {
         lerpDouble(a.x, b.x, t)!,
         lerpDouble(a.y, b.y, t)!,
         show: b.show,
+        renderPriority: a.renderPriority + (t * (b.renderPriority - a.renderPriority)).round(),
         dotPainter: a.dotPainter.lerp(a.dotPainter, b.dotPainter, t),
       );
 
@@ -247,6 +255,7 @@ class ScatterSpot extends FlSpot with EquatableMixin {
         x,
         y,
         show,
+        renderPriority,
         dotPainter,
       ];
 }
diff --git a/repo_files/documentations/scatter_chart.md b/repo_files/documentations/scatter_chart.md
index 2e953d76b..2665c5b55 100644
--- a/repo_files/documentations/scatter_chart.md
+++ b/repo_files/documentations/scatter_chart.md
@@ -33,6 +33,7 @@ When you change the chart's state, it animates to the new state internally (usin
 |show| determines to show or hide the spot|true|
 |radius| radius of the showing spot| [8]
 |color| colors of the spot|// a color based on the values|
+|renderPriority| sort by this to manage overlap|0|
 
 
 ### ScatterTouchData ([read about touch handling](handle_touches.md))


Test patch:
diff --git a/test/chart/data_pool.dart b/test/chart/data_pool.dart
index e22e62af3..d6f662622 100644
--- a/test/chart/data_pool.dart
+++ b/test/chart/data_pool.dart
@@ -2307,12 +2307,14 @@ final ScatterChartData scatterChartData1 = ScatterChartData(
       2,
       2,
       show: false,
+      renderPriority: 10,
       dotPainter: FlDotCirclePainter(radius: 11, color: Colors.purple),
     ),
     ScatterSpot(
       1,
       2,
       show: false,
+      renderPriority: -1,
       dotPainter: FlDotCirclePainter(radius: 11, color: Colors.white),
     ),
   ],
diff --git a/test/chart/scatter_chart/scatter_chart_data_test.dart b/test/chart/scatter_chart/scatter_chart_data_test.dart
index 2d1d1bd2c..69731a84d 100644
--- a/test/chart/scatter_chart/scatter_chart_data_test.dart
+++ b/test/chart/scatter_chart/scatter_chart_data_test.dart
@@ -54,6 +54,7 @@ void main() {
                   2,
                   2,
                   show: false,
+                  renderPriority: 10,
                   dotPainter: FlDotCirclePainter(
                     radius: 11,
                     color: Colors.purple,
@@ -63,6 +64,7 @@ void main() {
                   1,
                   2,
                   show: false,
+                  renderPriority: -1,
                   dotPainter: FlDotCirclePainter(
                     radius: 11,
                     color: Colors.white,
@@ -80,6 +82,7 @@ void main() {
                   2,
                   2,
                   show: false,
+                  renderPriority: 10,
                   dotPainter: FlDotCirclePainter(
                     radius: 11,
                     color: Colors.purple,
@@ -89,6 +92,7 @@ void main() {
                   0,
                   0,
                   show: false,
+                  renderPriority: 0,
                   dotPainter: FlDotCirclePainter(
                     radius: 33,
                     color: Colors.yellow,
@@ -98,6 +102,7 @@ void main() {
                   1,
                   2,
                   show: false,
+                  renderPriority: -1,
                   dotPainter: FlDotCirclePainter(
                     radius: 11,
                     color: Colors.white,