Animated chart streaming in milliseconds

This fiddle demonstrates how to implement tick by tick animated streaming with millisecond granularity

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);


// example animation code for reference
/*CIQ.Animation =
	function (config) {
		if (!config) throw new Error("Invalid constructor arguments.");
		var stx, animationParameters, easeMachine;
		if (config instanceof CIQ.ChartEngine) {
			// legacy constructor
			stx = arguments[0];
			animationParameters = arguments[1];
			easeMachine = arguments[2];
		} else {
			stx = config.stx;
			animationParameters = config.animationParameters;
			easeMachine = config.easeMachine;
		}
		if (!stx)
			return console.warn(
				"No CIQ.ChartEngine provided. Cannot properly create CIQ.Animation instance"
			);
		var params = {
			stayPut: false,
			ticksFromEdgeOfScreen: 5,
			granularity: 1000000
		};
		animationParameters = CIQ.extend(params, animationParameters);

		if (params.tension) stx.chart.tension = animationParameters.tension;
		stx.tickAnimator =
			easeMachine || new CIQ.EaseMachine(Math.easeOutCubic, 1000);
		var scrollAnimator = new CIQ.EaseMachine(Math.easeInOutCubic, 1000);

		var flashingColors = ["#0298d3", "#19bcfc", "#5dcffc", "#9ee3ff"];
		var flashingColorIndex = 0;
		var flashingColorThrottle = 20;
		var flashingColorThrottleCounter = 0;

		var filterSession = false;
		var nextBoundary = null;

		function initMarketSessionFlags() {
			filterSession = false;
			nextBoundary = null;
		}

		stx.addEventListener(["symbolChange", "layout"], function (obj) {
			initMarketSessionFlags();
		});

		stx.prepend("updateCurrentMarketData", function (
			data,
			chart,
			symbol,
			params
		) {
			if (!chart) chart = this.chart;
			if (
				params &&
				params.fromTrade &&
				(chart.closePendingAnimation || chart.closePendingAnimation === 0)
			) {
				params.finalClose =...