Public, safe interface for Panels rendering engine.
Scale for panel area in pixels.
Scale for panel area in percentages (0-100).
Method for adding a new AreaRangeSeries
to the chart. This series type is used for visualizing bands of data between two curves of data.
AreaRangeSeries
is optimized for large amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to AreaRangeSeries.
Readonly configuration:
Some properties of AreaRangeSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addAreaRangeSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to AreaRangeSeriesOptions.
Optional object with readonly configuration arguments for AreaRangeSeries
.
New series.
Method for adding a new AreaSeries
to the chart. This series type is used for visualizing area between a static base line and supplied curve data.
AreaSeries
is optimized for large amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to AreaSeries.
Readonly configuration:
Some properties of AreaSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addAreaSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to AreaSeriesOptions.
Return type:
AreaSeries
return type depends on supplied readonly configuration! Specifically, AreaSeriesOptions.type.
Configuration type |
Return series type |
---|---|
undefined or omitted |
AreaSeriesPositive |
AreaSeriesTypes.Positive |
AreaSeriesPositive |
AreaSeriesTypes.Negative |
AreaSeriesNegative |
AreaSeriesTypes.Bipolar |
AreaSeriesBipolar |
Optional object with readonly configuration arguments for AreaSeries
.
New series.
Add new X Axis to the Chart.
Example usage:
ChartXY.addAxisX({
opposite: true,
})
ChartXY.addAxisX({
type: 'logarithmic',
base: 10,
})
ChartXY.addAxisX({
type: 'logarithmic',
base: 'natural',
})
NOTE: Not all series types support logarithmic axes! Attaching a non-supported Series will crash the application.
List of series that support logarithmic Axes:
List of series that do not support logarithmic Axes:
Optional AxisOptions object for specifying Axis configurations that can't be changed during runtime.
Axis object.
Add new Y Axis to the Chart.
Example usage:
ChartXY.addAxisY({
opposite: true,
})
ChartXY.addAxisY({
type: 'logarithmic',
base: 10,
})
ChartXY.addAxisY({
type: 'logarithmic',
base: 'natural',
})
NOTE: Not all series types support logarithmic axes! Attaching a non-supported Series will crash the application.
List of series that support logarithmic Axes:
List of series that do not support logarithmic Axes:
Optional AxisOptions object for specifying Axis configurations that can't be changed during runtime.
Axis object.
Method for adding a new BoxSeries
to the chart. This series type is used for visualizing data groups through quartiles.
To learn more about its features and usage, refer to BoxSeries.
Readonly configuration:
Some properties of BoxSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addBoxSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to BoxSeriesOptions.
Optional object with readonly configuration arguments for BoxSeries
.
New series.
Create new XY Chart Marker to be rendered as part of UI.
Optional StaticCursorBuilderXY to customize structure/style of chartMarker. MarkerBuilders.XY can be used to build a custom one from scratch.
Optional arbitrary X axis to attach ChartMarker on
Optional arbitrary Y axis to attach ChartMarker on
Created ChartMarker
Method for adding a new EllipseSeries
to the chart. This series type visualizes a collection of ellipses.
To learn more about its features and usage, refer to EllipseSeries.
Readonly configuration:
Some properties of EllipseSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addEllipseSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to EllipseSeriesOptions.
Optional object with readonly configuration arguments for EllipseSeries
.
New series.
Add a Series for visualizing a Heatmap Grid with a static column and grid count. Has API for fast modification of cell values.
HeatmapGridSeries
is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:
1000x1000
) is cold started in ~0.3 seconds.1000x1000
) is re-populated (change data set) in ~0.050 seconds.4000x4000
) is cold started in ~2.0 seconds.4000x4000
) is re-populated (change data set) in ~0.5 seconds.HeatmapGridSeries
max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS.
If by increasing the amount of columns
and rows
you encounter suddenly weak performance, it is likely that there is not enough RAM memory available.
To learn more about its features and usage, refer to HeatmapGridSeriesIntensityValues.
Readonly configuration:
Some properties of HeatmapSeries
can only be configured when it is created. Some of these arguments are mandatory, while some are optional.
They are wrapped in a single object parameter:
// Example,
const series = ChartXY.addHeatmapGridSeries({
columns: 100,
rows: 100
})
To learn about available properties, refer to HeatmapGridSeriesOptions.
Heatmap data format is specified with heatmapDataType: 'intensity'
property;
in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a
Color look up table (LUT).
For scrolling heatmap grids, see addHeatmapScrollingGridSeries.
Configuration parameters for Heatmap Grid Series.
Heatmap Grid Series.
Add a Series for visualizing a Heatmap Grid, with API for pushing data in a scrolling manner (append new data on top of existing data).
HeatmapScrollingGridSeries
is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:
rows: 2048
, 1000 columns/s) runs consistently and smoothly with 60 FPS and no stuttering. CPU usage stays easily below 40%.rows: 4096
, 2000 columns/s) runs consistently and smoothly with 60 FPS and minor stuttering.HeatmapScrollingGridSeries
max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS.
If performance suddenly plummets at some approximate data threshold, then it is likely that there is not enough RAM available.
Use data cleaning configuration and suitable Axis intervals to adjust to your hardware limitations.
To learn more about its features and usage, refer to HeatmapScrollingGridSeriesIntensityValues.
Readonly configuration:
Some properties of ScrollingHeatmapSeries
can only be configured when it is created. Some of these arguments are mandatory, while some are optional.
They are wrapped in a single object parameter:
// Example,
const series = ChartXY.addHeatmapGridSeries({
resolution: 100
})
To learn about available properties, refer to HeatmapScrollingGridSeriesOptions.
Heatmap data format is specified with heatmapDataType: 'intensity'
property;
in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a
Color look up table (LUT).
For static heatmap grids, see addHeatmapGridSeries.
Configuration parameters for Heatmap Grid Series.
Scrolling Heatmap Grid Series.
Method for adding a new HeatmapSeries
to the chart. This series type is used for visualizing multi-dimensional intensity matrixes.
NOTE: this method exists mainly for keeping backwards compatibility. New, optimized 2D heatmap series have been already published and can be created with addHeatmapGridSeries and addHeatmapScrollingGridSeries methods.
This method will be removed in next major release (v4.0), at which point all migrations to newest version will have to use the new optimized features instead.
HeatmapSeries
is optimized for large amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to IntensitySeries.
Readonly configuration:
Some properties of HeatmapSeries
can only be configured when it is created. Some of these arguments are mandatory, while some are optional.
They are wrapped in a single object parameter:
// Example,
const series = ChartXY.addHeatmapSeries({
columns: 100,
rows: 100,
start: { x: 0, y: 0 },
end: { x: 100, y: 100 },
pixelate: true,
})
To learn about available properties, refer to IntensitySeriesOptions.
Return type:
HeatmapSeries
return type depends on supplied readonly configuration! Specifically, IntensitySeriesOptions.type.
Configuration type |
Return series type |
---|---|
undefined or omitted |
IntensityGridSeries |
IntensitySeriesTypes.Grid |
IntensityGridSeries |
IntensitySeriesTypes.Mesh |
IntensityMeshSeries |
Optional object with readonly configuration arguments for HeatmapSeries
.
New series.
Add a legendbox.
Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.
The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.
Legendbox alignment:
Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox
:
// Default (vertical) LegendBox.
const legendBox = ChartXY.addLegendBox()
// Horizontal LegendBox.
const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
Custom Legendbox positioning:
By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).
A custom location can be configured with UIElement API:
Position coordinate system is specified when creating legendbox.
addLegendBox( LegendBoxBuilders.VerticalLegendBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
For more information on LegendBox
features, and usage, see LegendBox.
LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].
Object with two interfaces: LegendBox and UIElement.
Method for adding a new LineSeries
to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a continuous stroke. LineSeries
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to LineSeries.
Readonly configuration:
Some properties of LineSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const lineSeries = ChartXY.addLineSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to LineSeriesOptions.
Optional object with readonly configuration arguments for LineSeries
.
New series.
Method for adding a new OHLCSeries
to the chart. This series type is used for visualizing trading figures.
To learn more about its features and usage, refer to OHLCSeries.
Readonly configuration:
Some properties of OHLCSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addOHLCSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to OHLCSeriesOptions.
Optional object with readonly configuration arguments for OHLCSeries
.
New series.
Api to add OSM menu to the chart
A 2d array which describes the type of buttons to be added and their positions (row, column).
Optional parameter to specify the shape of the on-screen menu icons.
Method for adding a new PointLineSeries
to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a continuous stroke and configurable markers over each coordinate. PointLineSeries
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointLineSeries.
Readonly configuration:
Some properties of PointLineSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const pointLineSeries = ChartXY.addPointLineSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PointLineSeriesOptions.
Optional object with readonly configuration arguments for PointLineSeries
.
New series.
Method for adding a new PointSeries
to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with configurable markers over each coordinate. PointSeries
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointSeries.
Readonly configuration:
Some properties of PointSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const pointSeries = ChartXY.addPointSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PointSeriesOptions.
Optional object with readonly configuration arguments for PointSeries
.
New series.
Method for adding a new PolygonSeries
to the chart. This series type visualizes a collection of polygons.
To learn more about its features and usage, refer to PolygonSeries.
Readonly configuration:
Some properties of PolygonSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const polygonSeries = ChartXY.addPolygonSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PolygonSeriesOptions.
Optional object with readonly configuration arguments for PolygonSeries
.
New series.
Method for adding a new RectangleSeries
to the chart. This series type visualizes a collection of rectangles.
To learn more about its features and usage, refer to RectangleSeries.
Readonly configuration:
Some properties of RectangleSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const rectSeries = ChartXY.addRectangleSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to RectangleSeriesOptions.
Optional object with readonly configuration arguments for RectangleSeries
.
New series.
Method for adding a new SegmentSeries
to the chart. This series type visualizes a collection of line segments (A -> B).
To learn more about its features and usage, refer to SegmentSeries.
Readonly configuration:
Some properties of SegmentSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addSegmentSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to SegmentSeriesOptions.
Optional object with readonly configuration arguments for SegmentSeries
.
New series.
Method for adding a new SplineSeries
to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a smoothed curve stroke + point markers over each data point.
To learn more about its features and usage, refer to SplineSeries.
Readonly configuration:
Some properties of SplineSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const splineSeries = ChartXY.addSplineSeries({
// Select shape of point markers.
pointShape: PointShape.Circle
})
To learn about available properties, refer to SplineSeriesOptions.
Optional object with readonly configuration arguments for SplineSeries
.
New series.
Method for adding a new StepSeries
to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a stepped stroke + point markers over each data point.
Possible step modes are: 'before'
, 'middle'
and 'after'
.
To learn more about its features and usage, refer to StepSeries.
Readonly configuration:
Some properties of StepSeries
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const stepSeries = ChartXY.addStepSeries({
// Select shape of point markers.
pointShape: PointShape.Circle
})
To learn about available properties, refer to StepSeriesOptions.
Optional object with readonly configuration arguments for StepSeries
.
New series.
Add a stand-alone UIElement using a builder.
Example usage:
addUIElement( UIElementBuilders.TextBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Disable all animations for the chart.
After calling this function, animations (Zooming, scaling) for all Axes will be disabled. Animations must be recreated manually afterwards.
Chart itself for fluent interface.
Permanently dispose the component.
To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.
let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined
Object itself for fluent interface
Operate on each axis of chart, x and y
Callback function for axis
Get animations disable/enable state.
Animations default state.
Get reference to charts AutoCursor
.
See AutoCursorXY for all available methods for configuring the AutoCursor
.
AutoCursor
.
Get AutoCursor
behavior, from a collection of preset options (AutoCursorModes).
Active selection of AutoCursor behavior.
array of axis positions which have to be included to the output empty array indicates all of positions are included
An array of axis
Get fillstyle of chart background.
FillStyle
Get stroke style of chart background.
LineStyle
Get reference to the default X Axis of the ChartXY
.
This will always return reference to the X Axis that is closest to the chart (starting from bottom). The user can safely destroy the default Axis (with Axis.dispose, as long as there are no series attached to it).
Default X Axis of chart.
Get reference to the default Y Axis of the ChartXY
.
This will always return reference to the Y Axis that is closest to the chart (starting from left). The user can safely destroy the default Axis (with Axis.dispose, as long as there are no series attached to it).
Default Y Axis of chart.
Get fillStyle for fitting rectangle when fitting.
FillStyle
Get stroke style for fitting rectangle when fitting.
LineStyle
Get minimum size of Panel. Depending on the type of class this value might be automatically computed to fit different elements.
Vec2 minimum size or undefined if unimplemented
Get is mouse-interaction enabled: Panning axes by dragging mouse on frame.
Boolean flag
Get is mouse-interaction enabled: Fitting axes by capturing rectangle on frame.
Boolean flag
Get is mouse-interaction enabled: Zooming axes by capturing rectangle on frame.
Boolean flag
Get is mouse-interaction enabled: Zooming axes with mouse-wheel on frame.
Boolean flag
Get if mouse and cursor interactions are disabled during scrolling animations for the chart's series.
True if interactions with series are disabled, false if not.
Get if mouse and cursor interactions are disabled during zooming animations for the chart's series.
True if interactions with series are disabled, false if not.
Get padding around Chart in pixels.
Padding datastructure
Get series of a chart
series
Get FillStyle of Series background area (area behind series).
FillStyle
Get Stroke style of Series background area (area behind series).
LineStyle
Returns the Theme currently being used.
An object containing the Theme.
Get text of Chart title.
Chart title as a string.
Get fill style of Chart Title.
FillStyle object
Get font of Chart title.
FontSettings object
Padding after Chart title
Padding before Chart title
Get rotation of Chart title.
Rotation in degrees
Get fillStyle for zooming rectangle when zooming.
FillStyle
Get stroke style for zooming rectangle when zooming.
LineStyle
Remove subscription from mouse-click event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-doubleClick event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-down event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-drag event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-dragStart event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-dragStop event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-enter event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-leave event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-move event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from touch-start event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-up event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from mouse-wheel event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from touch-end event on Panel background
Event listener
True if the listener is successfully removed and false if it is not found
Remove subscription from touch-move event on Chart background
Event listener
True if the listener is successfully removed and false if it is not found
Remove event listener from resize event.
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from mouse-click event on Series Background
Remove event listener from mouse-doubleClick event on Series Background
Remove event listener from mouse-down event on Series Background
Remove event listener from mouse-drag event on Series Background
Remove event listener from mouse-drag start event on Series Background
Remove event listener from mouse-drag stop event on Series Background
Remove event listener from mouse-enter event on Series Background
Remove event listener from mouse-leave event on Series Background
Remove event listener from mouse-move event on Series Background
Remove event listener from mouse-up event on Series Background
Remove event listener from mouse-wheel event on Series Background
Remove event listener from touch end event on Series Background
Remove event listener from touch move event on Series Background
Remove event listener from touch start event on Series Background
Subscribe to mouse-click event on Chart background
Subscribe to mouse-doubleClick event on Chart background
Subscribe to mouse-down event on Chart background
Subscribe to mouse-drag event on Chart background
Subscribe to mouse-drag start event on Chart background
Subscribe to mouse-drag stop event on Chart background
Subscribe to mouse-enter event on Chart background
Subscribe to mouse-leave event on Chart background
Subscribe to mouse-move event on Chart background
Subscribe to mouse-up event on Chart background
Subscribe to mouse-wheel event on Chart background
Subscribe to touch-end event on Chart background
Subscribe to touch-move event on Chart background
Subscribe to touch-start event on Chart background
Subscribe to resize
event.
This event is triggered whenever the area of chart changes (due to document or dashboard resizing).
// Example usage,
ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
})
Handler function for event
Token of subscription
Subscribe to mouse-click event on Series Background
Subscribe to mouse-doubleClick event on Series Background
Subscribe to mouse-down event on Series Background
Subscribe to mouse-drag event on Series Background
Subscribe to mouse-drag start event on Series Background
Subscribe to mouse-drag stop event on Series Background
Subscribe to mouse-enter event on Series Background
Subscribe to mouse-leave event on Series Background
Subscribe to mouse-move event on Series Background
Subscribe to mouse-up event on Series Background
Subscribe to mouse-wheel event on Series Background
Subscribe to touch end event on Series Background
Subscribe to touch move event on Series Background
Subscribe to touch start event on Series Background
Method pans axes by pixels.
// Pan the chart 100 pixels to right.
chart.pan({x: 100, y: 0})
Amount to pan X/Y in pixels
Capture rendered state in an image file. Prompts the browser to download the created file.
NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.
Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Example usage:
// Download 'screenshot.png'
Panel.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Panel.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Panel.saveToFile('fileName', 'image/jpeg', 0.50)
Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
A DOMString indicating the image format. The default format type is image/png.
A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.
Disable/Enable all animations of the Chart.
Boolean value to enable or disable animations.
Chart itself for fluent interface.
Style chart AutoCursor
using a callback function.
// Example syntax
ChartXY.setAutoCursor((autoCursor) => autoCursor
// `autoCursor` is of type AutoCursorXY, use its API for styling the cursor.
.setGridStrokeXStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))
)
See AutoCursorXY for all available methods for configuring the AutoCursor
.
Example usage:
// Example 1, disable Y Axis tick marker & grid line.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.disposeTickMarkerY()
.setGridStrokeYStyle(emptyLine),
)
// Example 2, style AutoCursor ResultTable.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.setResultTable((resultTable) => resultTable
.setOrigin(UIOrigins.LeftTop)
.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
.setTextFont((font) => font
.setSize(12)
.setFamily('sans-serif')
)
.setBackground((background) => background
.setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
)
)
)
// Example 3, style AutoCursor TickMarker X.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
.setTextFont((font) => font.setWeight('bold'))
.setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
.setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
)
)
Callback function that receives reference to the charts AutoCursor
.
Object itself for fluent interface.
Set chart AutoCursor
behavior, by selecting a preset option from AutoCursorModes.
Possible values:
AutoCursorModes.snapToClosest
(default) | AutoCursor snaps to closest data point from mouse location.AutoCursorModes.onHover
| AutoCursor is only shown when it is directly over a series.AutoCursorModes.disabled
| AutoCursor is disabled // Example, disable AutoCursor
ChartXY.setAutoCursorMode(AutoCursorModes.disabled)
Related information:
On series level, AutoCursor behavior can be configured individually for each series, and there are also more series specific options available.
Here is LineSeries
for example:
'nearest-x'
, 'nearest'
, etc.).Selection of AutoCursor behavior.
Object itself for fluent interface.
Set FillStyle of chart background.
// Example usage,
ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Related API:
FillStyle
or function which mutates the active FillStyle
.
Object itself
Set LineStyle of chart background border stroke.
// Example usage,
ChartXY.setBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
LineStyle
or function which mutates the active LineStyle
.
Object itself
Set fillStyle for zooming rectangle when fitting.
FillStyle or mutator to modify existing one
Object itself
Set stroke style for zooming rectangle when fitting.
LineStyle or mutator to modify existing one
Object itself
Set mouse style when hovering over series background.
Mouse-style preset name (see MouseStyles)
Object itself
Set mouse style when fitting over series background.
Mouse-style preset name (see MouseStyles)
Object itself
Set is mouse-interaction enabled: Panning axes by dragging mouse on frame.
Boolean flag
Object itself
Set is mouse-interaction enabled: Fitting axes by capturing rectangle on frame.
Boolean flag
Object itself
Set is mouse-interaction enabled: Zooming axes by capturing rectangle on frame.
Boolean flag
Object itself
Set is mouse-interaction enabled: Zooming axes with mouse-wheel on frame (also touch pinch currently).
Boolean flag
Object itself
Set all mouse-interaction flags at once.
Are mouse-interactions enabled
Object itself
Set if mouse and cursor interactions should be disabled during scrolling animations for the chart's series.
True if mouse and cursor interactions should be disabled during scrolling animations, false if not.
Chart itself for fluent interface.
Set if mouse and cursor interactions should be disabled during zooming animations for the chart's series.
True if mouse and cursor interactions should be disabled during zooming animations, false if not.
Chart itself for fluent interface.
Set mouse style when panning over series background.
Mouse-style preset name (see MouseStyles)
Object itself
Set mouse style when zooming over series background.
Mouse-style preset name (see MouseStyles)
Object itself
Set padding around Chart in pixels.
// Example 1, specify complete padding (four sides).
ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
// Example 2, specify only single padding.
ChartXY.setPadding({ right: 64 })
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
Object itself
Set FillStyle of series background (area behind series).
// Example usage,
ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))
Related API:
FillStyle
or function which mutates the active FillStyle
.
Object itself
Set LineStyle of series background border stroke.
// Example usage,
ChartXY.setSeriesBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
LineStyle
or function which mutates the active LineStyle
.
Object itself
Set the state for all Series in the Chart to highlight on mouse hover.
True if all Series should be highlighted on mouse hover, false if not.
Object itself for fluent interface.
Set text of Chart title.
Chart title as a string.
Object itself for fluent interface.
Set fill style of Chart Title.
Example usage:
// Create a new style
Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
Chart.setTitleFillStyle(emptyFill)
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Chart itself
Set font of Chart Title.
Example usage:
// Create a new FontSettings
Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Chart itself
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example usage,
// Add empty space between title and series.
ChartXY.setTitleMarginBottom(32)
Gap after the chart title in pixels.
Chart itself for fluent interface
Specifies padding before chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example usage,
// Add empty space at top of chart, before title.
ChartXY.setTitleMarginTop(32)
Gap between the top of chart and its title in pixels.
Chart itself for fluent interface
Set rotation of Chart title.
Rotation in degrees
Object itself
Set fillStyle for zooming rectangle when zooming.
FillStyle or mutator to modify existing one
Object itself
Set stroke style for zooming rectangle when zooming.
LineStyle or mutator to modify existing one
Object itself
Solves the nearest data-point from series inside Chart of a given coordinate on screen
Location on screen or omit for cur mouse location
Undefined or data-structure for positioning of markers (and cursors)
Chart type for visualizing data between two dimensions, X and Y. It has built-in Axis functionality, and supports a large set of series types.
ChartXY
can be created in two different ways - to learn more about creation time configuration ofChartXY
, please refer to:ChartXY features
ChartXY
always has at least one X and Y axes.The default
Axis
can be referenced with ChartXY.getDefaultAxisX and ChartXY.getDefaultAxisY. See Axis for features of axis.ChartXY
doesn't have a limit on number of axes. Additional axes can be created with ChartXY.addAxisX and ChartXY.addAxisY. Multiple Axes can be stacked on top of another, and axes can be positioned on either side of the chart (left, right, top, bottom, see AxisOptions).ChartXY
supports a variety of different series types, each with their own method of data visualization. Series are created withChartXY.add...Series
methods, for example:When created, a series is always attached to a pair of X and Y Axes. The Axes can be specified by user, or the chart default Axes will be used.
Auto cursor is activated when the users mouse is over the chart. It automatically solves the nearest data point to the mouse, and displays it to the user over the chart in a result table.
Auto cursor can be configured in a variety of ways; on chart level, the cursor behavior and style can be specified using:
On series level, the cursor behavior can be configured individually for each series:
'nearest-x'
,'nearest'
, etc.).ChartXY
has built-in legend box functionality for listing the series names in a user interface. The legend box also provides additional logic, like hiding selected series by clicking on the legend box, and visualizing color look-up tables (LUT) in applications where they are used.Legend box is added using ChartXY.addLegendBox.
ChartXY
has a built-in title component, which can be configured using ChartXY.setTitle.ChartXY
contains two separate background components:Custom UI elements can be placed on
ChartXY
in same way as all other charts, using ChartXY.addUIElement.Other APIs worthy of mention:
ChartXY
can be configured with ChartXY.setPadding.ChartXY
can be removed permanently with ChartXY.dispose.