HighChart
The HighChart widget displays an interactive chart rendered by the Highcharts library.
Build bar, line, gauge, and other charts from a JSON definition and variables to visualize your data.
This widget is locked on the Free plan and available on the Pro and Enterprise plans.
Definition and role
The HighChart widget renders a Highcharts chart in an internal webview. You compose the data from a chart definition (JSON options) and a list of variables. The editor shows a placeholder box, and the real chart is drawn at run time.
- Category: Contents
- Chart engine: Highcharts
Features
| Feature | Description |
|---|---|
| Interactive chart | Draws a Highcharts-based chart in a webview. |
| Data variable binding | Connects data to the variables declared in the chart definition to fill in values. |
| Background color | Sets the background color of the chart area. |
| Loading indicator | Controls whether a loading indicator appears while the chart loads. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the HighChart item onto the canvas.
- In the Properties panel on the right, set the chart data (
Highchart Data) to define the chart you want to show. - If you need to, adjust the background color (
bgColor) and the loading indicator (showLoadingBar).
Properties
| Property | Description | Default | Values / type |
|---|---|---|---|
bgColor | Background color of the chart area (opaque RGB only - transparency and alpha values are ignored) | Not set | Color |
Highchart Data | Chart definition data (JSON options plus a list of variables) | Empty data | Chart data |
showLoadingBar | Whether to show an indicator while the chart loads | false (hidden) | True / false |
Notes and tips
Declare variables in your chart data, then change their values from a script to redraw the chart.
To show a loading indicator while the chart loads, turn on showLoadingBar. It is off by default, so no loading indicator appears unless you set it.
Learn more
For the full set of Widget Control members (Property, Method, Event) that drive this widget from a script, see HighChart Widget Control.