Chart Component

Configuration Options
Chart Configuration
Theme Options


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


Expected Type: String

The title for the chart. (Shows up above the visualisation)


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.


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


  • 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)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →