ChartJs
The ChartJs component allows you to display a ChartJs using the Chart.js library.
The following section details ChartJs component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:
App Editor Documentation
The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.
Apps Quickstart
Learn how to build your first app in a matter of minutes.
The configuration is divided into two parts: X-axis data and an array of datasets. Each dataset hold the data for the Y-axis and the configuration for the plot (type, color, etc).
Configuration
| Name | Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|---|
| X-axis data | json | true | false | [1, 2, 3, 4] | Horizontal axis values or labels that are used to plot the data points on a chart. |
Dataset
For each dataset, you can specify the data for the Y-axis and the configuration for the plot (type, color, etc). If you want to have an eval for every data point, you can switch to JSON mode. There can be several datasets.
| Name | Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|---|
| Name | string | false | false | Dataset 1 | The name of your dataset. |
| Data | json (int) | true | false | [25, 25, 50] | The actual data of your chart. |
Configuration
| Name | Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|---|
| Type | select | true | false | pie | The type of chart (bar, bubble, doughnut, line, pie, polarArea, radar, scatter). |
| Options | json | true | false | ChartJs options object. |