Plotly ScatterGL Symbol Bug

by brian428

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<p>
    Here's a simple Plotly plot - 
    <a href="http://bit.ly/1Or9igj">plotly.js documentation</a>
</p>

<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
<div id="testChart" style="width:100vw; height:calc(100vh - 100px);"></div>

margin: { t: 40, b:50, l:75, r:30 }
width: **616px** is what we want. How to get there via calculation?

500 + 75 + 30 = 605 (width too short)
500 + 75 + 30 + (40+50)/2 = 650 (width too long)
500 + 75 + 30 + (40+50)/4 = 628 (still 12px too wide)

Want to end up adding 116 px to 500.
75+30 = 105, 40+50 = 90. Ratio = 1.16.   NO.

adjusted height = 500-40-50=410, 500/410 = 1.219. 500*1.219= 
-->
<div style="width: 100%; height: 80vh; border: 1px solid blue;">
  <div id="testChart" style="width:600px; height: 500px"></div>
</div>

<!--
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>
-->

JavaScript

var traces = [{
    "type": "scattergl",
    "mode": "markers",
    "legendgroup": "group1",
    "marker": {
      "symbol": ["circle", "circle", "square", "square", "square", "square", "square", "square", "square", "square", "square", "square"],
      "size": [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
      "color": ["#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360", "#154360"],
      "line": {
        "width": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        "color": "black"
      }
    },
    "line": {
      "width": 1,
      "color": "#154360"
    },
    "x": [2.701511529340699, 2.6122480014315665, 2.4947786678406754, 2.348802785083905, 2.1741465268600417, 1.9707647649704292, 1.7387423860598177, 1.47829513787803, 1.1897700003016873, 0.873645077913408, 0.5305290125077718, 0.16115991547396633],
    "y": [4.207354924039483, 4.553971934368589, 4.901640480337894, 5.2483926564979955, 5.592234515803358, 5.931153870972413, 6.263128205211754, 6.586132665329949, 6.898148109919221, 7.197169185022516, 7.481212399530408, 7.748324172467517],
    "yaxis": "y",
    "name": "group1"
  }
];

var layout = {
  "datarevision": "59e535ec-d640-420d-9de6-838b589b8369",
  "hovermode": "closest",
  "hoverdistance": 10,
  "autosize": true,
  "margin": {
    "t": 70,
    "b": 75,
    "l": 70,
    "r": 30
  },
  "title": "A vs B",
  "xaxis": {
    "title": "",
    "titlefont": {
      "size": 16
    },
    "type": "linear",
    "range": [-40.4205436810194, 40.4205436810194],
    "nticks": 12,
    "tickfont": {
      "size": 12
    },
    "scaleanchor": "y",
    "scaleratio": 1.038644120352985,
    "constrain": "domain",
    "constraintoward": "center",
    "showgrid": false,
    "zeroline": false,
    "showline": false,
    "ticks": "",
    "showticklabels": false
  },
  "yaxis": {
    "title": "",
    "titlefont": {
      "size": 16
    },
    "type": "linear",
    "range": [-38.916644198864205, 38.916644198864205],
   ...