scichart 3.0.0-beta.263 → 3.0.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
File without changes
File without changes
@@ -124,8 +124,12 @@ export declare class WebGlRenderContext2D implements IRenderContext2D {
124
124
  */
125
125
  drawRect(rect: Rect, viewRect: Rect, strokePen?: IPen2D, fillBrush?: IBrush2D): void;
126
126
  printBlendMode(): void;
127
- /** Get a native font. Pass advanced: true if you are planning to rotate the text */
128
- getFont(labelStyle: TTextStyle, advanced?: boolean, transformed?: boolean): SCRTFont;
127
+ /**
128
+ * Get a native font. Fonts are cached and shared within webassembly so there is no need to cache them in JS.
129
+ * Set advanced: true if you are planning to rotate or scale the text.
130
+ * Set drawEarly: true if you are planning to call font.End() early. Otherwise all native text will be drawn at the end of the render cycle.
131
+ */
132
+ getFont(labelStyle: TTextStyle, advanced?: boolean, drawEarly?: boolean): SCRTFont;
129
133
  /** End all fonts, causing text to be drawn */
130
134
  endFonts(force?: boolean): void;
131
135
  }
@@ -291,12 +291,16 @@ var WebGlRenderContext2D = /** @class */ (function () {
291
291
  throw new Error("Unhandled blendmode ");
292
292
  }
293
293
  };
294
- /** Get a native font. Pass advanced: true if you are planning to rotate the text */
295
- WebGlRenderContext2D.prototype.getFont = function (labelStyle, advanced, transformed) {
296
- var _a;
294
+ /**
295
+ * Get a native font. Fonts are cached and shared within webassembly so there is no need to cache them in JS.
296
+ * Set advanced: true if you are planning to rotate or scale the text.
297
+ * Set drawEarly: true if you are planning to call font.End() early. Otherwise all native text will be drawn at the end of the render cycle.
298
+ */
299
+ WebGlRenderContext2D.prototype.getFont = function (labelStyle, advanced, drawEarly) {
300
+ var _this = this;
297
301
  if (advanced === void 0) { advanced = false; }
298
- if (transformed === void 0) { transformed = false; }
299
- var fontKey = (0, NativeObject_1.getFontKey)(this.webAssemblyContext, labelStyle, advanced, transformed);
302
+ if (drawEarly === void 0) { drawEarly = false; }
303
+ var fontKey = (0, NativeObject_1.getFontKey)(this.webAssemblyContext, labelStyle, advanced, drawEarly);
300
304
  var nativeContext = this.getNativeContext();
301
305
  var nativeFont = nativeContext.AquireFont(fontKey);
302
306
  if (!nativeFont) {
@@ -309,10 +313,15 @@ var WebGlRenderContext2D = /** @class */ (function () {
309
313
  }
310
314
  var currentFontName = nativeFont.GetFaceName();
311
315
  if (currentFontName === "SCRT_Loading") {
312
- this.webAssemblyContext.TSRRequestCanvasDraw((_a = this.canvasId) !== null && _a !== void 0 ? _a : "undefinedCanvasId");
316
+ setTimeout(function () { var _a; return _this.webAssemblyContext.TSRRequestCanvasDraw((_a = _this.canvasId) !== null && _a !== void 0 ? _a : "undefinedCanvasId"); }, 100);
313
317
  }
314
318
  else if (currentFontName !== fontKey.m_strName) {
315
- console.warn("Font ".concat(fontKey.m_strName, " could not be found on the server. Falling back to Arial"));
319
+ // @ts-ignore
320
+ if (!fontKey.warned) {
321
+ console.warn("Font ".concat(fontKey.m_strName, " could not be found on the server and has not been registered. Falling back to Arial.\n Use await scichartSurface.registerFont if you need to load the font from a remote url"));
322
+ // @ts-ignore
323
+ fontKey.warned = true;
324
+ }
316
325
  }
317
326
  return nativeFont;
318
327
  };
@@ -41,6 +41,8 @@ var BottomAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
41
41
  chartLayoutState.bottomInnerAreaSize = Math.max(chartLayoutState.bottomInnerAreaSize, requiredSize);
42
42
  };
43
43
  BottomAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
44
+ // Set axisLength to default value which is seriesViewRect.width
45
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
44
46
  if (axes.length === 0) {
45
47
  return;
46
48
  }
@@ -43,6 +43,8 @@ var BottomAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
43
43
  chartLayoutState.bottomOuterAreaSize = Math.max(chartLayoutState.bottomOuterAreaSize, requiredSize);
44
44
  };
45
45
  BottomAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
46
+ // Set axisLength to default value which is seriesViewRect.width
47
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
46
48
  this.layoutAxesFromTopToBottom(left, top, right, bottom, axes);
47
49
  };
48
50
  return BottomAlignedOuterAxisLayoutStrategy;
@@ -170,37 +170,39 @@ var LayoutManager = /** @class */ (function () {
170
170
  var _a = this.axesGroupedByLayoutStrategy, topInnerAxes = _a.topInnerAxes, bottomInnerAxes = _a.bottomInnerAxes, leftInnerAxes = _a.leftInnerAxes, rightInnerAxes = _a.rightInnerAxes, topOuterAxes = _a.topOuterAxes, bottomOuterAxes = _a.bottomOuterAxes, leftOuterAxes = _a.leftOuterAxes, rightOuterAxes = _a.rightOuterAxes;
171
171
  var groupAxes = function (axes) {
172
172
  axes.forEach(function (axis) {
173
- var axisAlignment = axis.axisAlignment, isInnerAxis = axis.isInnerAxis;
174
- if (isInnerAxis) {
175
- switch (axisAlignment) {
176
- case AxisAlignment_1.EAxisAlignment.Top:
177
- topInnerAxes.push(axis);
178
- break;
179
- case AxisAlignment_1.EAxisAlignment.Bottom:
180
- bottomInnerAxes.push(axis);
181
- break;
182
- case AxisAlignment_1.EAxisAlignment.Left:
183
- leftInnerAxes.push(axis);
184
- break;
185
- case AxisAlignment_1.EAxisAlignment.Right:
186
- rightInnerAxes.push(axis);
187
- break;
173
+ var axisAlignment = axis.axisAlignment, isInnerAxis = axis.isInnerAxis, isVisible = axis.isVisible;
174
+ if (isVisible) {
175
+ if (isInnerAxis) {
176
+ switch (axisAlignment) {
177
+ case AxisAlignment_1.EAxisAlignment.Top:
178
+ topInnerAxes.push(axis);
179
+ break;
180
+ case AxisAlignment_1.EAxisAlignment.Bottom:
181
+ bottomInnerAxes.push(axis);
182
+ break;
183
+ case AxisAlignment_1.EAxisAlignment.Left:
184
+ leftInnerAxes.push(axis);
185
+ break;
186
+ case AxisAlignment_1.EAxisAlignment.Right:
187
+ rightInnerAxes.push(axis);
188
+ break;
189
+ }
188
190
  }
189
- }
190
- else {
191
- switch (axisAlignment) {
192
- case AxisAlignment_1.EAxisAlignment.Top:
193
- topOuterAxes.push(axis);
194
- break;
195
- case AxisAlignment_1.EAxisAlignment.Bottom:
196
- bottomOuterAxes.push(axis);
197
- break;
198
- case AxisAlignment_1.EAxisAlignment.Left:
199
- leftOuterAxes.push(axis);
200
- break;
201
- case AxisAlignment_1.EAxisAlignment.Right:
202
- rightOuterAxes.push(axis);
203
- break;
191
+ else {
192
+ switch (axisAlignment) {
193
+ case AxisAlignment_1.EAxisAlignment.Top:
194
+ topOuterAxes.push(axis);
195
+ break;
196
+ case AxisAlignment_1.EAxisAlignment.Bottom:
197
+ bottomOuterAxes.push(axis);
198
+ break;
199
+ case AxisAlignment_1.EAxisAlignment.Left:
200
+ leftOuterAxes.push(axis);
201
+ break;
202
+ case AxisAlignment_1.EAxisAlignment.Right:
203
+ rightOuterAxes.push(axis);
204
+ break;
205
+ }
204
206
  }
205
207
  }
206
208
  });
@@ -41,6 +41,8 @@ var LeftAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
41
41
  chartLayoutState.leftInnerAreaSize = Math.max(chartLayoutState.leftInnerAreaSize, requiredSize);
42
42
  };
43
43
  LeftAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
44
+ // Set axisLength to default value which is seriesViewRect.height
45
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
44
46
  if (axes.length === 0) {
45
47
  return;
46
48
  }
@@ -43,6 +43,8 @@ var LeftAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
43
43
  chartLayoutState.leftOuterAreaSize = Math.max(chartLayoutState.leftOuterAreaSize, requiredSize);
44
44
  };
45
45
  LeftAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
46
+ // Set axisLength to default value which is seriesViewRect.height
47
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
46
48
  this.layoutAxesFromRightToLeft(left, top, right, bottom, axes);
47
49
  };
48
50
  return LeftAlignedOuterAxisLayoutStrategy;
@@ -41,6 +41,8 @@ var RightAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
41
41
  chartLayoutState.rightInnerAreaSize = Math.max(chartLayoutState.rightInnerAreaSize, requiredSize);
42
42
  };
43
43
  RightAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
44
+ // Set axisLength to default value which is seriesViewRect.height
45
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
44
46
  if (axes.length === 0) {
45
47
  return;
46
48
  }
@@ -43,6 +43,8 @@ var RightAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
43
43
  chartLayoutState.rightOuterAreaSize = Math.max(chartLayoutState.rightOuterAreaSize, requiredSize);
44
44
  };
45
45
  RightAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
46
+ // Set axisLength to default value which is seriesViewRect.height
47
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
46
48
  this.layoutAxesFromLeftToRight(left, top, right, bottom, axes);
47
49
  };
48
50
  return RightAlignedOuterAxisLayoutStrategy;
@@ -41,6 +41,8 @@ var TopAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
41
41
  chartLayoutState.topInnerAreaSize = Math.max(chartLayoutState.topInnerAreaSize, requiredSize);
42
42
  };
43
43
  TopAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
44
+ // Set axisLength to default value which is seriesViewRect.width
45
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
44
46
  if (axes.length === 0) {
45
47
  return;
46
48
  }
@@ -43,6 +43,8 @@ var TopAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
43
43
  chartLayoutState.topOuterAreaSize = Math.max(chartLayoutState.topOuterAreaSize, requiredSize);
44
44
  };
45
45
  TopAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
46
+ // Set axisLength to default value which is seriesViewRect.width
47
+ axes.forEach(function (axis) { return (axis.axisLength = undefined); });
46
48
  this.layoutAxesFromBottomToTop(left, top, right, bottom, axes);
47
49
  };
48
50
  return TopAlignedOuterAxisLayoutStrategy;
@@ -1,6 +1,12 @@
1
1
  import { IDeletable } from "../../../Core/IDeletable";
2
2
  import { SCRTColorVertex, SCRTFontKey, SCRTRectVertex, TSciChart, TSRTextBounds, TSRVector4, VectorColorVertex, VectorRectVertex } from "../../../types/TSciChart";
3
3
  import { TTextStyle } from "../Axis/AxisCore";
4
+ export declare class FontKey implements IDeletable {
5
+ readonly firstLoadTime: number;
6
+ readonly nativeKey: SCRTFontKey;
7
+ constructor(nativeKey: SCRTFontKey);
8
+ delete(): void;
9
+ }
4
10
  export declare const freeCache: (wasmContext: TSciChart) => IDeletable;
5
11
  /**
6
12
  * Returns an empty vector of Rectangles
@@ -1,8 +1,20 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getAllFontKeys = exports.getFontKey = exports.getVector4 = exports.getNativeRect = exports.getTextBounds = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = void 0;
3
+ exports.getAllFontKeys = exports.getFontKey = exports.getVector4 = exports.getNativeRect = exports.getTextBounds = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = exports.FontKey = void 0;
4
4
  var Deleter_1 = require("../../../Core/Deleter");
5
5
  var LabelCache_1 = require("../Axis/LabelProvider/LabelCache");
6
+ var SciChartDefaults_1 = require("../SciChartDefaults");
7
+ var FontKey = /** @class */ (function () {
8
+ function FontKey(nativeKey) {
9
+ this.firstLoadTime = Date.now();
10
+ this.nativeKey = nativeKey;
11
+ }
12
+ FontKey.prototype.delete = function () {
13
+ (0, Deleter_1.deleteSafe)(this.nativeKey);
14
+ };
15
+ return FontKey;
16
+ }());
17
+ exports.FontKey = FontKey;
6
18
  var objectCache = new Map();
7
19
  var getCache = function (wasmContext) {
8
20
  var _a, _b;
@@ -154,14 +166,19 @@ var getFontKey = function (webAssemblyContext, labelStyle, advanced, transformed
154
166
  };
155
167
  var styleId = LabelCache_1.labelCache.getStyleId(newStyle);
156
168
  if (!keyCache.has(styleId)) {
157
- var fontKey = new webAssemblyContext.SCRTFontKey(labelStyle.fontFamily, labelStyle.fontSize, transformed, advanced);
169
+ var fontKey = new FontKey(new webAssemblyContext.SCRTFontKey(labelStyle.fontFamily, labelStyle.fontSize, transformed, advanced));
158
170
  keyCache.set(styleId, fontKey);
159
171
  }
160
- return keyCache.get(styleId);
172
+ var key = keyCache.get(styleId);
173
+ var timeSinceLoad = Date.now() - key.firstLoadTime;
174
+ if (timeSinceLoad > SciChartDefaults_1.SciChartDefaults.nativeFontTimeout) {
175
+ key.nativeKey.m_reload = false;
176
+ }
177
+ return key.nativeKey;
161
178
  };
162
179
  exports.getFontKey = getFontKey;
163
180
  var getAllFontKeys = function (webAssemblyContext) {
164
181
  var cache = getCache(webAssemblyContext);
165
- return Array.from(cache.keyCache.values());
182
+ return Array.from(cache.keyCache.values()).map(function (k) { return k.nativeKey; });
166
183
  };
167
184
  exports.getAllFontKeys = getAllFontKeys;
@@ -20,4 +20,8 @@ export declare class SciChartDefaults {
20
20
  * Experimental - set true to use native text for axes. Not all text features currently supported
21
21
  */
22
22
  static useNativeText: boolean;
23
+ /**
24
+ * Time in ms to retry loading a native font. If you need to load a large font over a potentially slow connection await sciChartSurface.registerFont
25
+ */
26
+ static nativeFontTimeout: number;
23
27
  }
@@ -25,6 +25,10 @@ var SciChartDefaults = /** @class */ (function () {
25
25
  * Experimental - set true to use native text for axes. Not all text features currently supported
26
26
  */
27
27
  SciChartDefaults.useNativeText = false;
28
+ /**
29
+ * Time in ms to retry loading a native font. If you need to load a large font over a potentially slow connection await sciChartSurface.registerFont
30
+ */
31
+ SciChartDefaults.nativeFontTimeout = 2000;
28
32
  return SciChartDefaults;
29
33
  }());
30
34
  exports.SciChartDefaults = SciChartDefaults;
@@ -1,4 +1,4 @@
1
1
  import { TSciChart } from "../types/TSciChart";
2
2
  import { TSciChart3D } from "../types/TSciChart3D";
3
- export declare const libraryVersion = "3.0.0-beta.263";
3
+ export declare const libraryVersion = "3.0.269";
4
4
  export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;
@@ -1,10 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.checkBuildStamp = exports.libraryVersion = void 0;
4
- var buildStamp = "2023-01-13T00:00:00";
4
+ var buildStamp = "2023-01-18T00:00:00";
5
5
  var result;
6
6
  // tslint:disable-next-line:no-var-requires
7
- exports.libraryVersion = "3.0.0-beta.263";
7
+ exports.libraryVersion = "3.0.269";
8
8
  var checkBuildStamp = function (wasmContext) {
9
9
  if (result !== undefined)
10
10
  return result;
package/README.md CHANGED
@@ -7,7 +7,9 @@ which WebGL and WebAssembly to achieve incredible real-time and big-data perform
7
7
  > **perfect for scientific, financial, medical, engineering and enterprise applications**,
8
8
  > apps with demanding performance requirements or complex and mission critical charting.
9
9
 
10
- [![SciChart.js 2D 3D hart types](https://www.scichart.com/wp-content/uploads/2022/12/sc-home-collage.png)](https://www.scichart.com/javascript-chart-features)
10
+ [![SciChart.js 2D 3D chart types](https://www.scichart.com/wp-content/uploads/2022/12/sc-home-collage.png)](https://www.scichart.com/javascript-chart-features)
11
+
12
+ SciChart.JS v3 is released! Check out [what's new](https://www.scichart.com/scichart-js-v3-0-released). There should not be any breaking changes.
11
13
 
12
14
  ## License
13
15
 
@@ -18,7 +20,7 @@ which WebGL and WebAssembly to achieve incredible real-time and big-data perform
18
20
  > - [Read about our **license terms** here](https://www.scichart.com/scichart-eula)
19
21
  > - [**Start a trial** by following steps here](https://scichart.com/getting-started/scichart-javascript)
20
22
  > - [**Purchase commercial licenses** here](https://store.scichart.com)
21
- > - Academic usage, universities and schools qualify for a free for a free license. Read more about this [here](https://www.scichart.com/educational-discount-programme).
23
+ > - Academic usage, universities and schools qualify for a free license. Read more about this [here](https://www.scichart.com/educational-discount-programme).
22
24
 
23
25
  ## Demo Application
24
26
 
@@ -66,66 +68,66 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
66
68
 
67
69
  1. **Install SciChart.js**
68
70
 
69
- ```shell
70
- npm i scichart
71
- ```
71
+ ```shell
72
+ npm i scichart
73
+ ```
72
74
 
73
- 2 **Create a simple chart** by putting this into `src/index.js` file
75
+ 2. **Create a simple chart** by putting this into `src/index.js` file
74
76
 
75
- ```javascript
76
- import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
77
- import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
78
- import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
79
- import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
77
+ ```javascript
78
+ import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
79
+ import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
80
+ import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
81
+ import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
80
82
 
81
- // Call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
82
- // Alternative methods for serving wasm from webpack or offline are available on our website
83
- SciChartSurface.useWasmFromCDN();
83
+ // Call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
84
+ // Alternative methods for serving wasm from webpack or offline are available on our website
85
+ SciChartSurface.useWasmFromCDN();
84
86
 
85
- // Apply your licese key once before startup
86
- SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
87
-
88
- async function initSciChart() {
89
- // Create the SciChartSurface in the div 'scichart-root'
90
- const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
91
-
92
- // Create an X,Y Axis and add to the chart
93
- sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
94
- sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
95
-
96
- // Create a line series with some data
97
- const dataSeries = new XyDataSeries(wasmContext, {
98
- xValues: [1, 2, 5, 8, 10],
99
- yValues: [3, 1, 7, 5, 8]
100
- });
101
- const renderableSeries = new FastLineRenderableSeries(wasmContext, {
102
- dataSeries,
103
- stroke: "steelblue"
104
- });
105
- sciChartSurface.renderableSeries.add(renderableSeries);
106
- }
107
-
108
- initSciChart();
109
- ```
110
-
111
- 3 **Create src/index.html file**
112
-
113
- ```html
114
- <html lang="en-us">
115
- <head>
116
- <meta charset="utf-8" />
117
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
118
- <title>SciChart.js Tutorial 1</title>
119
- <script async type="text/javascript" src="bundle.js"></script>
120
- </head>
121
- <body>
122
- <!-- the Div where the SciChartSurface will reside -->
123
- <div id="scichart-root" style="width: 800px; height: 600px;"></div>
124
- </body>
125
- </html>
126
- ```
127
-
128
- 4 **Run it `npm start`**. As a result you will see a simple line chart.
87
+ // Apply your licese key once before startup
88
+ SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
89
+
90
+ async function initSciChart() {
91
+ // Create the SciChartSurface in the div 'scichart-root'
92
+ const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
93
+
94
+ // Create an X,Y Axis and add to the chart
95
+ sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
96
+ sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
97
+
98
+ // Create a line series with some data
99
+ const dataSeries = new XyDataSeries(wasmContext, {
100
+ xValues: [1, 2, 5, 8, 10],
101
+ yValues: [3, 1, 7, 5, 8]
102
+ });
103
+ const renderableSeries = new FastLineRenderableSeries(wasmContext, {
104
+ dataSeries,
105
+ stroke: "steelblue"
106
+ });
107
+ sciChartSurface.renderableSeries.add(renderableSeries);
108
+ }
109
+
110
+ initSciChart();
111
+ ```
112
+
113
+ 3. **Create src/index.html file**
114
+
115
+ ```html
116
+ <html lang="en-us">
117
+ <head>
118
+ <meta charset="utf-8" />
119
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
120
+ <title>SciChart.js Tutorial 1</title>
121
+ <script async type="text/javascript" src="bundle.js"></script>
122
+ </head>
123
+ <body>
124
+ <!-- the Div where the SciChartSurface will reside -->
125
+ <div id="scichart-root" style="width: 800px; height: 600px;"></div>
126
+ </body>
127
+ </html>
128
+ ```
129
+
130
+ 4. **Run it `npm start`**. As a result you will see a simple line chart.
129
131
 
130
132
  > Further reading:
131
133
  >
@@ -171,6 +173,6 @@ Check out what's new in SciChart.js at the below pages:
171
173
  - [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
172
174
  - [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
173
175
  - [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
174
- - SciChart.js v3.0 Alpha What's New - Coming Soon!
176
+ - [What's New in SciChart.js v3.0](https://www.scichart.com/scichart-js-v3-0-released)
175
177
 
176
178
  We release often and if you want to report a bug, request a feature or give general feedback [contact us](https://scichart.com/contact-us)!