Public, safe interface for Panels rendering engine.
Scale for panel area in pixels. Margin should be set according to panel margin (currently constant).
Scale for panel area in percentages (0-100). Margin should be set according to panel margin (currently constant).
Add a stand-alone LegendBox using a builder.
Type of UIElement that is specified by 'builder'-parameter.
LegendBoxBuilder. If omitted, HorizontalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional custom scale to position LegendBox on. Defaults to whole chart in percentages [0, 100].
LegendBox that fulfills interfaces: UIElementType (typeparam) and UIElement
Add a stand-alone UIElement using a builder.
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional custom scale to position UIElement on. 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 = ...Gauge()
let slice = chart.getDefaultSlice()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
slice = undefinedObject itself for fluent interface
Get the angular interval of the gauge.
Angle interval object {min, max} in degrees.
Gets if animations are enabled or not.
Boolean state for animations enabled
Get the current state of the Auto Scaling mode.
True - autofit is enabled, otherwise - False.
Get fillstyle of chart background.
FillStyle
Get stroke style of chart background.
LineStyle
Get Fill Style of Gauge Data Label.
FillStyle object
Get font of Gauge Data Label.
FontSettings object for gauge data label.
Get the formatter for the Data label.
Number formatter object.
Get the slice of the gauge.
Solid Gauge Slice object for further modification.
Get the formatter for the scale labels.
Number formatter object.
Get padding around Chart in pixels.
Padding datastructure
Get the minimum size of the chart.
Size {x, y} or undefined
Get padding around Chart in pixels.
Padding datastructure
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
Remove listener with provided token.
Token of the listener.
True if the listener is successfully removed and false if it is not found.
Remove event listener from resize event.
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Subscribe to Gauge Angle Change event.
Token of the listener.
Subscribe to resize event of Panel.
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.
Set angular interval of the gauge in degrees.
Start angle of the gauge in degrees.
End angle of the gauge in degrees.
Gauge itself for fluent interface.
Sets if animations are enabled or not.
Boolean state for animations enabled
Gauge itself for fluent interface.
Set the Auto Scaling mode enabled or disabled.
True - autofit is enabled, otherwise - False.
Gauge itself for fluent interface.
Set fillStyle of panel background.
FillStyle or function which modifies it
Object itself
Set stroke style of panel background.
LineStyle or function which modifies it
Object itself
Apply new fill style to Gauge Data label.
FillStyle or mutator to modify the existing one.
Gauge itself for a fluent interface.
Set font of Gauge Data Label.
Example usage:
// Specified FontSettings
SolidGauge.setDataLabelFont(new FontSettings({ size: 24, style: 'italic' }))
// Set to bold
SolidGauge.setDataLabelFont((fontSettings) => fontSettings.setWeight('bold'))Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Gauge itself for fluent interface.
Set a new number formatter for the Data label.
Number formatter
Gauge itself for fluent interface.
Apply new fill style to slice arc.
FillStyle or mutator to modify the existing one.
Gauge itself for fluent interface.
Set stroke of gauge background
LineStyle or mutator to modify the existing one.
Gauge itself for fluent interface.
Set a new number formatter for the scale labels.
Number formatter
Gauge itself for fluent interface.
Set padding between Gauge and interval labels in pixels.
Number with pixel margin
Gauge itself for fluent interface.
Set lookup table.
Example usage:
// Gauge slice color depending on value
SolidGauge.setLUT(new LUT ( { steps: [ { value: 0, color: ColorRGBA( 0, 0, 0 ) },
{ value: 500, color: ColorRGBA( 12, 213, 87 ) } ],
interpolate: true })Lookup table |
Gauge itself for fluent interface
Set padding around Chart in pixels.
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 thickness of the gauge.
Gauge itself for fluent interface.
Set text of Chart title.
Chart title as a string.
Object itself for fluent interface.
Set fill style of Chart Title.
Example usage:
// Create a new style
Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
Chart.setTitleFillStyle(emptyFill)Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Chart itself
Set font of Chart Title.
Example usage:
// Create a new FontSettings
Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Chart itself
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
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).
Gap between the top of chart and its title in pixels.
Chart itself for fluent interface
The Gauge Chart with a single solid colored slice.
Solid Gauge extends Radial Gauge. Use GaugeChart.setAngleInterval(start: number, end: number)** to set angular appearance of the Chart.
Before setting the data, request the slice using GaugeChart.getDefaultSlice() Set data range using GaugeChart.setInterval(start: number, end: number) Set data using GaugeChart.setValue(value: number)