LightningChart JS v7.0.1

Released: Feb 5, 2025

v7.0.1 での更新項目

機能

  • Changes to built-in interactions:
    • Added new intuitive interactions for a better development experience:
      • A double-click zoom-to-fit interaction.
      • Automatically built-in smart interaction schemes selected based on chart structure.
      • Better touchscreen interactions.
      • More convenient interactions on scrolling axis applications.
  • Introduced setUserInteractions:
    • Added a new API allowing a more detailed interaction behavior configuration:
      • Choose which axes are affected by interactions (X, Y, or both).
        • Enable interactions based on Ctrl, Shift, or Alt key combinations.
        • Adjust pan and zoom sensitivity based on your application requirements.
        • Explore new interactions like Pagination, Zoom Restore, Keyboard controls, and 3D axis modifications.
  • Changes to custom interactions:
    • Simplified API - Now follows the familiar addEventListener/removeEventListener syntax for easier implementation.
    • Consistent cross-device interactions - Previous mouse, touch, and drag interactions are now consistent across all devices.
    • Right-click support - Added contextmenu event handling for improved interaction options.
    • Expanded interaction tracking - Now includes chart titles, axis titles, map regions, and more.
    • Drag and drop support - Enables moving elements within the chart or integrating external HTML elements, such as swapping axes or adding data sources.
  • Text Series:
    • A new, more efficient API for displaying text inside ChartXY improves performance and usability. It supports viewport clipping and offers convenient methods for adjusting text sizes and boundaries, making it a suitable replacement for chart.addUIElement() in many cases.
  • ChartXY layout change event:
    • A new convenience API offers detailed insights into the structure, layout, and positions of ChartXY elements. It is particularly useful for static aspect ratio applications or aligning UI elements with chart components like axes.
  • Other product features:
    • A built-in .OBJ 3D model parser is now included, ensuring better compatibility where open-source tools fall short. This update also introduces material support for per-part coloring and shading, enhancing visual accuracy and customization.
    • Stacked Bar Charts now support sum label functionality, allowing users to choose which labels to display - individual subcategory values, the total sum of all subcategories, or both.
  • Visual quality improvements:
    • Rounded corners in UI elements - Legends, cursors, rectangle series, bar charts, and treemap charts now feature rounded corners for a more modern and visually appealing design.
    • Improved cursor readability - A separate header background has been added to cursors, making built-in cursor information clearer and easier to read.
    • Cursor color adapts to data points - When using per-data-point colors, the cursor will now display the color of the specific data point it is hovering over, improving visual context.
  • Axis tick layout and display improvements:
    • Fewer displayed ticks for clarity - The number of ticks has been reduced to minimize visual clutter while maintaining readability.
    • Improved small-axis tick display - Previously, very small axes sometimes showed only one unreadable tick; now, the system optimizes tick placement for better visibility.
    • Tick labels stay within chart bounds - By default, tick labels are now constrained within the chart container to prevent them from being cut off in compact chart layouts.
    • Simplified tick label colors - Built-in themes now use a single uniform color for tick labels instead of separate dimmer/brighter variations, creating a cleaner look.
  • Improved bar chart label fitting and added text shadows:
    • Improved label fitting - The previous algorithm was overly conservative, limiting the number of displayed labels. Now, more labels can be shown without causing overlaps.
    • Enhanced text readability - Subtle text shadows have been added to various chart types, making labels clearer and easier to read.
  • Added new chart examples:
    • JavaScript Time Series Annotation Chart
    • JavaScript Racing Dashboard
    • JavaScript Multi Channel Layout Dashboard
    • JavaScript Real-Time Multi Chart Dashboard
    • JavaScript Multi-Chart Canvas
  • Other improvements:
    • Solve nearest from axis coordinate: A new signature for PointLineAreaSeries.solveNearest now allows finding the nearest data point based on an axis coordinate, whereas previously, it only supported solving from a client coordinate.
    • Heatmap and Surface series improvements: XY Heatmap series now support attachment to high-precision axes, making time-series heatmap use cases more convenient by allowing direct use of UTC timestamps as heatmap coordinates. Additionally, the invalidateValues and getSampleCount methods have been added to 3D scrolling surface series, aligning them with similar methods in 2D scrolling heatmap series. This makes switching between 2D and 3D visualizations seamless and significantly enhances the usability of 3D surface series in streaming applications.
  • Note:
    • LightningChart JS 7.0 is a backward incompatible version release. This means some previous API syntaxes have changed and may require users to change their application code when upgrading. For more information, consult the migration guide.

Detailed Updates

  • Added rounded corners. Enabled by default.
    • Reverting back to non-rounded corners can be done by setting Theme.legendBorderRadius / Theme.cursorResultTableBorderRadius to undefined.
  • Added TextSeries.
    • New powerful and more convenient feature for displaying text objects inside ChartXY.
    • Compared to old approach of using UI elements, it is more performant, supports clipping text outside axis view and exposes handy methods for interacting with text boundaries and size.
  • Added text shadows (beta).
    • Improved text readability by displaying a different colored shadow under it.
    • For dark built-in Themes enabled by default. Can be disabled with disableTextShadows.
  • Added high precision axis support to XY heatmap series.
    • This makes using heatmaps in time series applications that require zooming up to hours, minutes, seconds or lower significantly easier.
  • Added new PointLineAreaSeries.solveNearest signature.
    • Allows solving nearest data point from an axis coordinate, rather than client coordinate.
  • Added ability to style cursor row backgrounds separately to highlight headers or other rows.
    • Can be used via default cursor formatters or by using rowFillStyle property from ResultTableCellContent.
  • Added ability for cursors to display the color of pointed data point even in dynamically colored applications (such as heatmaps, color look up, etc.).
    • Can be used via default cursor formatters or with useCursorDataPointColor.
  • Added SurfaceScrollingGridSeries3D.invalidateValues, getSampleCount.
    • Equivalent API that was previously introduced for 2D heatmap series to be used in time-series applications.
  • Added ChartXYLayoutChangedEvent, ChartXY.getLayout.
    • These are new function concepts aimed to help with static aspect ratio apps and other use cases that require knowing the dimensions of ChartXY axis sizes, viewport sizes, etc.
    • Released as @beta - the APIs might change based on user feedback.
  • Added MeshModel3D.setModelFromObj.
    • Built-in OBJ parsing was implemented due to issues of open source alternatives not loading many files properly.
    • Compared to before also supports automatic normal calculation if missing from source.
  • Added undefined parameter option to Axis.setIntervalRestrictions for removing any previously added restriction.
  • Added Axis.setHighlightOnHover, Axis.getHighlightOnHover.
  • Added couple new experimental scroll strategy options.
    • AxisScrollStrategies.fittingStart, fittingEnd, nextPowerOf10.
  • Added ability to control text font and fillstyle even when supplying a Series or other chart component to cursor result table content. This was previously not possible.
  • Added Axis.isX, isY.
    • Simple convenience flags for end user utilization.
  • Added MeshModel3D.setModelMaterial.
    • Allows reading .mtl (material) files for per-part coloring and shading.
  • Added new "stacked sum label" functionality to BarChart (stacked variant).
    • Enabled by default. Shows the sum of all subcategory values of a category.
    • Please see migration guide if you want to restore previous behavior.
  • Added PolarAxisRadial.setMarginAfterTicks.

Changed

  • ChartXY axis by default sets interval restriction to prevent zooming outside attached data.
    • Can be reverted using Axis.setIntervalRestrictions(undefined).
    • This behavior is also automatically disabled if axis interval is explicitly configured in application code.
  • Reworked all user interaction APIs.
  • Reworked all Event APIs.
  • ChartXY axes now automatically ensure that their tick labels don't leak outside the axis bounds (for example, outside chart render area or inside other stacked axes).
    • Previous behavior can be restored with Axis.setKeepTickLabelsInAxisBounds.
    • This change makes it easier to fit charts into small containers without having to be afraid of labels cutting off. For this reason, the default right padding of ChartXY has been reduced from 24 to 15 pixels.
  • Various improvements to built-in tick placement behavior.
    • To prevent situations where there is only 1 tick visible.
    • To prevent situations where there are too many ticks visible, resulting in cluttered look.
    • Improved readability of date-time and time minor ticks.
    • Improved performance from reduced number of ticks in many cases.
    • To fix situations where chart layout would be slightly off during 1st displayed frame.
  • LightningChart JS now adds touch-action: none to its container div style when a chart is created.
    • This is required for touch interactions to work as expected.
    • As a side effect, native touch interactions such as scrolling page up/down no longer work when interacting directly on the charts.
    • Previous behavior can be restored by adding CSS touch-action: auto to the container div.
  • AxisTickStrategies.DateTime now defaults to great ticks disabled.
    • These refer to additional labels that display year or month on certain zoom levels.
    • Previous behavior can be restored with chart.axisX.setTickStrategy(AxisTickStrategies.DateTime, (strategy) => strategy.setGreatTickStyle(strategy.getMajorTickStyle().setTickLength(28).setTickStyle(emptyLine))).
  • Reworked appendJSON method type definition to be more relaxed.
    • Issue previously was that some specific TypeScript syntaxes did not satisfy the type even though the idea was completely valid.
  • Removed dependency to @lightningchart/eventer.
  • Reworked SpiderChart.
    • Now supports different axis intervals within a single chart.
    • Chart will automatically scale and format axis intervals if not overridden.
  • Changed Band default valueEnd value from 0 to 1.
  • Changed default button look slightly (legends/cursors).
    • Now vertical linear gradient instead of previous radial gradient.
  • Improved BarChart label fitting algorithm to display labels more aggressively as long as they don't collide with other labels.
  • Type changes to BarChartValueLabels and BarChartLabelFormatter to accommodate new functionality of displaying stack sum labels.
  • Changed type definition of FormattingRange.
    • Previous type definition was unnecessarily complicated. This is a backwards incompatible change.
  • Changed AxisTickStrategies.Numeric extreme tick placement behavior slightly. It now ignores axis regions always, meaning extreme ticks may be a few pixels away from visible axis start/end.
    • Change was made for manual configured axis interval use cases as otherwise extreme ticks would display different values than configured extremes.
  • Slightly changed progressive DataSetXY behavior. Now later coordinate having same value as previous is accepted. Previously had to be at least slightly larger (or smaller depending on pattern).
  • PolarChart radial axis ticks are no longer hidden when they are positioned where radial axis title would be, if axis title is hidden.
  • Changed PolarAreaSeries.setConnectDataAutomaticallyEnabled(true) behavior. Removed amplitude interpolation, now directly connected to first data point.

Removed

  • Removed Figure.getBoundaries.
    • The method was widely unused and misleading. It was mainly introduced for internal purposes but accidentally included in end user API.
  • Removed MapChart.getRegionUnderMouse.
    • Replaced by MapChart.regions which allows following interactions above all MapChart regions.
  • Removed isDateTimeTickStrategy, isNumericTickStrategy, isTimeTickStrategy, isEmptyTickStrategy.
    • These did not work and there is no identified use case for them even if they did work.

不具合の修正

  • Fixed ChartXY animated zoom to fit sometimes resulting in first X axis animation and only afterwards Y axis animation.
  • Fixed PointLineAreaSeries.getYMin, getYMax, getXMin, getXMax not returning up to date value when used immediately after data is pushed in.
  • Fixed PointLineAreaSeries.getYMin, getYMax, getXMin, getXMax returning only visible data ranges rather than full data set ranges.
    • For example, for case ProgressiveX, if only part of series was visible getYMax would only consider data points that are visible.
  • Fixed AxisTickStrategies.Time displaying milliseconds in major ticks at ~10 second time interval.
    • Completely redundant information because every major tick is displayed at :000.
  • Improved chart position tracking on scrollable web pages to alleviate issues where chart would not be interactable after its position would be changed.
  • Fixed theme effect leaking incorrectly inside DataGrid.
  • Fixed issue where ParallelCoordinateChart series also rendered outside series area if axis interval is manually set.
  • Fixed issue where BarChart axes not visible when no data present.
  • Fixed isse where ParallelCoordinateChart.setCustomCursor and cursor target change event were not working.
  • Fixed bug where hovering mouse over PointLineAreaSeries with data gaps could break cursor result table from being displayed.
  • Fixed minor memory leak in ChartXY.
  • Fixed minor performance overhead in PointLineAreaSeries when points rendering is enabled.
  • Fixed PolarSector angle restrictions preventing, for example, the displaying of a sector from 350 deg to 10 deg.
  • Fixed PointLineAreaSeries render error where entire series could temporarily be invisible.
    • Happened in very specific circumstances, where there was a large gap between two data points and zoom level was changed very particularly.
  • Fixed issue where PointLineAreaSeries was not working properly with RegressiveY data pattern in scrolling applications.
  • Fixed performance issue on inverted ChartXY axes (end < start). Caused chart to re-render even though nothing had changed.
  • Fixed PointLineAreaSeries render error where line trend would ignore actual data provided and draw a straight line.
    • Happened in streaming applications with very time-specific zoom level changes.
  • Fixed all LCJS chart types assigning position and boxSizing CSS properties to container DIV even if they are explicitly defined in user applications CSS.
  • Fixed FPS problem when using GaugeChart with small container size.
  • Fixed incorrect GaugeChart unit label position when animations are disabled.
  • Fixed some glow effect rendering issues related to browser zooming.
  • Fixed incorrect data gap rendering for PointLineAreaSeries with spline.
    • Some segments were not rendered.