LCJS v8.0.0

Author: Niilo Keinänen

README.md

@@ -80,8 +80,6 @@ The whole chart with contained series, the whole dashboard with contained charts
 * [XY cartesian chart]
 * [Axis]
 * [Axis tick strategies]
-* [Horizontal legend box]
-* [Vertical legend box]
 * [UI position origins]
 * [Solid FillStyle]
 * [RGBA color factory]
@@ -109,13 +107,11 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
 © LightningChart Ltd 2009-2022. All rights reserved.
 
 
-[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/ChartXY.html
-[Axis]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/Axis.html
-[Axis tick strategies]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/AxisTickStrategies.html
-[Horizontal legend box]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/LegendBoxBuilders.html
-[Vertical legend box]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/LegendBoxBuilders.html
-[UI position origins]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UIOrigins.html
-[Solid FillStyle]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/SolidFill.html
-[RGBA color factory]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/functions/ColorRGBA.html
-[Solid LineStyle]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/SolidLine.html
+[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/ChartXY.html
+[Axis]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/Axis.html
+[Axis tick strategies]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/AxisTickStrategies.html
+[UI position origins]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UIOrigins.html
+[Solid FillStyle]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/SolidFill.html
+[RGBA color factory]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/functions/ColorRGBA.html
+[Solid LineStyle]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/SolidLine.html
 

package.json

@@ -17,8 +17,8 @@
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
-    "@lightningchart/lcjs": "^7.1.0",
-    "@lightningchart/xydata": "^1.4.0"
+    "@lightningchart/lcjs": "^8.0.0",
+    "@lightningchart/xydata": "^1.5.0"
   },
   "lightningChart": {
     "eID": "0502"

src/index.js

@@ -8,7 +8,7 @@ const lcjs = require('@lightningchart/lcjs')
 const xydata = require('@lightningchart/xydata')
 
 // Extract required parts from LightningChartJS.
-const { lightningChart, AxisTickStrategies, LegendBoxBuilders, emptyLine, SolidFill, SolidLine, Themes } = lcjs
+const { lightningChart, AxisTickStrategies, emptyLine, SolidFill, SolidLine, Themes } = lcjs
 
 // Import data-generator from 'xydata'-library.
 const { createOHLCGenerator, createProgressiveTraceGenerator } = xydata
@@ -50,15 +50,6 @@ chartOHLC
 // height of the row becomes 2/3 of the whole view (default value for row height / column width is 1)
 db.setRowHeight(0, 2)
 
-// Create a LegendBox for Candle-Stick and Bollinger Band
-const legendBoxOHLC = chartOHLC
-    .addLegendBox(LegendBoxBuilders.VerticalLegendBox)
-    // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
-    .setAutoDispose({
-        type: 'max-width',
-        maxWidth: 0.3,
-    })
-
 // Define function which sets Y axis intervals nicely.
 let setViewNicely
 
@@ -143,14 +134,6 @@ const chartVolume = db.createChartXY({
 chartVolume.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin))
 // Modify Chart.
 chartVolume.setTitle('Volume')
-// Create a LegendBox as part of the chart.
-const legendBoxVolume = chartVolume
-    .addLegendBox(LegendBoxBuilders.VerticalLegendBox)
-    // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
-    .setAutoDispose({
-        type: 'max-width',
-        maxWidth: 0.3,
-    })
 
 // Create Y-axis for series (view is set manually).
 const volumeAxisY = chartVolume
@@ -179,16 +162,12 @@ createProgressiveTraceGenerator()
         })),
     )
     .then((data) => {
-        volume.add(data)
+        volume.appendJSON(data)
         setViewNicely()
     })
 
 //#endregion
 
-// Add series to LegendBox.
-legendBoxOHLC.add(chartOHLC)
-legendBoxVolume.add(chartVolume)
-
 setViewNicely = () => {
     const yBoundsStock = { min: areaRange.getYMin(), max: areaRange.getYMax(), range: areaRange.getYMax() - areaRange.getYMin() }
     const yBoundsVolume = { min: volume.getYMin(), max: volume.getYMax(), range: volume.getYMax() - volume.getYMin() }