JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<div id="description">
<p>Proble occurs only in Chrome.</p>
<p>Two lines drawn with Dimple charts. First line drawn correctly 10 pairs of data.</p>
<p>Second line NOT drawn correctly 11 pairs of data 1st 10 identical to first line.</p>
</div>
<div id="chartContainer">
</div>
JavaScript
var data1 = [{"distance":"31","variance":0.11},
{"distance":"92","variance":0.38},
{"distance":"153","variance":0.84},
{"distance":"214","variance":1.55},
{"distance":"276","variance":2.34},
{"distance":"337","variance":3.04},
{"distance":"398","variance":3.86},
{"distance":"459","variance":4.6},
{"distance":"521","variance":5.16},
{"distance":"582","variance":6.09},
]
var data2 = [{"distance":"31","variance":0.11},
{"distance":"92","variance":0.38},
{"distance":"153","variance":0.84},
{"distance":"214","variance":1.55},
{"distance":"276","variance":2.34},
{"distance":"337","variance":3.04},
{"distance":"398","variance":3.86},
{"distance":"459","variance":4.6},
{"distance":"521","variance":5.16},
{"distance":"582","variance":6.09},
{"distance":"643","variance":6.89},
]
var svg = dimple.newSvg("#chartContainer", 600,600);
var myChart = new dimple.chart(svg);
myChart.setBounds(90, 35, 480, 400)
xAxis = myChart.addMeasureAxis("x", "distance");
yAxis = myChart.addMeasureAxis("y", "variance");
// xAxis.showGridlines = true;
yAxis.ticks = 5
xAxis.ticks = 5
s1 = myChart.addSeries("distance", dimple.plot.line, [xAxis, yAxis]);
s1.data = data1
s1.lineMarkers = true;
s2 = myChart.addSeries("distance", dimple.plot.line, [xAxis, yAxis]);
s2.data = data2
myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();