Readonly coordsSelector for "client" Coordinate System.
This references the coordinate system used in HTML.
It starts at top left of the web page and is measured in pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from top.
JavaScript events are tracked and HTML elements are positioned in the client coordinate system.
This selector can be used for translating client coordinates to other coordinate systems and vice versa. For example, in order to:
See translateCoordinate for more detailed use case information and example usage.
Readonly coordsSelector for "relative" Coordinate System.
This coordinate system is relative to the bottom left corner of the Control (chart/dashboard/etc.), and is measured as pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from bottom.
This selector can be used for two purposes:
Positioning LCJS UI elements in pixels:
// Position UI element in pixels by supplying `Control.coordsRelative` as its positioning system.
const textBox = Control.addUIElement(UIElementBuilders.TextBox, Control.coordsRelative)
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 100, y: 20 })
Translations between coordinate systems:
Use with translateCoordinate method to translate coordinates from "relative" to another coordinate system.
Readonly engineInterface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).
Scale for panel area in percentages (0-100).
While it is not functionally equal to this, using coordsRelative coordinate system is preferred (more confidence for long term support).
Add manually controlled Cursor object. These have exactly same functions as built-in cursors but they can be freely controlled by application logic.
const cursor = chart.addCursor()
Styling works same as built-in cursors (e.g. setCursor).
Position is set using setPosition method and displayed content using setResultTable(table => table.setContent(...))
For more details, see Developer documentation > Features > Cursor > Manual cursors
Cursor object.
Builder for cursor. Can be used to tweak a handful of properties which can't be changed during runtime.
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.coordsRelative )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
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].
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.coordsRelative )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
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].
Attach object to an legendBox entry
Series itself for fluent interface
Object which has to be attached
Flag that indicates whether the Attachable should be hidden or not, when its respective Entry is clicked.
By default, entries are assigned a smooth looking gradient based on the component color. If this flag is true, then this is skipped, and exact component solid fill is used instead.
Permanently destroy 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
Get active cursor formatter.
Cursor formatter.
Get current cursor behavior.
SolveNearestMode or undefined
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get state of component highlighting.
In case highlight animations are enabled, this method returns the unanimated highlight value.
In case of MapChart, this method only considers the complete highlighting of MapChart, not highlighting individual regions
Number between 0 and 1, where 1 is fully highlighted.
Get Array of all legend boxes created using addLegendBox method.
This will not include any legend boxes that were destroyed with dispose method.
Array of legend boxes.
Get region that is currently under mouse.
Result is undefined if no region is under mouse.
Map region that is under mouse or undefined.
Get size of control as pixels.
For stand-alone component, the size will be equal to the size of its containing HTML <div> (Control.engine.container)
For component inside Dashboard, the size will only include the component itself, so size can be less than the size of containing HTML <div>.
Object with x and y properties { x: number, y: number }, where both are pixel values.
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get font of Chart title.
FontSettings object
Invalidate numeric values associated with each region of the Map using a callback function that is called for every region.
Region values can be used in conjuction with:
The values can be displayed when user puts the mouse above a region. Modify DataCursor parsing with MapChart.setCursorResultTableFormatter
Each region can be styled based on its assigned value, by setting the MapCharts' fill style to a PalettedFill.
Example usage:
// Example, Set a random value [0, 100] for each region.
MapChart.invalidateRegionValues( ( region, prev ) => Math.random() * 100 )
In a more realistic application, you would look up a value from an external data set based on the region.
The properties available from region are based on the used MapType, see MapTypeRegionProperties for a list of supported properties.
// Example, invalidate region values by external data set.
fetch(...)
.then((data) => {
MapChart.invalidateRegionValues((region) => {
// Look up value for `region`.
const value = data[region.name]
return value || 0
})
})
MapChart itself.
Function that is called for each region. First parameter is a region data structure, that can be used to identify each region. Second parameter is the previous value if any.
Optional prev: numberInvalidate numeric values associated with each region of the Map using an Array of identifier-value objects.
Region values can be used in conjuction with:
The values can be displayed when user puts the mouse above a region. Modify DataCursor parsing with MapChart.setCursorResultTableFormatter
Each region can be styled based on its assigned value, by setting the MapCharts' fill style to a PalettedFill
Example usage:
MapChart.invalidateRegionValues([
{ value: 0, name: 'Finland' }
])
In place of 'name', any property supported by the used MapType can be supplied. Look up MapTypeRegionProperties for a map of supported properties per MapType.
// MapTypes that plot *Countries* (for example, 'World', 'Europe') also support 'ISO_A3' country codes.
MapChart.invalidateRegionValues([
{ value: 0, ISO_A3: 'FIN' }
])
MapChart.invalidateRegionValues([
{ value: 0, ...MapRegions[ MapTypes.World ].Finland }
])
MapChart itself.
Array of identifier-value objects.
Unsubscribe from onCursorTargetChanged event by supplying the token received from that method.
Unsubscribe from Highlight object event. This is called whenever an object is highlighted
In case of MapChart, this method only considers the complete highlighting of MapChart, not highlighting individual regions
True if the unsubscription was successful.
Token that was received when subscribing to the event.
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
Exactly same as setCustomCursor but doesn't disable built-in cursor.
Subscribe to event when cursor target changes. The callback receives all information about pointed data, which can be used for extra custom actions.
// Example syntax
chart.onCursorTargetChanged((_, hit, hits, mouseLocation) => {
if (hit) {
// Cursor is visible
} else {
// Cursor is hidden
}
})
Token that can be used to unsubscribe from the event.
Callback that should be triggered on event
Subscribe onDispose event.
This event is triggered whenever the Control (Dashboards and all chart types) is disposed.
// Example usage
Chart.onDispose(() => {
console.log('chert was disposed')
})
Chart.dispose()
Token of subscription
Subscribe to highlight object event. This is called whenever an object is highlighted.
In case of MapChart, this method only considers the complete highlighting of MapChart, not highlighting individual regions
Token that can be used to unsubscribe from the event.
Function that is called when event is triggered.
Subscribe to inViewChange event.
This event is triggered when the chart transitions from being off-screen to being on-screen and vice versa.
Token of subscription
Add event listener to Map Data Ready.
If map data is ready when event is attached the callback will be called on the next JS event loop cycle.
Token of the event listener
Event listener for Map Data Ready Event
Add event listener to Mouse Click Event
Token of the event listener
Event listener for Mouse Click Event
Add event listener to Mouse Double Click Event
Token of the event listener
Event listener for Mouse Double Click Event
Add event listener to Mouse Down Event
Token of the event listener
Event listener for Mouse Down Event
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Add event listener to Enter Event
Token of the event listener
Event listener for Mouse Enter Event
Add event listener to Mouse Leave Event
Token of the event listener
Event listener for Mouse Leave Event
Add event listener to Mouse Move Event
Token of the event listener
Event listener for Mouse Move Event
Add event listener to Mouse Up Event
Token of the event listener
Event listener for Mouse Up Event
Subscribe to Mouse Wheel event
Token of subscription
Event handler function
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)
})
Token of subscription
Handler function for event
Subscribe to Touch End event
Token of subscription
Event handler function
Subscribe to Touch Move event
Token of subscription
Event handler function
Subscribe to Touch Start event
Token of subscription
Event handler function
Subscribe to on View Change event.
This event is triggered when the geographical view of the Map chart is changed as a side effect of chart resize, padding change, or other reason.
It is also fired when the Map chart is first displayed.
The view change event can be used for aligning other geographically positioned components over the Map chart.
Mainly, it is designed for convenience of usage with ChartXY that is laid over a MapChart.
See our Interactive Examples gallery for examples of this.
// Example syntax.
mapChart.onViewChange((view) => {
console.log(view)
})
Token of the event listener
Callback to trigger when the event is fired.
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)
If 'type' is not supported by browser, an Error will be thrown.
Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
Optional type: stringA DOMString indicating the image format. The default format type is image/png.
Optional encoderOptions: numberA 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.
Set component highlight animations enabled or not. For most components this is enabled by default.
// Example usage, disable highlight animations.
component.setAnimationHighlight(false)
This method does not work before map data is loaded. See onMapDataReady
Object itself
Animation enabled?
Disable/Enable all animations of the Chart.
Chart itself for fluent interface.
Boolean value to enable or disable animations.
Set FillStyle of chart background.
// Example usage,
ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or function which mutates the active FillStyle.
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:
Object itself
LineStyle or function which mutates the active LineStyle.
Style chart cursor using a callback function. Available style APIs can depend on the type of chart.
// Example syntax
chart.setCursor((cursor) => cursor
.setGridStrokeXStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))
)
See Cursor2D, CursorXY or Cursor3D for all available methods for configuring the cursor.
Example usage:
// Example 1, disable Y Axis tick marker & grid line.
chart.setCursor((cursor) => cursor
.setTickMarkerYVisible(false)
.setGridStrokeYStyle(emptyLine)
)
// Example 2, style cursor ResultTable.
chart.setCursor((cursor) => cursor
.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 cursor TickMarker X.
chart.setCursor((cursor) => cursor
.setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
.setTextFont((font) => font.setWeight('bold'))
.setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
.setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
)
)
Object itself for fluent interface.
Set cursor formatting, controlling the text displayed in built-in cursor.
chart.setCursorFormatting((_, hit, hits) => {
return [
['Cursor pointing at'],
[hit.series], // returning a series will display the series color and its name automatically.
['X', '', hit.axisX.formatValue(hit.x)], // utilizing axis formatValue is useful for considering active zoom level and type of axis
['Y', '', hit.y.toFixed(2)], // empty string '' results in gap between cells
[{ text: 'Example', font: { weight: 'bold' }, fillStyle: fillRed }] // any cell can also be styled individually
]
})
Before overriding default cursor formatting, it is recommended to check if using setUnits or configuring Axis cursor formatting would be enough.
In order to use series specific data properties (e.g. Heatmap sample "intensity"),
you should use type guards to assert the type of the SolveResult:
// Example of using type guard in cursor formatter
Chart.setCursorFormatting((chart, hit, hits) => {
if (!isHitHeatmap(hit)) return undefined
return [hit.intensity.toFixed(1)]
})
More details in Developer documentation (Features > Cursor).
Object itself
Callback function for cursor formatting.
Set cursor behavior. This affects both built-in cursor as well as any custom cursor connected using setCustomCursor.
For possible values see SolveNearestMode.
Additionally, you can supply undefined value to disable cursor completely.
// Example, show 1 nearest solve result only
chart.setCursorMode('show-nearest')
// Example, disable cursor
chart.setCursorMode(undefined)
// Example, enable interpolation
chart.setCursorMode('show-all-interpolated')
Object itself
SolveNearestMode or undefined
Connect a custom cursor to the chart. This has 2 effects:
Custom cursors are still affected by other cursor behavior controls such as:
setCursorEnabledThe custom cursor can be anything defined by the user, such as:
// Example of plugging in a custom cursor
chart.setCustomCursor((_, hit, hits) => {
if (hit) {
// Display custom cursor
} else {
// Hide custom cursor
}
})
Object itself
undefined to restore built-in cursor or callback function that should be triggered to display custom cursor.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set Fill Style of Map regions.
Example usage:
All Map regions are filled with a single color.
// Example, solid color MapChart.
MapChart.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
Each Map region is colored with an individual color.
Coloring basis is further based on lookUpProperty of the PalettedFill:
lookUpProperty: 'value':
Each region is colored with a solid color that is looked up from the attached LUT by the active value of that region, as configured with invalidateRegionValues method.
// Example, MapChart color look-up based on region values.
const mapChart = lightningChart().Map({
type: MapTypes.Europe
})
mapChart.setFillStyle(new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 100, color: ColorRGBA(0, 255, 0) }
]
})
}))
// Assign value for "Finland" region.
mapChart.invalidateRegionValues([{ value: 100, ISO_A3: 'FIN' }])
lookUpProperty: 'x' | 'y':
Each pixel color of the map is looked up from the attached LUT by the respective
longitude ('x'), or latitude ('y') coordinate.
// Example, MapChart color look-up based on longitude.
const mapChart = lightningChart().Map({
type: MapTypes.Europe
})
mapChart.setFillStyle(new PalettedFill({
lookUpProperty: 'x',
lut: new LUT({
interpolate: false,
steps: [
{ value: -180, color: ColorRGBA(0, 0, 0) },
{ value: 20, color: ColorRGBA(0, 255, 0) },
{ value: 32, color: ColorRGBA(0, 0, 0) },
]
})
}))
Each pixel color of the map is colored according to a linear gradient.
// Example, color MapChart with linear gradient.
MapChart.setFillStyle(new LinearGradientFill({
angle: 45,
stops: [
{ offset: 0.0, color: ColorRGBA(255, 0, 0) },
{ offset: 1.0, color: ColorRGBA(0, 255, 0) }
]
}))
Each pixel color of the map is colored according to a radial gradient.
// Example, color MapChart with radial gradient.
MapChart.setFillStyle(new RadialGradientFill({
position: { x: 0.8, y: 0.7 },
stops: [
{ offset: 0.0, color: ColorRGBA(255, 0, 0) },
{ offset: 1.0, color: ColorRGBA(0, 0, 255) }
]
}))
Map regions are not filled.
MapChart itself.
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current Fill Style.
Set state of component highlighting.
// Example usage
component.setHighlight(true)
component.setHighlight(0.5)
If highlight animations are enabled (which is true by default), the transition will be animated. As long as the component is highlighted, the active highlight intensity will be animated continuously between 0 and the configured value. Highlight animations can be disabled with setAnimationHighlight
In case of MapChart, this method only considers the complete highlighting of MapChart, not highlighting individual regions
This method does not work before map data is loaded. See onMapDataReady
Object itself
Boolean or number between 0 and 1, where 1 is fully highlighted.
Set highlight on mouse hover enabled or disabled.
Mouse interactions have to be enabled on the component for this to function as expected. See setMouseInteractions for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
Set mouse interactions enabled or disabled.
Disabling mouse interactions will also disable auto-cursor and triggering of events such as:
onMouseClick, onMouseMove.
Disabling mouse interactions can have a positive impact on performance.
Object itself for fluent interface
Specifies state of mouse interactions
Set FillStyle of outlier regions (parts of map that are visible, but not interactable with active map type).
// Example usage,
MapChart.setOutlierRegionFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of outlier regions (parts of map that are visible, but not interactable with active map type).
// Example usage,
MapChart.setOutlierRegionStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
Object itself
LineStyle or function which mutates the active LineStyle.
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 })
Object itself
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.
Set FillStyle of separate regions, which are visual components surrounding areas such as Alaska and Hawaii.
Separate regions are present in following Map types:
MapTypes.USA // Example usage,
MapChart.setSeparateRegionFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of Separate regions, which are visual components surrounding areas such as Alaska and Hawaii.
Separate regions are present in following Map types:
MapTypes.USA // Example usage,
MapChart.setSeparateRegionStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
Object itself
LineStyle or function which mutates the active LineStyle.
Set Stroke style of Map regions.
Example usage:
All Map regions edges are drawn with a stroke.
// Example, solid region stroke
MapChart.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
Regions edges are not drawn with a stroke.
Object itself
LineStyle or function which mutates the active LineStyle.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
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)
Chart itself
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
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'))
Chart itself
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example 1, specify vertical margins
ChartXY.setTitleMargin({ top: 0, bottom: 10 })
// Example 2, specify margins for all sides with same value for Title.
ChartXY.setTitleMargin(40)
Chart itself for fluent interface
Gap after the chart title in pixels.
Match legend entry style to reflect components own style.
By default, entries are assigned a smooth looking gradient based on the component color. If this flag is true, then this is skipped, and exact component solid fill is used instead.
Translate a coordinate in HTML client coordinate system to relative coordinates within the component.
const locationClient = { clientX: document.body.clientWidth * 0.2, clientY: document.body.clientHeight * 0.5 }
const locationRelative = chart.translateCoordinate(locationClient, chart.coordsRelative)
// locationRelative is in pixels relative to bottom left corner of the chart
Relative coordinates can be used for positioning LightningChart JS UI components:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
// Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 20, y: 20 })
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Translate a coordinate from relative control coordinates to HTML client coordinate system.
// 10 pixels left and 20 pixels up from controls bottom left corner
const locationRelative = { x: 10, y: 20 }
const locationClient = chart.translateCoordinate(locationRelative, chart.coordsRelative, chart.coordsClient)
Client coordinates can be used to absolute position HTML elements using CSS, for example.
myHTMLElement.style.position = 'absolute'
myHTMLElement.style.left = locationClient.clientX
myHTMLElement.style.top = locationClient.clientY
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Chart class for visualizing a Map of a selected part of the world. Defaults to the entire world.
MapChartcan be created in two different ways - to learn more about creation time configuration ofMapChart, please refer to:MapChart features
MapChartsupports 9 different map types, each of which depicts a different part of the world. Map types can also be split based on different types of regions, like countries, states, territories, provinces, etc.Supported map types:
MapTypes.World| Map of the whole world, regions as countries.MapTypes.Europe| Map of Europe, regions as countries.MapTypes.Africa| Map of Africa, regions as countries.MapTypes.Asia| Map of Asia, regions as countries.MapTypes.NorthAmerica| Map of North America, regions as countries.MapTypes.SouthAmerica| Map of South America, regions as countries.MapTypes.Australia| Map of Australia, regions as Australian territories.MapTypes.USA| Map of the United States of America, regions as states.MapTypes.Canada| Map of Canada, regions as Canadian territories and provinces.Map type is selected when the
MapChartis created, with thetypeargument:MapCharthas two style properties: region fill style and stroke style. The style is shared for all regions.Style is configured with
Dynamic region coloring is possibly by configuring fill style with PalettedFill.
Region values used for color look-up are configured with invalidateRegionValues. This method is very flexible and can be used in a variety of ways - refer to the method documentation for more examples.
MapCharthas built-in Cursor functionality, which is activated when user pointer is above any region.Auto cursor can be configured in a variety of ways:
Required resources:
MapChartrequires external file resources in order to work. These resources are distributed along with the LightningChart JS package (node_modules/@lightningchart/lcjs/dist/resources).In order to use
MapChartthe map resources need to be hosted on a file server. WhenMapChartis created, a GET request will be issued to URL:<resourcesBaseUrl>/maps/<mapDataFile>.The file server location can be specified by supplying a
resourcesBaseUrl, please see resourcesBaseUrl for general information and troubleshooting on LCJS resources.The following table documents which resource files are required based on used Map type:
MapTypes.World'countries_world.json'MapTypes.Europe'countries_europe.json'MapTypes.NorthAmerica'countries_northAmerica.json'MapTypes.SouthAmerica'countries_southAmerica.json'MapTypes.Africa'countries_africa.json'MapTypes.Asia'countries_asia.json'MapTypes.USA'states_usa.json'MapTypes.Canada'territoriesProvinces_canada.json'MapTypes.Australia'territories_australia.json'