Repository: imaNNeo/fl_chart

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


Discussion: Hi @vbaulac , Did you found any solution?
It's a good starting point for contributing, you can just read the [guideline](https://github.com/imaNNeo/fl_chart/blob/main/CONTRIBUTING.md) and open your PR.
We can add a property (for example called `renderPriority` which is null by default) here:
https://github.com/imaNNeo/fl_chart/blob/11d13a78e6a134aa0cfdcd8dfa88dceaf79a4033/lib/src/chart/scatter_chart/scatter_chart_data.dart#L189-L204

Then when rendering it, you can sort them by the `renderPriority` if any point has this property.

I can take this if you'd like!
> I can take this if you'd like!

Yes, that would be nice!



Fix 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,