Readonly attachedList of axes that are attached to the ZoomBandChart.
Readonly bandThe Band of the ZoomBandChart.
Readonly enginePublic, safe interface of rendering engine.
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 })
LegendBox
Optional builder: UILegendBoxBuilder<InternalBackground>LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional scale: UserScaleDefinitionOptional 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.
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Type of UIElement that is specified by 'builder'-parameter.
Optional uiElementBuilder: UIElementBuilder<UIElementType>Optional scale: LinearScaleXYOptional custom scale to position UIElement on. Defaults to whole component 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 = ...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
Dispose a Series reference from the ZoomBandChart.
This ensures that all resources that were previously allocated for this series instance are released for Garbage Collection.
Object itself.
Series object.
Get font of Chart title.
FontSettings object
Subscribe onDispose event.
This event is triggered whenever the Zoom BandChart is disposed.
// Example usage
zoomBandChart.onDispose(() => {
console.log('zoomBandChart was disposed')
})
zoomBandChart.dispose()
Token of subscription
Event handler function
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'
saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
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 fillStyle of panel background.
Object itself
FillStyle or function which modifies it
Set stroke style of panel background.
Object itself
LineStyle or function which modifies it
Set padding around Chart in pixels.
Object itself for fluent interface
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 style of Series of ZoomBandChart.
ZoomBandChart creates series automatically based on the Series attached to the ZoomBandCharts reference Axis, that is specified when it is created. This method lets the user specify a function that is called on each Series created by ZoomBandChart, allowing the full configuration of these Series.
Set text of Chart title.
Object itself for fluent interface.
Chart title as a string.
Set fill style of Chart Title.
Example usage:
// Create a new style
ZoomBandChart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
ZoomBandChart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
ZoomBandChart.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
ZoomBandChart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
ZoomBandChart.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 Margins after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example 1, specify complete margin for Title (four sides).
ZoomBandChart.setTitleMargin({ left: 16, right: 16, top: 32, bottom: 8 })
// Example 2, specify only single margin for Title.
ZoomBandChart.setTitleMargin({ right: 64 })
// Example 2, specify margins for all sides with same value for Title.
ZoomBandChart.setTitleMargin(40)
Chart itself for fluent interface
Gap after the chart title in pixels.
Chart that is attached to a single Axis of a ChartXY.
It shows a compilation of all data from all Series that are attached to that Axis, and allows the user to configure the view of the attached Axis easily by interacting with a Band on the ZoomBandChart.
Created with createZoomBandChart.