Public, safe interface for Panels rendering engine.
Scale for panel area in pixels.
Scale for panel area in percentages (0-100).
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 })
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.
This method is used for the adding slices in the funnel chart.
Funnel slice title
funnel slice value
This method is used for the adding multiple slices in the funnel chart.
Array of slices
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.
All animations have to be re-enabled individually if you wish to re-enable animations.
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 = ...Funnel()
let slice = chart.addSlice({name: 'name', value: 50})
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
slice = undefined
Object itself for fluent interface
Gets if animations are enabled or not.
Boolean state for animations enabled
Get fillstyle of chart background.
FillStyle
Get stroke style of chart background.
LineStyle
Get FunnelSliceMode. Can be used to select between different drawing approaches for Slices.
See FunnelSliceModes for a collection of options.
FunnelSliceMode
Get Funnel Head Width
number (0 - 100)
Get fill style of Funnel Slice Labels.
FillStyle object
Get font of Slice Labels.
FontSettings
Get formatter of Slice Labels.
SliceLabelFormatter - function which generates text of Labels per Slice.
Get Funnel Neck Width
number (0 - 100)
Get padding around Chart in pixels.
Padding datastructure
Get style of Funnel Slices fill. This style is managed as a continuous Palette of FillStyle objects. Each Slice of Funnel will be assigned an incremental index, which will be used to pick its fill style from this Palette.
So, for example... We have a Funnel Chart with 5 Slices, and we give it a Palette with only 3 possible values (0 = red, 1 = green, 2 = blue). The resulting Slice fill styles will be: red, green, blue, red, green. Note that this means, that the supplied Palette will have to work in a continuous manner!
Palette
Get sorter of Funnels' Slices as a comparator-function.
SliceSorter - function which sorts Slices of Funnel with JavaScript API: Array.sort.
Get style of Funnel Slices Stroke.
LineStyle object
Get all Slices of Funnel Chart. NOTE: Manual modifications to returned Array can have unforeseen side-effects. Removing or adding Slices is intended to be done using other APIs (FunnelChart.addSlice, Slice.dispose, ...)
Array of Slices
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
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 dispose 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 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
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()
Handler function for event
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)
})
Handler function for event
Token of subscription
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.
Sets if animations are enabled or not.
Boolean state for animations enabled
Funnel Chart itself
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) }))
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 Funnel Head Width
Funnel Head Width range from 0 to 100
Funnel Chart itself
Attach lookup table (LUT) to fill the slices with Colors based on value.
The color for the slice would be selected from a specified LUT, which contains the information about gradient steps. After setting LUT to undefined all the slices stay colorized, but no further lookup.
LUT class stores information about values and its associated colors,
const funnel = lightningChart()
.Funnel( { type: FunnelChartTypes.LabelsOnSides } )
.setLUT( new LUT (steps: [
{ value: 10, color: ColorRGBA( 0, 0, 0 ) },
{ value: 20, color: ColorRGBA( 30, 255, 0 ) },
{ value: 30, color: ColorRGBA( 60, 204, 0 ) },
{ value: 40, color: ColorRGBA( 90, 128, 0 ) },
{ value: 50, color: ColorRGBA( 255, 0, 0 ) } ) ],
interpolate: true } )
Pie itself for fluent interface
Set fill style of Funnel Slices Labels.
FillStyle object or function which creates a new style based on previous
Funnel Chart itself
Set font of Slice Labels.
FontSettings or mutator function for existing settings
Funnel Chart itself
Set formatter of Slice Labels.
See SliceLabelFormatters for a collection of default options.
SliceLabelFormatter - function which generates text of Labels per Slice.
Funnel Chart itself
Set Funnel Neck Width
Funnel Neck Width range from 0 to 100
Funnel Chart 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 style of Funnel Slices fill. This style is managed as a continuous Palette of FillStyle objects. Each Slice of Funnel will be assigned an incremental index, which will be used to pick its fill style from this Palette.
So, for example... We have a Funnel Chart with 5 Slices, and we give it a Palette with only 3 possible values (0 = red, 1 = green, 2 = blue). The resulting Slice fill styles will be: red, green, blue, red, green. Note that this means, that the supplied Palette will have to work in a continuous manner!
Funnel Chart itself
Set gap between Slice / start of label connector, and end of label connector / Label.
Gap as pixels. Clamped between [0, 20] !
Funnel Chart itself
Set if slices should be highlighted on mouse hover / touch. Applies to all Slices.
True if Slices should be highlighted on hover, false if not. This applies to all existing Slices and new Slices added.
Set FunnelSliceMode. Can be used to select between different drawing approaches for Slices.
See FunnelSliceModes for a collection of options.
FunnelSliceMode
Funnel Chart itself
Set sorter of Funnels' Slices as a comparator-function.
For some commonly needed default implementations, can refer to SliceSorters-collection.
SliceSorter - function which sorts Slices of Funnel with JavaScript API: Array.sort.
Funnel Chart itself
Set style of Funnel Slices Stroke.
LineStyle object or function which creates a new style based on previous
Funnel Chart itself
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
Abstract base class for Funnel Charts. Visualizes proportions and percentages between categories, by dividing a funnel into proportional segments.
Set data using FunnelChart.addSlice( name: string, value: number )
There are multiple implementations of FunnelChart, each with their own visual design and API for customizing it. List of selectable options can be found in: FunnelChartTypes