Fix element creation for large dataset (#8388)

* Fix element creation for large dataset
* Fix syncing
* Remove duplication

src/core/core.datasetController.js

@@ -990,18 +990,25 @@ export default class DatasetController {
 	 */
 	_insertElements(start, count, resetNewElements = true) {
 		const me = this;
-		const elements = new Array(count);
 		const meta = me._cachedMeta;
 		const data = meta.data;
+		const end = start + count;
 		let i;
 
-		for (i = 0; i < count; ++i) {
-			elements[i] = new me.dataElementType();
+		const move = (arr) => {
+			arr.length += count;
+			for (i = arr.length - 1; i >= end; i--) {
+				arr[i] = arr[i - count];
+			}
+		};
+		move(data);
+
+		for (i = start; i < end; ++i) {
+			data[i] = new me.dataElementType();
 		}
-		data.splice(start, 0, ...elements);
 
 		if (me._parsing) {
-			meta._parsed.splice(start, 0, ...new Array(count));
+			move(meta._parsed);
 		}
 		me.parse(start, count);
 

test/specs/controller.line.tests.js

@@ -907,4 +907,30 @@ describe('Chart.controllers.line', function() {
 		expect(meta.data[2].options.borderWidth).toBe(3);
 		expect(meta.data[3].options.borderWidth).toBe(4);
 	});
+
+	it('should render a million points', function() {
+		var data = [];
+		for (let x = 0; x < 1e6; x++) {
+			data.push({x, y: Math.sin(x / 10000)});
+		}
+		function createChart() {
+			window.acquireChart({
+				type: 'line',
+				data: {
+					datasets: [{
+						data,
+						borderWidth: 1,
+						radius: 0
+					}],
+				},
+				options: {
+					scales: {
+						x: {type: 'linear'},
+						y: {type: 'linear'}
+					}
+				}
+			});
+		}
+		expect(createChart).not.toThrow();
+	});
 });