LCJS v8.0.0

Author: Niilo Keinänen

README.md

@@ -36,8 +36,6 @@ The spectrogram chart contains 1024 x 1024 = ~1 million data points.
 * [Paletted Fill]
 * [LUT]
 * [Empty line style]
-* [Legend Box]
-* [Legend Box builders]
 
 
 ## Support
@@ -61,14 +59,12 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
 © LightningChart Ltd 2009-2022. All rights reserved.
 
 
-[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/Dashboard.html
-[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/ChartXY.html
-[Heatmap Grid Series Intensity]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/HeatmapGridSeriesIntensityValues.html
-[Line Series]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/LineSeries.html
-[Axis scroll strategies]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/AxisScrollStrategies.html
-[Paletted Fill]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/PalettedFill.html
-[LUT]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/LUT.html
-[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/emptyLine.html
-[Legend Box]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/Chart.html#addLegendBox
-[Legend Box builders]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/LegendBoxBuilders.html
+[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/Dashboard.html
+[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/ChartXY.html
+[Heatmap Grid Series Intensity]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/HeatmapGridSeriesIntensityValues.html
+[Line Series]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/LineSeries.html
+[Axis scroll strategies]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/AxisScrollStrategies.html
+[Paletted Fill]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/PalettedFill.html
+[LUT]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/LUT.html
+[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/emptyLine.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": "0805"

spectrogramProjection-cyberSpace.png

@@ -12,10 +12,10 @@ const {
     emptyFill,
     emptyLine,
     AxisScrollStrategies,
-    LegendBoxBuilders,
     synchronizeAxisIntervals,
     regularColorSteps,
     Themes,
+    LegendPosition,
 } = lcjs
 
 const { createSpectrumDataGenerator } = require('@lightningchart/xydata')
@@ -43,6 +43,9 @@ const chartSpectrogram = dashboard
     .createChartXY({
         columnIndex: 0,
         rowIndex: 0,
+        legend: { 
+            position: LegendPosition.TopCenter
+        },
     })
     .setTitle('2D Spectrogram with X & Y projection on mouse hover')
 
@@ -64,23 +67,15 @@ const seriesSpectrogram = chartSpectrogram
         }),
     )
 
-const legend = chartSpectrogram
-    .addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
-    // 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.8,
-    })
-    .add(chartSpectrogram)
-
 const chartProjectionY = dashboard
     .createChartXY({
         columnIndex: 1,
         rowIndex: 0,
+        legend: { visible: false },
     })
     .setTitleFillStyle(emptyFill)
     // NOTE: Hardcoded alignment with Spectrogram chart.
-    .setPadding({ top: 44 })
+    .setPadding({ top: 110 })
     .setUserInteractions(undefined)
 
 chartProjectionY.getDefaultAxisY().setScrollStrategy(undefined)
@@ -90,17 +85,13 @@ synchronizeAxisIntervals(chartSpectrogram.getDefaultAxisY(), chartProjectionY.ge
 
 chartProjectionY.getDefaultAxisX().setScrollStrategy(AxisScrollStrategies.expansion).setInterval({ start: 0, end: 1, stopAxisAfter: false })
 
-const seriesProjectionY = chartProjectionY
-    .addPointLineAreaSeries({
-        dataPattern: 'ProgressiveY',
-    })
-    .setName('Projection (Y)')
-    .setAreaFillStyle(emptyFill)
+const seriesProjectionY = chartProjectionY.addLineSeries({}).setName('Projection (Y)')
 
 const chartProjectionX = dashboard
     .createChartXY({
         columnIndex: 0,
         rowIndex: 1,
+        legend: { visible: false },
     })
     .setTitleFillStyle(emptyFill)
     .setUserInteractions(undefined)
@@ -110,12 +101,7 @@ chartProjectionX.getDefaultAxisX().setScrollStrategy(undefined)
 synchronizeAxisIntervals(chartSpectrogram.getDefaultAxisX(), chartProjectionX.getDefaultAxisX())
 
 chartProjectionX.getDefaultAxisY().setScrollStrategy(AxisScrollStrategies.expansion).setInterval({ start: 0, end: 1, stopAxisAfter: false })
-const seriesProjectionX = chartProjectionX
-    .addPointLineAreaSeries({
-        dataPattern: 'ProgressiveX',
-    })
-    .setName('Projection (X)')
-    .setAreaFillStyle(emptyFill)
+const seriesProjectionX = chartProjectionX.addLineSeries({}).setName('Projection (X)')
 
 // Align charts nicely.
 chartSpectrogram.getDefaultAxisY().setThickness(50)
@@ -157,12 +143,12 @@ createSpectrumDataGenerator()
             // Update projection series data.
             seriesProjectionY.clear()
             if (projectionY) {
-                seriesProjectionY.add(projectionY)
+                seriesProjectionY.appendJSON(projectionY)
             }
 
             seriesProjectionX.clear()
             if (projectionX) {
-                seriesProjectionX.add(projectionX)
+                seriesProjectionX.appendJSON(projectionX)
             }
         }