fix(line): change points ordering on stacked lines (#1060)

plouc · Jul 31, 2020 · c10edbf · c10edbf
1 parent fb4aef0
commit c10edbf
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 79 deletions.
diff --git a/packages/line/src/Lines.js b/packages/line/src/Lines.js
@@ -11,16 +11,18 @@ import PropTypes from 'prop-types'
 import LinesItem from './LinesItem'
 
 const Lines = ({ lines, lineGenerator, lineWidth }) => {
-    return lines.map(({ id, data, color }) => (
-        <LinesItem
-            key={id}
-            id={id}
-            points={data.map(d => d.position)}
-            lineGenerator={lineGenerator}
-            color={color}
-            thickness={lineWidth}
-        />
-    ))
+    return lines
+        .reverse()
+        .map(({ id, data, color }) => (
+            <LinesItem
+                key={id}
+                id={id}
+                points={data.map(d => d.position)}
+                lineGenerator={lineGenerator}
+                color={color}
+                thickness={lineWidth}
+            />
+        ))
 }
 
 Lines.propTypes = {

diff --git a/packages/line/src/Points.js b/packages/line/src/Points.js
@@ -14,7 +14,11 @@ const Points = ({ points, symbol, size, borderWidth, enableLabel, label, labelYO
     const theme = useTheme()
     const getLabel = getLabelGenerator(label)
 
-    const mappedPoints = points.map(point => {
+    /**
+     * We reverse the `points` array so that points from the lower lines in stacked lines
+     * graph are drawn on top. See https://github.com/plouc/nivo/issues/1051.
+     */
+    const mappedPoints = points.reverse().map(point => {
         const mappedPoint = {
             id: point.id,
             x: point.x,