Introduction
The chart component can be used to display a variety of different data visualisations. Currently only line and bar charts are supported with more on the way!
Configuration Options
Label
Expected Type: String
The title for the chart. (Shows up above the visualisation)
Datasource
Expected Type: Array | List
The datasource powering the visualization. Must be a list of items.
Chart Configuration
Chart Type
Expected Type: Line | Bar
The type of visualization to use.
Plots
Each plot is separate set of datapoints visualized on the chart. For example, in Line charts each plot results in a new line. Each line is then plotted on the same chart overlayed on top of each other.
Creating a plot
Click on + Plot under the chart configuration section to create a new plot. Each plot can be configured with the following properties:
| Property | Description | Type | Example |
|---|---|---|---|
| X Axis | The key from you datasource item to use for the X Axis. | String |
timestamp |
| Y Axis | The key from you datasource item to use for the Y Axis. | String |
count |
Triggers
Click:Triggers whenever the chart is clicked.Double Click:Triggers whenever the chart is clicked twice in quick succession.Right Click:Triggers whenever the chart is right-clicked.Mouse Enter:Triggers whenever the mouse starts hovering over the component.Mouse Leave:Triggers whenever the mouse stops hovering over the component.
Theme Options
Title Align:The title's text alignment. (Number | Pixels)Title Color:The title's text color. (String | Hex)Title Style:The title's text style. (Bold | Italic | Underline)Text Size:The title's text size. (Number | Pixels)Padding:The chart's padding. (Number | Pixels)Shadow:The chart's shadow. (Shadow)Border:The chart's border. You can also specify the radius for the edges. (Border)Background Color:The chart's background color. (String | Hex)