# StyleCode sub-language

Envision contains a sub-language called StyleCode, specifically dedicated to dealing with tiles appearance. It allows to precisely set up the style of all elements contained in a tile. StyleCode’s snippets can be easily introduced within an Envision code, inside curly brackets and using semicolons to delimit attributes (e.g., {textColor: tomato; unit: "€"}).

## Hierarchy and properties

A dashboard is primarily divided into tiles. Each tile contains some sub-elements such as title or legend, depending on the tile type. Finally, these ones includes different types of content (e.g. value or name).

### Tiles

Here is a description of all types of tiles that can appear in a dashboard, along with their supported sub-elements:

• assert tile: introduced by show assert
• barchart tile: introduced by show barchart
• chart tile: introduced by show chart
• error tile: generated by various show statements when placed in invalid conditions
• form tile: created with show form
• histogram tile: created with show histogram
• series of the values to be displayed
• haxis the horizontal axis that contains a value
• title of the tile
• label tile: created with show label
• linechart tile: created with show linechart
• series (time-series) of the values to be displayed; the number of series is statically defined in the script
• legend: appears at the bottom of the tile
• title of the tile
• logo tile: created with show logo
• markdown tile: created with show markdown
• menu tile: created with show menu
• piechart tile: created with show piechart
• series of values associated to the pie slices
• legend: appears to the right of the tile
• title of the tile
• plot tile: created with show plot
• series of values for each data series
• haxis the horizontal axis that contains a value
• legend: appears at the bottom of the tile
• title of the tile
• scalar tile: created with show scalar
• entry: one single pair name-value
• scatter tile: created with show scatter
• series of values for each data series
• haxis the horizontal axis that contains a value
• legend: appears at the bottom of the tile
• title of the tile
• slicepicker tile: created with show slicepicker
• summary tile: created with show summary
• entry: the number of entries is statically defined in the script
• title of the tile
• table tile: created with show table
• column: the number of columns is statically defined in the script; all rows are displayed, including headers;
• tabs tile: created with show tabs
• treemap tile: created with show treemap
• upload tile: created with show upload

### Sub-elements

Most tiles contain data vectors defined in the with section of the Envision script. They are called columns in tables tiles, entries in summary tiles, while in in other tiles they are called series.

• column represents a data vector in a table tile, and then supports the property as
• entry: a combination of a value and its name; for summary tiles, it corresponds to a data vector and so supports the as property
• legend: displays associations between series and their colors or values
• series: represents a data vector, supports the as property and follows the plot color pipeline
• title follows the text pipeline
• haxis: The first data column of chart tiles is describing horizontal values, and has special stylecode properties that can tune it.

## List of properties

A full list of stylecode properties is available here. We provide there an overview of all properties that can be tuned through StyleCode to customize elements appearance. Each element inherits all the properties specified for its parent, which can then be overwritten by specifying different values for the element.