LightningChart JS is the highest performing chart library on the web with excellent execution performance-monitor dozens of data sources simultaneously with high data rate. GPU acceleration and WebGL rendering ensure that your device’s graphics processor is effectively utilized, thereby achieving high refresh rates and smooth animations. It is very suitable for applications in trade, engineering, aerospace, medicine and other fields.
Click to download the latest trial version of LightningChart JS, please add a link description
Related recommendations:
JavaScript visualization chart library LightningChart JS latest version installation tutorial The
first step of getting started with JavaScript visualization chart library LightningChart JS
LightningChartJS migration guide
From 1.3.1 and previous versions to 2.0.0 and later versions.
LineSet improvements
Although this is not a change that breaks compatibility, we think it is worth emphasizing here.
We have improved the drawing of thick lines in the library, reducing memory usage by about 75% and improving the visual effects of lines.
Axis change
In this version, we refactored the way our axis tick strategy works to allow more complex axis and better visual style. Therefore, the way the tick strategy is used has also changed.
-
Added Axis.setTickStrategy( TickStrategy, (optional)tickStrategyMutator ).
o This is used to set the Tick Strategies of Axis and the style elements of Tick Strategies.
o The mutant is optional and only used when styling or modifying TickStrategy elements. - The DateTime TickStrategy origin can now be set via the setter method.
o Use a mutant to change the DateOrigin of the DateTime Tick strategy.
o Axis.setTickStrategy( AxisTickStrategies.DateTime, (tickStrategy) => {
tickStrategy.setDateOrigin( dateOrigin) }.)
Axis scales are now divided into three different categories:
-
Main items
o These are always displayed.
o They represent the main thresholds in the scale shown. - Small scale
o Displayed by default, can be hidden
o Match between major scales
o If the label can fit without overlapping with other labels, the label is displayed.
-
Otherwise, only part of the display or no display.
The display of tick and grid lines is not affected - Big ticks
o Use with DateTime Tick strategy.
o Shows large thresholds (such as the number of years in a date).
o Can be hidden
- Extreme ticks
o It is hidden by default and can be enabled.
o Shown at both ends of the axis.
o Helps to always display the current extreme values of an axis.
Different ticks can be stylized by using the Axis.setTickStrategy() method and the optional tickStrategyMutator.
- Axis.setTickStrategy( TickStrategy, ( mutator ) => { mutator.setMajorTickStyle( (tickStyle) => { tickStyle.setGridStrokeStyle( ... ) }。) } )
AxisTickStrategies.NumericWithUnits (number units)
NumericWithUnits TickStrategy has been deleted. The same function can be achieved by using Numeric TickStrategy and its setFormattingFunction() method.
Removed the default axis tick strategy from chart/axis creation
Old behavior:
- When creating the chart
LightningChart.ChartXY( { defaultAxisXTickStrategy.DateTime() }。AxisTickStrategies.DateTime() }。)
-
When creating Axis.
ChartXY.addAxisX(undefined, AxisTickStrategies.DateTime())
new behavior. -
When creating a chart,
LightningChart.ChartXY().setTickStrategy( AxisTickStrategies.DateTime) - When creating Axis.
ChartXY.addAxisX (). SetTickStrategy (AxisTickStrategies.DateTime)
WebGL extension requirements
LightningChart JS now requires the following WebGL extensions to work properly.
ANGLE_instanced_arrays
EXT_blend_minmax
OES_element_index_uint.
OES_standard_derivatives
OES_vertex_array_object (vertex array object)
WEBGL_lose_context
These extensions have been implemented in all modern desktop and mobile browsers. If any of these extensions are missing, then an ignorable warning will be displayed to inform the user of the possible incorrect working function.
You already know why we did this-the performance of PointSet has been significantly improved.
Dashboard options
Simplified the creation of Dashboard. The chart options are no longer separated as a separate option object. columnSpanAnd rowSpanare now optional options. If no value is defined, it defaults to 1.
- Previously:Dashboard.createChartXY( { columnIndex: 0, rowIndex: 0, columnSpan: 1, rowSpan:1, chartXYOptions: { theme.Themes.dark, ..: Themes.dark, ... } } )
- Now:Dashboard.createChartXY( {columnIndex: 0, rowIndex.0, columnSpan: 1, rowSpan: 1,theme: theme: 0, columnSpan: 1, rowSpan: 1,theme: Themes.dark, ...})
ColumnSpan and RowSpan is now optional, if no value is given, it will default to 1.Polyfills of requestAnimationFrame and cancelAnimationFrame
In version 1.3.1 and before, we have added our own polyfills for these functions. Starting from version 2.0.0, developers need to add their own polyfills for these features. You can use a library, such as the requestAnimationFrame polyfill library, to achieve this functionality. This was changed in order to follow the best practice of multilateral filling in the library.
Changes in ColorHEX
We changed the order of the values in the ColorHEX method (previously #ARGB, #AARRGGBB) to correspond to #RGBA / #RRGGBBAA in the CSS form.
Remove obsolete API
Remove SolidGauge.setDataLabelFormater -> Use SolidGauge.setDataLabelFormatter.
Remove SolidGauge.getDataLabelFormater -> Use SolidGauge.getDataLabelFormatter.
setChartBackgroundStroke removed -> use setChartBackgroundStrokeStyle.
getChartBackgroundStroke removed -> use getChartBackgroundStrokeStyle.
setMaxPointsCount delete -> use setMaxPointCount.
The containerId engine option is deleted -> Use container engine option instead. This allows passing the containerId as a string as before, or just passing the container (div) itself.
If you want to purchase a genuine LightningChart JS license, or to learn more about product information, please click [Consult Online Customer Service]
This article is reprinted from [Huidu Technology] evget welcomes any form of reprinting, but please be sure to indicate the source and not modify the original related links. Respect for the achievements of others’ labor
links: https://www.evget.com/article/2020/11/4/38994.html