Chart
With the Chart
component you can easily create graphs or charts to visualize and interpret your data. Our default properties offer enough configurability to quickly create basic chart types like line, area and bar charts. For users with more advanced needs, we added the ability to create fully customizable visualizations by using the plotly.js API with which the theme of the chart can be adapted to your branding and even sophisticated 3-dimensional graphs can be created.
Data structure
The Chart
component expects one of three specific JSON structures.
In the following, we demonstrate this based on our default data that contains three data series as columns in a table:
x | y1 | y2 |
---|---|---|
1 | -5 | 20 |
2 | 20 | 10 |
3 | 10 | 5 |
4 | 14 | 2 |
5 | 9 | 22 |
1. Object of arrays
Each key represents the name of the data series and each value the content of the data series.
2. Array of objects
Each object in the array represents a single data point with all it's dimensions.
3. Table structure
This is the usual structure that is returned for an query action and the very same structure we use for our Table
component. If you have an action that fetches data right from your data source, you can, thus, simply input actionName.data
and it will populate your chart component.
Note that any data series can be chosen as the x-axis value. We will, by default, infer a suitable x-axis value from the provided data for you. Regardless, all data series can be added to the y-axis.
Data properties
Property | Type | Default value | Behavior |
---|---|---|---|
Data |
| Example as shown in data structures. | |
Type |
|
| Defines that type of the chart in which the provided data should be presented. Additional chart types can be used when using the Plotly configuration. |
Orientation |
|
| For the bar chart, there is an additional property that defines the orientation of the chart. |
X-Axis field |
|
| Contains all data series from the provided data. In the dropdown, the data series that should represent the x-axis can be selected. For the pie chart, the x-axis field reflect the labels. |
Data series |
|
| Represents the data series on the y-axis of the chart. Additional data series can be added via "Add data series". Each data series has some configurable properties themselves (see below). |
Data series properties
Each data series possesses some properties of their own:
Property | Type | Default value | Behavior |
---|---|---|---|
Name |
| inferred | Name of the data series. |
Y-Axis field |
| inferred | Contains all data series from the provided data. It allows you to select the data that should be associated with your data series. |
Color |
| inferred | The color of the trace (line, bar, etc.) of your data series. |
Aggregation - Enabled |
|
| For data points that don't have unique x-axis values, this allows you to aggregate them into a single y-axis value. Note: Aggregation is not supported by the pie chart. |
Aggregation - Method |
|
| If aggregation is enabled, this input defines how the data series should be aggregated. E.g. if we choose |
As mentioned above, we provide some basic customization options for the user to create their first chart quickly. Beyond that, the user has the choice to fully customize their chart using plotly.js's API. Therefore, we offer a Mode
switch to quickly switch between our form-based configuration and Plotly's JSON configuration format. When you switch from the form-based input to the JSON configuration, all specifications that were made in the form are synced to/reflected in the JSON.
We recommend to review their documentation to specify exactly what you need.
Layout properties
Property | Type | Default value | Behavior |
---|---|---|---|
Title |
|
| Defines the title of the chart. |
Show legend |
|
| Determines if a legend is displayed in the chart component. |
Legend position |
|
| If a legend is displayed, this property determines its position. |
X-Axis - Title |
|
| Defines the title placed next to the x-axis. |
X-Axis - Show labels |
|
| Determines if the labels are displayed on the x-axis. |
X-Axis - Show grid |
|
| Determines if the grid (grid lines and axis) is shown for the x-axis. |
Y-Axis - Title |
|
| Defines the title placed next to the y-axis. |
Y-Axis - Show labels |
|
| Determines if the labels are displayed on the y-axis. |
Y-Axis - Show grid |
|
| Determines if the grid (grid lines and axis) is shown for the y-axis. |
Users that prefer to customize the layout and appearance of their chart can use Plotly's JSON configuration format. The Custom
configuration is conveniently accessible via the Mode
switch. When you switch from the form-based input to the JSON configuration, all specifications that were made in the form are synced to/reflected in the JSON.
We recommend to review their documentation to specify exactly what you need.
Events
Chart
does not offer any events.
API
Property | Type | Behavior |
---|---|---|
|
| Returns the data underlying the chart in a unified format, including the x-axis input and all data series. This is required since we allow different structures as data input. |
Last updated