diff --git a/packages/scatterplot/src/ScatterPlotCanvas.js b/packages/scatterplot/src/ScatterPlotCanvas.js
index eba45fc23c..830f95f7ad 100644
--- a/packages/scatterplot/src/ScatterPlotCanvas.js
+++ b/packages/scatterplot/src/ScatterPlotCanvas.js
@@ -216,7 +216,7 @@ class ScatterPlotCanvas extends Component {
         const legendData = data.map(serie => ({
             id: serie.id,
             label: serie.id,
-            color: getColor(serie),
+            color: getColor({ serie }),
         }))
 
         legends.forEach(legend => {
diff --git a/website/src/components/charts/scatterplot/ScatterPlotCanvas.js b/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
index ef55813784..427fee95ac 100644
--- a/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
+++ b/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
@@ -47,7 +47,7 @@ export default class ScatterPlotCanvas extends Component {
             pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
 
             colors: 'nivo',
-            colorBy: 'id',
+            colorBy: 'serie.id',
 
             symbolSize: 4,
             symbolShape: 'circle',