{% assign title = "Style" %} {% assign definition = site.data.data_mine.style %} {% assign preposition = "a" %} {% assign plural = "s" %} {% if include.more == "yes" and include.heading == "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %} {% if include.heading != "" and include.heading != "more" %} {{include.heading}} {{title}} {% endif %} {% if include.icon != "no" %} {% if include.table == "yes" and include.icon != "no" %}

{% endif %} {% if include.table == "yes" and include.icon != "no" %}

{% endif %} {% endif %} {% if include.definition == "bold" %} {{ definition }} {% else %} {% if include.definition != "no" %} {{ definition }} {% endif %} {% endif %} {% if include.table == "yes" and include.icon != "no" %}

{% endif %} {% if include.more == "yes" and include.content == "more" and include.heading != "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %} {% if include.content != "no" %} A style applied to a polygon body or a polygon border node acts as the default style. {% endif %} {% if include.more == "yes" and include.content != "more" and include.heading != "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %} {% if include.adding != "" %} {{include.adding}} Adding {{preposition}} {{title}} Node To add a style, select *Add Style* on a polygon border or polygon body node menu. {% endif %} {% if include.configuring != "" %} {{include.configuring}} Configuring the {{title}} Select *Configure Style* on the menu to access the configuration. A typical definition for a polygon body style looks like this: ```json { "default": { "opacity": 0.2, "paletteColor": "UI_COLOR.DARK_TURQUOISE" }, "atMousePosition": { "opacity": 0.3, "paletteColor": "UI_COLOR.DARK_TURQUOISE" } } ``` A typical definition for a polygon border style has a couple more properties: ```json { "default": { "opacity": 0.2, "lineWidth": 1, "lineDash": [0,0], "paletteColor": "UI_COLOR.DARK_TURQUOISE" }, "atMousePosition": { "opacity": 0.3, "lineWidth": 2, "lineDash": [0,0], "paletteColor": "UI_COLOR.RUSTED_RED" } } ``` The first section of the definition refers, as explicitly stated, to the default state of the style. The second section refers to the style assigned to the column or period on which the mouse pointer is located. This is very useful for highlighting the specific zone of interest as the user browses the charts. * ```opacity``` is probably self-explanatory: it may range from ```0``` for a fully transparent object to ```1``` for a solid object. * ```paletteColor``` sets the color for the *fill* or *stroke* in cases of polygon bodies and polygon borders respectively. Use the variable ```UI_COLOR``` followed by a ```.``` and any of the properties in the following list for a selection of currently available colors: | Variable Value | RGB Value | Color Sample | | :--- | :---: | :------------------- | | ```DARK``` | 48, 48, 54 |   | | ```LIGHT``` | 234, 226, 222 |   | | ```GREY``` | 150, 150, 150 |   | | ```LIGHT_GREY``` | 247, 247, 247 |   | | ```WHITE``` | 255, 255, 255 |   | | ```BLACK``` | 0, 0, 0 |   | | ```GOLDEN_ORANGE``` | 240, 162, 2 |   | | ```RUSTED_RED``` | 204, 88, 53 |   | | ```GREEN``` | 188, 214, 67 |   | | ```RED``` | 223, 70, 60 |   | | ```PATINATED_TURQUOISE``` | 27, 153, 139 |   | | ```TITANIUM_YELLOW``` | 244, 228, 9 |   | | ```MANGANESE_PURPLE``` | 91,80, 122 |   | | ```TURQUOISE``` | 74, 207, 217 |   | | ```DARK_TURQUOISE``` | 2, 149, 170 |   | * ```lineWidth``` is the width of the border line, which should be greater than 0. * ```lineDash``` is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space. {% include note.html content="When using dashed lines, bear in mind that the drawing from one column or period is independent of the next. Big values for dashes and spaces may not work well for lines that span several columns." %} {% endif %} {% if include.starting != "" %} {{include.starting}} Starting {{preposition}} {{title}} XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {% endif %} {% if include.more == "yes" %}

{% endif %}