Plotly Modebar Lag with Customdata

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>
<h3>Lag seems due to use of `customdata`. Switch between zoom and select to see the lag. Then comment out the `customdata` prop in the traces and re-run to see the modebar lag (mostly) go away.</h3>
<div id="testChart" style="width:100%; height:100%;"></div>

CSS

body { background-color: white }

JavaScript

var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var testChart = document.getElementById('testChart');
var data = {
	x: [],
  y: [],
  color: [],
  symbol: [],
  size: [],
  customData: []
};

var npoints = 75000;
for (var i = 0, l = npoints; i < l; i++) {
    data.y.push(Math.random() * 5000)
    data.x.push(i);
    data.color.push(colorList[Math.floor(Math.random() * 20)]);
    data.size.push(6);
    data.symbol.push('x');
    data.customData.push({ id:i, prop1:"abc", prop2:"abc", prop3:"abc", prop4:"abc", prop5:"abc", prop6:"abc", prop7:"abc", prop8:"abc", prop9:"abc", prop10:"abc", prop11:"abc", prop12:"abc", prop13:"abc", prop14:"abc", prop15:"abc", prop16:"abc", prop17:"abc", prop18:"abc", prop19:"abc", prop20:"abc", prop21:"abc", prop22:"abc", prop23:"abc", prop24:"abc", prop25:"abc", prop26:"abc", prop27:"abc", prop28:"abc", prop29:"abc", prop30:"abc", prop31:"abc", prop32:"abc", prop33:"abc", prop34:"abc", prop35:"abc", prop36:"abc", prop37:"abc", prop38:"abc", prop39:"abc", prop40:"abc", prop41:"abc", prop42:"abc", prop43:"abc", prop44:"abc", prop45:"abc", prop46:"abc", prop47:"abc", prop48:"abc", prop49:"abc", prop50:"abc", propB1:"abc", propB2:"abc", propB3:"abc", propB4:"abc", propB5:"abc", propB6:"abc", propB7:"abc", propB8:"abc", propB9:"abc", propB10:"abc", propB11:"abc", propB12:"abc", propB13:"abc", propB14:"abc", propB15:"abc", propB16:"abc", propB17:"abc", propB18:"abc", propB19:"abc", propB20:"abc", propB21:"abc", propB22:"abc", propB23:"abc", propB24:"abc", propB25:"abc", propB26:"abc", propB27:"abc", propB28:"abc", propB29:"abc", propB30:"abc", propB31:"abc", propB32:"abc", propB33:"abc", propB34:"abc", propB35:"abc", propB36:"abc", propB37:"abc", propB38:"abc", propB39:"abc", propB40:"abc", propB41:"abc", propB42:"abc", propB43:"abc",...