fix for scatter plot scaling

demo/src/scatter_grid_test.js

@@ -19,8 +19,8 @@ const data = [
             {column1: 9, column2: 39, highlight: false},
             {column1: 10, column2: 60, highlight: false},
             {column1: 8, column2: 78, highlight: false},
-            {column1: 6, column2: 65, highlight: false},
-            {column1: 4, column2: 54, highlight: false},
+            {column1: 6, column2: 15, highlight: false},
+            {column1: 4, column2: 4, highlight: false},
         ]
     },
     {
@@ -48,10 +48,10 @@ const data = [
             {column1: 2, column2: 29, highlight: false},
             {column1: 3, column2: 11, highlight: false},
             {column1: 4, column2: 37, highlight: false},
-            {column1: 5, column2: 70, highlight: false},
-            {column1: 6, column2: 48, highlight: false},
+            {column1: 5, column2: 10, highlight: false},
+            {column1: 6, column2: 18, highlight: false},
             {column1: 7, column2: 95, highlight: false},
-            {column1: 8, column2: 24, highlight: false},
+            {column1: 8, column2: 2, highlight: false},
         ]
     },
     {
@@ -78,9 +78,9 @@ const data = [
             {column1: 1, column2: 34, highlight: false},
             {column1: 2, column2: 46, highlight: false},
             {column1: 3, column2: 58, highlight: false},
-            {column1: 4, column2: 67, highlight: false},
-            {column1: 5, column2: 79, highlight: false},
-            {column1: 6, column2: 80, highlight: false},
+            {column1: 4, column2: 37, highlight: false},
+            {column1: 5, column2: 9, highlight: false},
+            {column1: 6, column2: 10, highlight: false},
         ]
     },
     {
@@ -115,8 +115,8 @@ const data = [
                 {column1: 9, column2: 26, highlight: false},
                 {column1: 10, column2: 28, highlight: false},
                 {column1: 1, column2: 17, highlight: false},
-                {column1: 2, column2: 39, highlight: false},
-                {column1: 3, column2: 60, highlight: false},
+                {column1: 2, column2: 9, highlight: false},
+                {column1: 3, column2: 6, highlight: false},
             ]
     }
 ]

src/js/charts/scatterchart.js

@@ -11,7 +11,9 @@ export class ScatterChartWidget extends BaseChartWidget {
   }
 
   plot(divWidth, divHeight, el) {
-    const [width, height] = this.clearAndScaleSvg(divWidth, divHeight);
+    this.marginRight = 50;
+    this.marginBottom = 50;
+    const [width, height] = this.clearAndScaleSvg(divWidth, divHeight,20,40);
     this.drawTitle();
 
     if (!this.dataIsValid) {
@@ -25,8 +27,8 @@ export class ScatterChartWidget extends BaseChartWidget {
     const xmax = "xmax" in this.options ? this.options.xmax : d3.max(this.data, (d) => d.column1);
     const ymax = "ymax" in this.options ? this.options.ymax : d3.max(this.data, (d) => d.column2);
 
-    const xScale = d3.scaleLinear().range([0, xmax]);
-    const yScale = d3.scaleLinear().range([0, ymax]);
+    const xScale = d3.scaleLinear().range([0, width]);
+    const yScale = d3.scaleLinear().range([0, height]);
 
     xScale.domain([0, xmax]);
     yScale.domain([0, ymax]);