In the Advanced Editor, the @settings
block can be used to tweak default settings and add all kinds of powerful features to your view.
The @settings
block supports all decoration properties listed in the property reference, as long as you prefix each property with one of the following:
*-
if you want to apply the rule to all itemselement-
to apply the rule to elements onlyconnection-
to apply the rule to connections onlyloop-
to apply the rule to loops only
But, @settings
also supports its own list of exclusive properties. The table below lists all properties that can be used exclusively inside an @settings
block, describes their effect on the view, and lists valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code
).
There are just few more things you should know about the valid values listed below:
Where you see... | You can use... |
---|---|
selector |
Any selector |
color |
Any CSS web color or hex color code |
number |
Any number |
'field name' |
The name of any of your fields, wrapped in single or double quotes |
element type |
Any text/string value |
All values are unitless.
<style> th:first-child { width: 200px; } td:nth-child(3) div:not(:first-child) { margin-top: 1.5rem; } </style>Property | Description | Possible values |
---|---|---|
attenuation | Determines whether elements and connections maintain their size relative to the background map (available for the Geo template only) | on off |
background-color | Sets the canvas' background color | color |
background-opacity | Sets the opacity of items outside of a showcased selection | 0..1 |
bridge | Activates bridging. See the bridge guide for more information. | element-selector |
cluster | Activates clustering. See the cluster guide for more information. | 'field name' element-selector by 'field name' element-selector by 'field name' as 'element type' |
culling | Determines whether elements and connections are hidden when the reader zooms in very close | on off |
focus | Activates focus. See the focus guide for more information. | selector out number |
font-cutoff | Sets the minimum font size at which labels will display when the map is zoomed out. Set to 0 to always display labels, regardless of zoom level. |
number |
foreground-opacity | Sets the opacity of showcased items | 0..1 |
geo-location | Sets the field that will be used to geo-locate elements | 'field name' string-template |
geo-style | Sets the style of the geo map | auto streets satellite |
ignore | Ignores a selection. See the filter guide for more information. | selector |
include | Includes a selection. See the filter guide for more information. | selector |
layout | Sets the layout type | force static scatter |
layout-bounds-xmax | Sets a maximum x coordinate that grid and guide lines can extend to | number |
layout-bounds-xmin | Sets a minimum x coordinate that grid and guide lines can extend to | number |
layout-bounds-ymax | Sets a maximum y coordinate that grid and guide lines can extend to | number |
layout-bounds-ymin | Sets a minimum y coordinate that grid and guide lines can extend to | number |
layout-gravity | Sets the gravity for the force-directed layout | number |
layout-grid | Determines whether a grid will be shown | on off |
layout-grid-color | Sets the color of the grid | color |
layout-grid-offset | Sets the space between grid lines | number |
layout-grid-width | Sets the thickness of grid lines | number |
layout-guide-color | Sets the color of guide lines | color |
layout-guide-width | Sets the thickness of guide lines | number |
layout-guides | Sets the x or y coordinate for each guide line, or the origin and radius of a circle | x(number) y(number) circle(x, y, r) circle(r) |
layout-particle-charge | Sets the particle charge for the force-directed layout | number |
layout-preset | Chooses a preset version of the force-directed layout | auto dense hairball |
layout-spring-length | Sets the spring length for the force-directed layout | number |
layout-spring-strength | Sets the spring strength for the force-directed layout | number |
layout-x | Sets the field used to determine elements' x coordinate in the scatter layout | 'field name' |
layout-x-multiplier | Sets a number that will be multiplied by each elements layout-x field to determine their final x coordinate |
number |
layout-y | Sets the field used to determine elements' x coordinate in the scatter layout | 'field name' |
layout-y-multiplier | Sets a number that will be multiplied by each elements layout-y field to determine their final y coordinate |
number |
notification-color | Sets the color of asterisks created by Issues | color |
profile | Controls whether or not profiles can be opened | on off |
quality | Sets the render quality | fast best |
radar | Determines whether a radar will be shown | on off |
radar-axes | Sets the labels for radar axes | Axis 1, Axis 2, Axis 3... |
radar-font-color | Sets the color of radar labels | color |
radar-font-family | Sets the font family of radar labels | family-name generic-family |
radar-font-size | Sets the font size for radar labels | number |
radar-ring-color | Sets the color between radar rings | color |
radar-ring-opacity | Sets the opacity of radar rings | 0..1 |
radar-ring-size | Sets the distance between radar rings | number |
radar-ring-size-inner | Sets the radius of the inner radar ring | number |
radar-rings | Sets the labels for radar rings | Ring 1, Ring 2, Ring 3... |
renderer | Chooses which rendered will be used | canvas webgl |
scale-max | Sets the maximum allowed zoom level | number |
scale-min | Sets the minimum allowed zoom level | number |
selection-color | Sets the color of the ring that appears around selected elements | color |
showcase | Activates showcase. See the showcase guide for more information. | selector |
template | Chooses a template | causal-loop custom geo sna stakeholder stock-and-flow systems systems-leverage |
theme | Sets the view's overall theme | light dark |