+
+
+
+
+
diff --git a/Tutorials/MemoryTests/FifoSeries/src/index.ts b/Tutorials/MemoryTests/FifoSeries/src/index.ts
new file mode 100644
index 00000000..8e77f819
--- /dev/null
+++ b/Tutorials/MemoryTests/FifoSeries/src/index.ts
@@ -0,0 +1,301 @@
+import {
+ EAutoRange,
+ FastLineRenderableSeries,
+ MemoryUsageHelper,
+ NumberRange,
+ NumericAxis,
+ PerformanceDebugHelper,
+ SciChart3DSurface,
+ SciChartDefaults,
+ SciChartJsNavyTheme,
+ SciChartSurface,
+ SciChartSurfaceBase,
+ XyDataSeries,
+} from "scichart";
+
+console.log("window.gc support =", !!window.gc);
+
+SciChartSurfaceBase.DEFAULT_THEME = new SciChartJsNavyTheme();
+
+if (process.env.NODE_ENV !== "production") {
+ MemoryUsageHelper.isMemoryUsageDebugEnabled = true;
+}
+PerformanceDebugHelper.enableDebug = true;
+SciChartSurface.autoDisposeWasmContext = true;
+SciChart3DSurface.autoDisposeWasmContext = true;
+SciChartDefaults.useNativeText = true;
+
+let shouldUseCreateSingle = true;
+let updateInterval = 8;
+let dataSeriesCapacity = 200_000;
+let dataChunkSize = 100_000;
+
+const logMemory = () => {
+ window.gc && window.gc();
+
+ MemoryUsageHelper.objectRegistry?.log();
+};
+
+const logPerformance = () => {
+ const allPerformanceMarks = performance.getEntriesByType("mark");
+ console.log(allPerformanceMarks);
+};
+
+const surfaces: SciChartSurface[] = [];
+
+let controls: any = undefined;
+
+const createRootElement = (index: number) => {
+ const divElement = document.createElement("div");
+ divElement.id = `chart-${index}`;
+ const parentNode = document.getElementById("containerId");
+ parentNode.appendChild(divElement);
+
+ return divElement;
+};
+
+let lastPromise: Promise = Promise.resolve();
+
+const createChart = async (index: number) => {
+ console.log("createChart", index);
+
+ const rootElement = createRootElement(index);
+ const initResult = await init2dChartWithSharedContext(rootElement);
+ controls = initResult.controls;
+
+ surfaces.push(initResult.sciChartSurface);
+};
+
+const init2dChartWithSharedContext = async (rootElement: HTMLDivElement) => {
+ const createFunction = shouldUseCreateSingle
+ ? SciChartSurface.createSingle
+ : SciChartSurface.create;
+ const { sciChartSurface, wasmContext } = await createFunction(rootElement, {
+ id: rootElement.id,
+ title: [
+ `2D Surface with ${
+ shouldUseCreateSingle ? "Individual" : "Shared"
+ } WASM Context.`,
+ `ID: ${rootElement.id}`,
+ ],
+ titleStyle: {
+ fontSize: 14,
+ },
+ });
+
+ const xAxis = new NumericAxis(wasmContext, { autoRange: EAutoRange.Always });
+ xAxis.labelProvider.useCache = false;
+ sciChartSurface.xAxes.add(xAxis);
+ const yAxis = new NumericAxis(wasmContext, {
+ autoRange: EAutoRange.Always,
+ growBy: new NumberRange(0.3, 0.3),
+ });
+ yAxis.labelProvider.useCache = false;
+ sciChartSurface.yAxes.add(yAxis);
+
+ // Create a DataSeries
+ const xyDataSeries = new XyDataSeries(wasmContext, {
+ fifoStartIndex: 0,
+ fifoCapacity: dataSeriesCapacity,
+ });
+
+ // Create a renderableSeries and assign the dataSeries
+ sciChartSurface.renderableSeries.add(
+ new FastLineRenderableSeries(wasmContext, {
+ dataSeries: xyDataSeries,
+ strokeThickness: 3,
+ stroke: "#50C7E0",
+ })
+ );
+
+ let dataPointCount = 0;
+
+ // For more efficiency these are created only once
+ const xValues = new Float64Array(dataChunkSize);
+ const yValues = new Float64Array(dataChunkSize);
+ const appendData = () => {
+ for (let i = 0; i < dataChunkSize; i++) {
+ xValues[i] = dataPointCount++;
+ yValues[i] = 0.2 * Math.sin(i * 0.1) - Math.cos(i * 0.01);
+ }
+
+ xyDataSeries.appendRange(xValues, yValues);
+ };
+
+ const removeData = () => {
+ // Remove all points from the data series
+ xyDataSeries.clear();
+ };
+
+ appendData();
+
+ let interval: NodeJS.Timeout;
+
+ sciChartSurface.addDeletable({
+ delete: () => {
+ clearInterval(interval);
+ interval = undefined;
+ },
+ });
+
+ const toggleAnimate = () => {
+ if (interval) {
+ clearInterval(interval);
+ interval = undefined;
+ } else {
+ // trying to update data each 10ms
+ interval = setInterval(() => {
+ // console.log("updateData");
+ appendData();
+ }, updateInterval);
+ }
+ };
+
+ return {
+ sciChartSurface,
+ controls: { appendData, removeData, toggleAnimate },
+ };
+};
+
+let counter = 0;
+
+const removeChart = (surface: SciChartSurfaceBase) => {
+ console.log("Delete", surface.id);
+ const rootElement = surface.domChartRoot;
+ surface.delete(true);
+ const parentNode = document.getElementById("containerId");
+ parentNode.removeChild(rootElement);
+};
+
+const cleanUp = () => {
+ console.log("Clear all");
+
+ controls = undefined;
+
+ surfaces.forEach((scs) => removeChart(scs));
+ surfaces.length = 0;
+
+ const parentNode = document.getElementById("containerId");
+ parentNode.innerHTML = "";
+ window.gc && window.gc();
+};
+
+const wrapCreation = async (createFunc: () => Promise) => {
+ // await lastPromise;
+ lastPromise = createFunc();
+};
+
+(document.querySelector("#create1") as HTMLInputElement).onclick = () =>
+ wrapCreation(() => createChart(counter++));
+
+(document.querySelector("#append") as HTMLInputElement).onclick = () => {
+ controls.appendData();
+};
+
+(document.querySelector("#remove") as HTMLInputElement).onclick = () => {
+ controls.removeData();
+};
+(document.querySelector("#animate") as HTMLInputElement).onclick = () => {
+ controls.toggleAnimate();
+};
+
+(document.querySelector("#logMemoryDebug") as HTMLInputElement).onclick = () =>
+ logMemory();
+(document.querySelector("#logPerformanceDebug") as HTMLInputElement).onclick =
+ () => logPerformance();
+
+(document.querySelector("#deleteSurfaces") as HTMLInputElement).onclick = () =>
+ cleanUp();
+(document.querySelector("#deleteWasm") as HTMLInputElement).onclick = () => {
+ SciChartSurface.disposeSharedWasmContext();
+ SciChart3DSurface.disposeSharedWasmContext();
+};
+
+document.querySelector("#memoryDebug").onclick = function (
+ ev: MouseEvent
+) {
+ MemoryUsageHelper.isMemoryUsageDebugEnabled = (
+ ev.target as HTMLInputElement
+ ).checked;
+ console.log(
+ "isMemoryUsageDebugEnabled =",
+ MemoryUsageHelper.isMemoryUsageDebugEnabled
+ );
+};
+(document.querySelector("#autoDispose") as HTMLInputElement).onclick =
+ function (ev: MouseEvent) {
+ SciChartSurface.autoDisposeWasmContext = (
+ ev.target as HTMLInputElement
+ ).checked;
+ SciChart3DSurface.autoDisposeWasmContext = (
+ ev.target as HTMLInputElement
+ ).checked;
+ console.log(
+ "autoDisposeWasmContext =",
+ SciChartSurface.autoDisposeWasmContext
+ );
+ };
+(document.querySelector("#performanceDebug") as HTMLInputElement).onclick =
+ function (ev: MouseEvent) {
+ PerformanceDebugHelper.enableDebug = (
+ ev.target as HTMLInputElement
+ ).checked;
+ console.log(
+ "PerformanceDebugHelper.enableDebug =",
+ PerformanceDebugHelper.enableDebug
+ );
+ };
+(document.querySelector("#nativeText") as HTMLInputElement).onclick = function (
+ ev: MouseEvent
+) {
+ SciChartDefaults.useNativeText = (ev.target as HTMLInputElement).checked;
+ console.log("useNativeText =", SciChartDefaults.useNativeText);
+};
+(document.querySelector("#individualContext") as HTMLInputElement).onclick =
+ function (ev: MouseEvent) {
+ shouldUseCreateSingle = (ev.target as HTMLInputElement).checked;
+ console.log("createSingle =", shouldUseCreateSingle);
+ };
+
+const intervalSelector = document.getElementById(
+ "intervalSelector"
+) as HTMLInputElement;
+intervalSelector.value = `${updateInterval}`;
+const intervalLabel = document.getElementById("intervalLabel");
+intervalLabel.innerHTML = `${updateInterval}`;
+
+intervalSelector.onchange = function (ev: Event) {
+ updateInterval = Number.parseInt((ev.target as HTMLInputElement).value, 10);
+ intervalLabel.innerHTML = `${updateInterval}`;
+ console.log("updateInterval =", updateInterval);
+};
+
+const capacitySelector = document.getElementById(
+ "capacitySelector"
+) as HTMLInputElement;
+capacitySelector.value = `${dataSeriesCapacity}`;
+const capacityLabel = document.getElementById("capacityLabel");
+capacityLabel.innerHTML = `${dataSeriesCapacity}`;
+
+capacitySelector.onchange = function (ev: Event) {
+ dataSeriesCapacity = Number.parseInt(
+ (ev.target as HTMLInputElement).value,
+ 10
+ );
+ capacityLabel.innerHTML = `${dataSeriesCapacity}`;
+ console.log("Capacity =", dataSeriesCapacity);
+};
+
+const chunkSizeSelector = document.getElementById(
+ "chunkSizeSelector"
+) as HTMLInputElement;
+chunkSizeSelector.value = `${dataChunkSize}`;
+const chunkSizeLabel = document.getElementById("chunkSizeLabel");
+chunkSizeLabel.innerHTML = `${dataChunkSize}`;
+
+document.querySelector("#chunkSizeSelector").onchange =
+ function (ev: Event) {
+ dataChunkSize = Number.parseInt((ev.target as HTMLInputElement).value, 10);
+ chunkSizeLabel.innerHTML = `${dataChunkSize}`;
+ console.log("dataChunkSize =", dataChunkSize);
+ };
diff --git a/Tutorials/MemoryTests/FifoSeries/tsconfig.json b/Tutorials/MemoryTests/FifoSeries/tsconfig.json
new file mode 100644
index 00000000..427d649a
--- /dev/null
+++ b/Tutorials/MemoryTests/FifoSeries/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "outDir": "./dist",
+ "sourceMap": true,
+ "strict": true,
+ "noImplicitAny": true,
+ "strictNullChecks": false,
+ "strictFunctionTypes": true,
+ "strictBindCallApply": true,
+ "strictPropertyInitialization": false,
+ "noImplicitThis": true,
+ "alwaysStrict": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "commonjs",
+ "target": "es5",
+ "jsx": "react",
+ "allowJs": true,
+ "typeRoots": ["./src/types", "./node_modules/@types"],
+ "resolveJsonModule": true,
+ "esModuleInterop": false
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist", "testUnit", "src/static/*"]
+}
diff --git a/Tutorials/MemoryTests/FifoSeries/webpack.config.js b/Tutorials/MemoryTests/FifoSeries/webpack.config.js
new file mode 100644
index 00000000..3ac76106
--- /dev/null
+++ b/Tutorials/MemoryTests/FifoSeries/webpack.config.js
@@ -0,0 +1,48 @@
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+ mode: "production",
+ devtool: false,
+ entry: "./src/index.ts",
+ performance: {
+ hints: false,
+ },
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ use: "ts-loader",
+ exclude: /node_modules/,
+ },
+ ],
+ },
+ resolve: {
+ extensions: [".js", ".ts"],
+ },
+ output: {
+ filename: "bundle.js",
+ path: path.resolve(__dirname, "build"),
+ },
+ plugins: [
+ new CopyPlugin({
+ patterns: [
+ { from: "src/index.html", to: "" },
+ { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
+ { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
+ { from: "node_modules/scichart/_wasm/scichart3d.data", to: "" },
+ { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
+ ],
+ }),
+ ],
+ devServer: {
+ // static: "./dist",
+ headers: {
+ "Cross-Origin-Embedder-Policy": "require-corp",
+ "Cross-Origin-Opener-Policy": "same-origin",
+ },
+ },
+ optimization: {
+ // runtimeChunk: "single"
+ },
+};
diff --git a/Tutorials/MemoryTests/MemoryManagementCheatSheet.md b/Tutorials/MemoryTests/MemoryManagementCheatSheet.md
new file mode 100644
index 00000000..2586f16b
--- /dev/null
+++ b/Tutorials/MemoryTests/MemoryManagementCheatSheet.md
@@ -0,0 +1,249 @@
+# Memory Management Cheat Sheet
+
+There are documentation pages that we recommend to get familiarized with:
+https://www.scichart.com/documentation/js/current/webframe.html#MemoryBestPractices.html
+https://www.scichart.com/documentation/js/current/webframe.html#DataSeries_DeletingMemory.html
+
+In addition, the following sections repeat or expand the topics of the other documentation pages.
+Also, they mention and demonstrate some important and useful tips to be aware of.
+
+## Chart cleanup
+
+### Surface Initialization with Shared and Individual WASM Context
+
+2D and 3D charts created with SciChart use an engine loaded as a WASM module, which we usually reference as `wasmContext`.
+There are 2 types of WASM module usage in the charts:
+
+- using a shared `wasmContext` for multiple chart surfaces of the same type (2D or 3D); could be referred to as "multi-chart"
+- using a separate `wasmContext` per chart surface; a.k.a. "createSingle-chart"
+
+There are also a couple of methods that can be used to initialize a surface of each type:
+
+- A "multi-chart" can be initialized with `SciChartSurface.create` (or `SciChart3DSurface.create` for 3D);
+ and via the Builder API.
+- While "single-chart", correspondingly, is initialized with `SciChartSurface.createSingle` (or `SciChart3DSurface.createSingle` for 3D);
+ and via the Builder API with the `createSingle` option.
+
+### Surface Elements and WASM Context disposal
+
+### Deleting a surface
+
+To dispose of a chart and allow the memory it uses to be freed call the delete method on the surface instance.
+Additionally, you can pass a boolean flag to specify if the internal HTML elements should also be destroyed.
+
+```typescript
+sciChartSurface.delete(true);
+```
+
+Upon deletion, a `createSingle` chart also destroys the bound `wasmContext`.
+
+A `multi` chart, on the other hand, won't destroy the context by default.
+This behaviour allows us to avoid context recreation.
+However, it is configurable via the **autoDisposeWasmContext** property that disposes of a `shared wasmContext` after all of the multi-charts bound to it are deleted.
+
+```typescript
+// for 2D charts
+SciChartSurface.autoDisposeWasmContext = true;
+// for 3D charts
+SciChart3DSurface.autoDisposeWasmContext = true;
+```
+
+The **wasmContextDisposeTimeout** property allows one to add a wait time before deleting a wasmContext to check if any new surfaces were instantiated.
+
+```typescript
+// for 2D charts
+SciChartSurface.wasmContextDisposeTimeout = 1000; // value in milliseconds
+// for 3D charts
+SciChart3DSurface.wasmContextDisposeTimeout = 1000; // value in milliseconds
+```
+
+Also, the `shared wasmContext` could be deleted manually with **disposeSharedWasmContext**.
+
+```typescript
+// delete 2D chart context
+SciChartSurface.disposeSharedWasmContext();
+// delete 3D chart context
+SciChart3DSurface.disposeSharedWasmContext();
+```
+
+After the surface and context are destroyed, it is up to the Garbage Collector to clean up the memory.
+(refer to "WASM Memory. Deleting vs Releasing Releasing Memory back to the OS" section)
+For testing purposes, the garbage collection could be forced as described [here](#try-forcing-the-garbage-collection).
+
+A surface when deleted will also delete all of the related **attached** entities such as Renderable Series, Modifiers, Annotations, Providers, etc...
+The detached ones should be deleted manually.
+
+### WASM Memory. Deleting vs Releasing Releasing Memory back to the OS
+
+An important behaviour to understand is that for the memory to be freed the deleted objects should be disposed of by Garbage Collector.
+
+Along with the engine, SciChart creates other internal structures within the `wasmContext`.
+The browser provides a required chunk of memory to accommodate the `wasmContext` heap, but the heap doesn't support shrinking.
+So the WASM memory allocated for some of the chart-related entities would be freed only when the whole wasmContext is disposed.
+
+---
+
+Side note.
+Some objects still could be collected without being explicitly deleted, this could lead to a memory leak.
+Refer to the [Memory Debugging docs](https://www.scichart.com/documentation/js/current/webframe.html#MemoryLeakDebugging.html) and "collectedNotDeleted" objects in the memory debug log output.
+
+---
+
+### Deleting renderable and disposable entities (Series, Annotations, Modifiers, Providers, Axes, SubCharts)
+
+There is a common pitfall when trying to remove entities from a chart.
+It is important to understand the difference between detaching items and deleting them.
+For example:
+
+```typescript
+// removes the series from the surface
+sciChartSurface.renderableSeries.clear();
+
+// removes the series from the surface and deletes the series
+sciChartSurface.renderableSeries.clear(true);
+
+// Or remove and delete the series individually
+sciChartSurface.renderableSeries.asArray().forEach((rs) => {
+ rs.delete();
+});
+
+sciChartSurface.renderableSeries.clear();
+```
+
+Notice, deleting the Renderable Series also deletes the attached Data Series.
+The same principle applies to other collections on a surface.
+
+Most importantly, note the behaviour on Data Series:
+
+```typescript
+// empty the data stored in vectors (xValues, yValues, etc.) and set the size to 0;
+// keeps the reserved capacity and allows to reuse the dataSeries
+dataSeries.clear();
+
+// release the memory and makes the dataSeries unusable
+dataSeries.delete();
+```
+
+### Surface deletion Deletables List
+
+SciChart allows to subscribe arbitrary objects that implement an IDeletable interface (have a "delete" method) to be deleted along with the surface.
+
+```typescript
+sciChartSurface.addDeletable({
+ delete: () => stopAnimation(),
+});
+```
+
+## Memory fragmentation
+
+According to the info provided above and in the previous sections, there arises a problem of _Memory Fragmentation_.
+While the `wasmContext` heap may have free chunks of memory, creating new entities that couldn't fit into the chunks will cause the heap to grow.
+
+The easiest way to hit this problem is to append points to Data Series causing the underlying vectors to resize via reallocation.
+See the Data Series Management section for approaches to deal with the issue.
+
+## Data Series Management
+
+There are some techniques to enhance the memory footprint along with the performance of series rendering.
+
+### Data Series Capacity
+
+To avoid redundant reallocation when appending data to Data Series, the **capacity** property could be set when appropriate.
+
+```typescript
+// create Data Series with initial capacity of 100000 elements
+const dataSeries = new XyDataSeries(wasmContext, { capacity: 100000 });
+```
+
+### Realtime Updates and FIFO
+
+Find at https://www.scichart.com/documentation/js/current/webframe.html#DataSeries_RealtimeUpdates.html
+
+### Reusing Data Series
+
+A single Data Series instance could be used by multiple Renderable Series simultaneously.
+For example, we apply this trick for the `SciChartOverview`.
+
+### Creating a pool of Data Series
+
+As you create a Data Series instance once, it may be more efficient to reuse it rather than create a new one.
+So, in a situation where one needs to remove some renderable Series from the chart and add some other renderable Series,
+it might be better to keep the original `dataSeries` instance by detaching them from the parent renderable series, replacing the values, and attaching them to the new renderable series.
+Or even keeping the original renderable series and just updating the necessary properties.
+
+## Caching
+
+By default SciChart caches axis labels.
+This could be toggled per axis via the **useCache** property on the label provider
+
+```typescript
+xAxis.labelProvider.useCache = false;
+yAxis.labelProvider.useCache = false;
+```
+
+## Debugging Memory usage and leaks
+
+The dev tools provided by browsers are pretty useful for debugging memory leaks,
+however, it may be often unclear what is the origin of the residual objects.
+Sometimes, it even could be the browser's internal constructs.
+
+So to identify the bottleneck of an issue one needs to identify an area that requires analysis.
+Sometimes it could be limitations of a tool such as SciChart, sometimes it could be an incorrect usage of a tool or other issues with the application logic.
+If having suspicions of a possible memory leak in SciChart.JS implementation,
+as an initial investigation step you can use our internal util provided with the library.
+We have an example of [SciChart-related memory debugging process](https://www.scichart.com/documentation/js/current/webframe.html#MemoryLeakDebugging.html)
+
+Below are a few more important tips for proper debugging.
+
+### IDs of deletable objects
+
+Make sure to provide some custom readable and unique IDs to the chart elements (surfaces, axes, renderable series, data series, annotations, modifiers, etc...),
+as those may be used for naming entries in Memory Debug output.
+
+### Try forcing the garbage collection.
+
+The time when the garbage collector disposes of the object is not deterministic,
+so the uncollected objects list may be not empty even after all of the chart-related things were properly deleted.
+
+So to test that there are no hanging references that may cause memory leaks we can force the collection using the browser dev tools.
+
+In Firefox navigate to `about:memory` and use buttons in the `Free memory` section.
+
+In Chromium-based browsers open the `Memory` tab in dev-tools where you'll find an appropriate `Collect Garbage` button.
+Or use the `window.gc()` API by running the Chromium with `--js-flags=--expose-gc`
+
+Sometimes, reloading the page may leave some residual entities on the tab.
+Ideally, perform testing in a freshly opened tab with incognito mode.
+
+### Dev tools may cause memory leaks.
+
+Also note that opened dev-tools could affect the garbage collection, and prevent some references from being collected.
+This is probably due to some buggy behaviour or other internal browser logic.
+
+### Performance efficiency effect on garbage collection
+
+High-performance load off a webpage may affect the garbage collection by blocking the runtime with multiple intensive tasks.
+Thus it is important to be aware of potential bottlenecks while executing JS code.
+Some situations we have faced so far included nonoptimal JS array usage.
+Dev tools and Memory Debug Mode could cause some performance overhead as well.
+
+More info on the subject can be found with the _Major and Minor GC_ topic query.
+
+## Cleanup in framework based components
+
+There are different examples of component implementation for some frameworks.
+The main thing is to call the init and cleanup from the appropriate lifecycle methods,
+and ensure that the init async operation is handled properly.
+
+https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/BoilerPlates
+https://www.npmjs.com/package/scichart-angular
+https://www.npmjs.com/package/scichart-react
+
+Extra hint: The `scichart-react` package also provides the `SciChartMemoryDebugWrapper` component that enables Memory Debug Mode.
+Currently, it only adds a checkbox to toggle the conditional rendering of its children and a button to log the Memory Debug state.
+
+```tsx
+
+
+
+```
diff --git a/Tutorials/MemoryTests/Readme.md b/Tutorials/MemoryTests/Readme.md
new file mode 100644
index 00000000..b00a0dbb
--- /dev/null
+++ b/Tutorials/MemoryTests/Readme.md
@@ -0,0 +1,36 @@
+# Memory Tests
+
+The examples in this folder demonstrates memory-related aspects of SciChart.js functionality.
+They could be used for testing and debugging different SciChart features.
+
+## Understanding the setup and functionality
+
+Make sure to check the related documentation:
+[Memory Best Practices](https://www.scichart.com/documentation/js/current/webframe.html#MemoryBestPractices.html)
+[Memory Leak Debugging](https://www.scichart.com/documentation/js/current/webframe.html#MemoryLeakDebugging.html)
+[Memory Management Cheat Sheet](./MemoryManagementCheatSheet.md)
+
+## Performing debugging
+
+Depending on the use-case select one of the provided examples.
+Follow the instructions in the example and recommendations on memory profiling.
+
+- [Chart Initialization and Cleanup](./ChartInitializationAndCleanup/Readme.md)
+- [Dynamic Data Updates](./DataUpdates/Readme.md)
+- [Dynamic FIFO Data Updates](./FifoSeries/Readme.md)
+
+## Reporting an issue
+
+If you suspect there is a memory related issue in SciChart.js,
+please use one of this examples to verify the problem.
+Or modify them with minimum of necessary changes to reproduce.
+
+Alternatively you can serialize a chart and send the config to us:
+[Serialization and Deserialization of Charts](https://www.scichart.com/documentation/js/current/webframe.html#Serialization%20and%20Deserialization%20of%20Charts.html)
+
+Additionally you can serialize and share the Memory and Performance debug logs.
+
+Then share this example or config with us as well as steps to reproduce and some info such as:
+
+- functional and non functional requirements
+- environment details
diff --git a/Tutorials/Readme.md b/Tutorials/Readme.md
index cfa69bd2..54638a9f 100644
--- a/Tutorials/Readme.md
+++ b/Tutorials/Readme.md
@@ -1,13 +1,14 @@
-# SciChart.js Tutorials
+# SciChart.js Tutorials
We've prepared a number of tutorials for SciChart.js - High Performance Realtime [Javascript Charts](https://scichart.com/javascript-chart-features).
-You can find all written and video tutorials in the **SciChart.js documentation** over at [scichart.com/javascript-chart-documentation](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Setting%20up%20a%20Project%20with%20SciChart.js.html).
+You can find all written and video tutorials in the **SciChart.js documentation** over at [scichart.com/javascript-chart-documentation](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Setting%20up%20a%20Project%20with%20SciChart.js.html).
Many include videos embedded in the page. The source-code for tutorials are found in this repository.
[](https://www.scichart.com/javascript-chart-documentation).
## List of SciChart.js Tutorials
+
### [2D Chart Tutorials (Webpack)](Tutorials/2D_Chart_Tutorials_JavaScript)
The following tutorials use npm, webpack and javascript.:
@@ -31,4 +32,8 @@ We have a handful of tutorials showing you how to use SciChart.js in vanilla HTM
### [3D Chart Tutorials](Tutorials/3D_Chart_Tutorials_JavaScript)
-Coming soon!
\ No newline at end of file
+Coming soon!
+
+### [MemoryTests](Tutorials/MemoryTests)
+
+Provide examples for testing SciChart memory usage