Readonly categoryReference to the Category Axis of bar chart.
Readonly coordsSelector for coordinate system of the Bars.
This selector can be used for translating locations relative to Bars 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 "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 pixels.
Deprecated since v4.2.0. Use coordsRelative instead. It works exactly the same.
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).
Readonly valueReference to the Value Axis of bar chart.
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].
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 = ...BarChart()
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 reference to charts AutoCursor.
See AutoCursor for all available methods for configuring the AutoCursor.
AutoCursor.
Get AutoCursor behavior, from a collection of preset options (AutoCursorModes).
Active selection of AutoCursor behavior.
Get reference to a particular BarChartBar.
The match is done against the category of bars and optionally also with subCategory.
// Example
barChart.setData([
{ category: 'Category 1', value: 10 },
{ category: 'Category 2', value: 12 },
])
const bar = barChart.getBar('Category 1')
// Example, grouped bar chart
barChart.setDataGrouped(
['Cat 1', 'Cat 2'],
[
{ subCategory: 'Scat 1', values: [10, 20] },
{ subCategory: 'Scat 2', values: [5, 6] },
]
)
const bar = barChart.getBar('Cat 1', 'Scat 2')
This method throws an error if the Bar is not found or input arguments are ambiguous (for example, stacked bar chart and sub category wasn't supplied).
Reference to the BarChartBar with matching category.
Category that is attempted to match against existing bars.
Optional subCategory: stringSub category that is attempted to match against existing bars.
Get reference to all currently existing BarChartBars.
Array with all existing BarChartBar references.
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 margin around each bar along category axis as percentage of the bar thickness.
For example, 0.1 = on both left and right side of bar there is a 10% margin.
Actual thickness of bar depends on chart size, but for 100 px bar that would be 10 px + 10 px margin.
Valid value range is between [0, 0.49].
Margin around each bar along category axis as percentage of bar thickness.
Get current category labels configuration.
BarChartCategoryLabels object or undefined if labels are hidden.
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 series of a chart
Array of series
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 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
Get current value labels configuration.
BarChartValueLabels object or undefined if labels are hidden.
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 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 inViewChange event.
This event is triggered when the chart transitions from being off-screen to being on-screen and vice versa.
Token of subscription
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 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
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.
Enable/disable animation of bar category positions. This is enabled by default.
// Example, disable category position animation.
BarChart.setAnimationCategoryPosition(false)
Object itself.
Boolean
Optional multiplier for category animation speed. 1 matches default speed.
Enable/disable animation of bar values. This is enabled by default.
// Example, disable value animation.
BarChart.setAnimationValues(false)
Object itself.
Boolean
Optional multiplier for animation speed. 1 matches default speed.
Disable/Enable all animations of the Chart.
Chart itself for fluent interface.
Boolean value to enable or disable animations.
See AutoCursor for all available methods for configuring the AutoCursor.
Example usage:
// Example 1, style AutoCursor ResultTable.
barChart.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 2, style AutoCursor PointMarker.
barChart.setAutoCursor((autoCursor) => autoCursor
.setPointMarker((marker) => marker
.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
.setSize({ x: 10, y: 10 })
.setStrokeStyle(emptyLine),
),
)
Object itself for fluent interface.
Callback function that receives reference to the charts AutoCursor.
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. NOTE: Series mouse interactions must be enabled for this to work!AutoCursorModes.disabled | AutoCursor is disabled // Example, disable AutoCursor
barChart.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.).Object itself for fluent interface.
Selection of AutoCursor behavior.
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.
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 margin around each bar along category axis as percentage of the bar thickness.
For example, 0.1 = on both left and right side of bar there is a 10% margin.
Actual thickness of bar depends on chart size, but for 100 px bar that would be 10 px + 10 px margin.
Valid value range is between [0, 0.49].
// Example, no margin between bars.
BarChart.setBarsMargin(0)
// Example, increased space between bars.
BarChart.setBarsMargin(0.20)
Object itself.
Margin around each bar along category axis as percentage of bar thickness.
Configure how category labels are displayed in the BarChart.
To see all configuration options, see BarChartCategoryLabels.
To display labels inside or after bars, see setValueLabels.
// Example, hide labels
barChart.setCategoryLabels(undefined)
// Example, change label color
barChart.setCategoryLabels({
labelFillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
})
// Example, change label font size. In this case, the previous label configuration is used as a reference so callback function is convenient.
barChart.setCategoryLabels((labels) => ({
labelFont: labels.labelFont.setSize(10)
}))
// Example, configure formatting
barChart.setCategoryLabels({
formatter: (bar, category, value) => `${category} (${(value / 1000).toFixed(1)} k€)`,
})
Object itself.
undefined to hide labels, or alternatively a valid BarChartCategoryLabels configuration OR a callback function which receives the current label configuration and returns a new one to use.
Set ResultTable formatter. Can be used to specify the information that is displayed, when hovering mouse/pointer over a Bar.
// Example usage
barChart.setCursorResultTableFormatter((builder, category, value, bar) => builder
.addRow('Category:', '', category)
.addRow('Value:', '', bar.chart.valueAxis.formatValue(value))
)
Object itself
Function which builds ResultTable content. See definition of BarChartResultTableFormatter for supplied formatting information.
Set BarChart data, updating the visible bars.
This method signature takes in an array of objects with category and optional value properties.
// Example usage
barChart.setData([
{ category: 'Category 1', value: 10 },
{ category: 'Category 2', value: 12 },
])
In use cases with real-time updates, the recommended way to push value updates to existing bars is to call setData again.
See also: setDataStacked setDataGrouped
Object itself
Array of objects with category and value properties.
Set BarChart data, updating the visible bars.
This method signature takes a single object that can have any number of keys. Each key is interpreted as a category, and the respective value as the bar value.
// Example usage
barChart.setData({
'Category 1': 10,
'Category 2': 12,
})
In use cases with real-time updates, the recommended way to push value updates to existing bars is to call setData again.
See also: setDataStacked setDataGrouped
Object itself
Object with string keys and number values.
Set BarChart data, updating the visible bars.
This method signature takes an array of numbers, where each number is a value for a bar. In this case, each bar is just assigned an automatic category like "Category 1".
// Example usage
barChart.setData([10, 12])
In use cases with real-time updates, the recommended way to push value updates to existing bars is to call setData again.
See also: setDataStacked setDataGrouped
Object itself
Number array of bar values.
Set BarChart data, updating the visible bars.
This method signature takes in an array of strings as Categories, without any Values. It can be used to initialize the categories before data is available, for example to show the bars in a LegendBox:
// Data is not yet available, but prepare legend.
barChart.setData(categories)
const legend = barChart.addLegendBox().add(barChart)
See also: setDataStacked setDataGrouped
Object itself
Array of strings as categories
Beta
Set BarChart data, updating the visible bars.
This method accepts data for a Grouped Bar Chart, displaying it as such.
BarChart.setDataGrouped(
['category 1' , 'category 2'],
[
{ subCategory: 'sub category 1', values: [1, 2] },
{ subCategory: 'sub category 2', values: [3, 4] },
{ subCategory: 'sub category 3', values: [5, 6] },
]
)
See also: setData setDataStacked
Released to public beta in v5.1.0. May be reworked according to customer feedback and experiences.
Beta
Set BarChart data, updating the visible bars.
This method accepts data for a Stacked Bar Chart, displaying it as such.
BarChart.setDataStacked(
['category 1' , 'category 2'],
[
{ subCategory: 'sub category 1', values: [1, 2] },
{ subCategory: 'sub category 2', values: [3, 4] },
{ subCategory: 'sub category 3', values: [5, 6] },
]
)
See also: setData setDataGrouped
Released to public beta in v5.1.0. May be reworked according to customer feedback and experiences.
Enable or disable automatic label fitting.
This is enabled by default.
// Example, disable automatic label fitting
barChart.setLabelFittingEnabled(false)
Object itself.
true or false.
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 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 FillStyle of series background (area behind series).
// Example usage,
ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 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 series background border stroke.
// Example usage,
ChartXY.setSeriesBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle or function which mutates the active LineStyle.
Set the state for all Series in the Chart to highlight on mouse hover.
Object itself for fluent interface.
True if all Series should be highlighted on mouse hover, false if not.
Configure automatic sorting of bars.
The default value is BarChartSorting.Descending.
// Example, disable sorting
barChart.setSorting(BarChartSorting.None)
// Example, ascending sorting
barChart.setSorting(BarChartSorting.Ascending)
// Example, descending sorting
barChart.setSorting(BarChartSorting.Descending)
// Example, alphabetical sorting
barChart.setSorting(BarChartSorting.Alphabetical)
// Example, custom sorting (ascending implementation)
barChart.setSorting((a, b) => a.value - b.value)
Object itself.
Sorting function or undefined to disable sorting.
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 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.
Configure how value labels are displayed in the BarChart.
There are a handful of different value label positioning types in BarChart, which you can find in BarChartValueLabels.
Labels can also be separately displayed before bars on the other side of category axis, see setCategoryLabels.
// Example, hide labels
barChart.setValueLabels(undefined)
// Example, display value labels after bars
barChart.setValueLabels({
position: 'after-bar'
})
// Example, display value labels inside bars with black color
barChart.setValueLabels({
position: 'inside-bar',
labelFillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) })
})
// Example, change label font size. In this case, the previous label configuration is used as a reference so callback function is convenient.
barChart.setValueLabels((labels) => ({
labelFont: labels.labelFont.setSize(10)
}))
// Example, configure formatting
barChart.setValueLabels({
formatter: (bar, category, value) => `${category} (${(value / 1000).toFixed(1)} k€)`,
})
Object itself.
undefined to hide labels, or alternatively a valid BarChartValueLabels configuration OR a callback function which receives the current label configuration and returns a new one to use.
NOTE: BarChart does not support this method. You can track when mouse moves over a bar using mouse enter events, etc. onMouseEnter.
Solves the nearest data-point from series inside Chart of a given coordinate on screen
Undefined or data-structure for positioning of markers (and cursors)
This method signature is deprecated since v4.2.0. Supply CoordinateClient instead.
Optional location: PointLocation on screen or omit for cur mouse location
NOTE: BarChart does not support this method. You can track when mouse moves over a bar using mouse enter events, etc. onMouseEnter.
Method for solving the nearest data point from all existing series relative to a given coordinate on screen.
// Example usage, from mouse move event.
barChart.onSeriesBackgroundMouseMove((_, event) => {
const result = barChart.solveNearest(event)
})
// Example usage, arbitrary coordinate on client coordinate system.
const result = barChart.solveNearest({ clientX: 100, clientY: 200 })
Translating coordinates from other coordinate systems is also possible, see translateCoordinate.
undefined or data structure with solve result information that can also be used for positioning custom cursors.
Optional location: CoordinateClientLocation in HTML client coordinates.
Translate a coordinate in HTML client coordinate system to another coordinate system.
(1) bars coordinate system:
BarChart.onSeriesBackgroundMouseClick((_, event) => {
const locationBars = chart.translateCoordinate(event, chart.coordsBars)
// locationBars tells the clicked location relative to Bar Chart value and category axes.
})
(2) relative control coordinate system:
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 in Bars coordinate system to another coordinate system.
(1) HTML client coordinate system:
const locationBars = { iCategory: 0, value: 100 }
const locationClient = chart.translateCoordinate(locationBars, chart.client)
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
(2) relative control coordinate system:
const locationBars = { iCategory: 0, value: 100 }
const locationRelative = chart.translateCoordinate(locationBars, 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 another 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.
})
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 type for visualizing categorical data as Bars. Supports Positive and Negative data sets (baseline 0), and Bipolar data sets. These are automatically detected.
BarChartcan be created in two different ways - to learn more about creation time configuration ofBarChart, please refer to:BarChart features
BarCharthas a Category Axis and Value Axis. These can be referenced with categoryAxis and valueAxis properties. For their available APIs, see BarChartCategoryAxis and BarChartValueAxis respectively.BarChartsupports a handful of different syntaxes for data input. See setData for more details.Auto cursor is activated when the users mouse is over a bar. It displays information about the hovered bar to the user over the chart in a result table.
Auto cursor can be configured in a variety of ways;
BarCharthas built-in legend box functionality for listing the bars in a user interface. The legend box also provides additional logic, like hiding selected series by clicking on the legend box.Legend box is added using addLegendBox.
BarCharthas a built-in title component, which can be configured using setTitle.BarChartcontains two separate background components:Custom UI elements can be placed on
BarChartin same way as all other charts, using addUIElement.BarCharthas built-in sorting functionality, which can be configured with setSorting.Each bar in
BarChartcan be individually styled. See BarChartBar for more details.Other APIs worthy of mention:
BarChartcan be configured with setPadding.BarChartcan be removed permanently with dispose.