What You Can Change

With the Entity Selector, you can change the styles relating to the text, and the line that separates each entity. The check boxes, search boxes, and drop-down list will remain the inherited grey colour (#737373).

1. Base Style: Style the text that appears in the list.

• Entity Selector Font Size
• Entity Selector Font Family
• Entity Selector Font Colour
• Entity Selector Font Weight
• Entity Selector Font Alignment
• Entity Selector Underline
• Entity Selector Text Case

2. Entity Separator: Style the line that separates the text.

• Entity Selector Line Colour
• Entity Selector Line Size
• Entity Selector Line Style

EXAMPLE: Changing the text in the entity list and filter

EXAMPLE: Changing the separator lines in the entity list

What You Can Change

With the Hierarchy you can change the styles relating to the text in the tree list. The filter will remain the inherited grey colour.

1. Hierarchy Font Style: Style the text that appears in the list.

• Hierarchy Font Size
• Hierarchy Font Family
• Hierarchy Font Colour
• Hierarchy Font Weight
• Hierarchy Font Alignment
• Hierarchy Underline
• Hierarchy Text Case

EXAMPLE: Changing the text in the tree list

What You Can Change

With the Hierarchy Picker you can change the styles relating to the text, alignment, and the line below the drop-down list. The drop-down arrow will remain the inherited dark grey colour.

1. Hierarchy Picker Bottom Border: Style the line below the drop-down list.

• Hierarchy Picker Line Colour
• Hierarchy Picker Line Size
• Hierarchy Picker Line Style

2. Hierarchy Picker Font: Style the text that appears in the list.

• Hierarchy Picker Font Size
• Hierarchy Picker Font Family
• Hierarchy Picker Font Colour
• Hierarchy Picker Font Weight
• Hierarchy Picker Font Alignment
• Hierarchy Picker Underline
• Hierarchy Picker Text Case

3. Alignment: Set the alignment of the Hierarchy Picker within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the text

EXAMPLE: Changing the Border of the drop-down list

What You Can Change

With the Bullet Graph you can change the colour of the bar indicating the actual value, and the target line.

1. Actual Bar: Set the colour of the value bar.

• Actual Background Colour

2. Target: Style the line indicating the target.

• Target Line Colour
• Target Line Thickness
• Target Line Style

EXAMPLE: Changing the Actual bar

EXAMPLE: Changing the Target line

What You Can Change

With the Chart you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.

1. Axis Ticks: Style the text along the X and Y axes.

• Axis Ticks Font Family
• Axis Ticks Font Colour
• Axis Ticks Font Size
• Axis Ticks Font Weight
• Axis Ticks Underline
• Axis Ticks Text Case

2. Axis Label: Style the label text for the X axis.

• Axis Label Font Family
• Axis Label Font Colour
• Axis Label Font Size
• Axis Label Font Weight
• Axis Label Underline
• Axis Label Text Case

3. Legend: Style the text inside the legend.

• Legend Font Family
• Legend Font Colour
• Legend Font Size
• Legend Font Weight
• Legend Underline
• Legend Text Case

4. Tooltip: Style the text inside the tooltip popup in discrete charts.

• Tooltip Font Family
• Tooltip Font Colour
• Tooltip Font Size
• Tooltip Font Weight
• Tooltip Underline
• Tooltip Text Case

5. Hairline: Style the appearance of the hairline in continuous charts.

• Hairline Colour
• Hairline Thickness
• Hairline Style

6. Hairline Popup: Style the text inside the hairline popup in continuous charts.

• Hairline Font Family
• Hairline Font Colour
• Hairline Font Size
• Hairline Font Weight
• Hairline Underline
• Hairline Text Case

7. Gridline: Style the vertical and horizontal lines on the chart canvas.

• Gridline Colour
• Gridline Thickness
• Gridline Style

8. Line Series, Bar Series, Area Series, Dot Series: Style the trace on the chart canvas.

• Line Series Opacity
• Line Series Thickness
• Line Series Style
• Bar Series Opacity (also applies to stacked bar charts)
• Area Series Opacity
• Dot Series Opacity

EXAMPLE: Changing the axis ticks

EXAMPLE: Changing the axis label

EXAMPLE: Changing the legend

EXAMPLE: Changing the tooltip in a discrete chart

EXAMPLE: Changing the hairline and hairline popup in a continuous chart

EXAMPLE: Changing the gridlines

EXAMPLE: Changing the opacity of the trace in a bar chart

EXAMPLE: Changing the style of the trace in a line chart

What You Can Change

With the Embedded Trend you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.

1. Axis Ticks: Style of the text along the X and Y axes.

• Axis Ticks Font Family
• Axis Ticks Font Colour
  (Tip: if you change this, the Y Axis colour no longer corresponds to the selected series.)
• Axis Ticks Font Size
• Axis Ticks Font Weight

2. Hairline: Style the hairlines.

• Hairline Colour
• Hairline Style

3. Hairline Popup: Style the text inside the hairline popup.

• Hairline Popup Font Family
• Hairline Popup Font Colour
• Hairline Popup Font Size
• Hairline Popup Font Weight
• Hairline Popup Text Case

4. Gridline: Style the vertical and horizontal grid lines.

• Gridline Colour
  (Tip: select an opacity of 0 for transparent gridlines.)
• Gridline Thickness
• Gridline Style

5. Line Series: Style the trace lines on the embedded trend.

• Line Series Opacity
• Line Series Thickness
• Line Series Style

6. Legend Icons:

• Background Colour
• Border Colour

7. Legend Text: Style the legend text

• Font
• Font Size
• Font Colour

EXAMPLE: Changing the axis ticks

EXAMPLE: Changing the hairline

EXAMPLE: Changing the gridline style

EXAMPLE: Changing the line series style

EXAMPLE: Changing the legend icons style

What You Can Change

With the Performance Curve you can change the colour of the dots indicating the actual data points, and the highlight colour.

1. Axis Ticks: Set the style of the label text.

• Axis Ticks Font Family
• Axis Ticks Font Colour
• Axis Ticks Font Size
• Axis Ticks Font Weight
• Axis Ticks Text Case

2. Gridline: Style the vertical and horizontal grid lines.

• Gridline Colour
• Gridline Thickness
• Gridline Style

3. Line Series: Set the style of the curve lines.

• Line Series Opacity
• Line Series Thickness
• Line Series Style

4. Dot Series: Style the dots indicating the data values.

• Dot Series Opacity

EXAMPLE: Changing the axis text style

EXAMPLE: Changing the style of the gridlines

EXAMPLE: Changing the style of the curves

EXAMPLE: Changing the style of the dots

What You Can Change

With the Treemap you can change the colours of the nodes, and the label text for the nodes.

1. Base Style: Set the style of the label text.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Text Case

2. Interpolated Colours: The colours of the nodes are determined by the interpolation between 2 colours - the Minimum Colour and Maximum Colour. As the value approaches the specified minimum value, the node colour more closely resembles the Minimum Colour, and as the value approaches the specified maximum value, the node colour more closely resembles the Maximum Colour.

• Minimum Colour
• Maximum Colour

Tip: You will usually get a nicer looking treemap if your minimum and maximum colours are the same hue but different brightness (e.g. light blue and dark blue) or are next to each other on the colour wheel (e.g. red and yellow or green and blue). The values you specify for minimum and maximum will also affect how the colours are interpolated.

3. Set Colours:  The colour of the node when the value is below the minimum value or above the maximum value.

• Below Minimum Colour
• Above Maximum Colour

4. Aggregate Colour: The colour of the node when two or more nodes have been combined.

EXAMPLE: Changing the Label Text

EXAMPLE: Changing the Interpolated Minimum and Maximum Colours

EXAMPLE: Changing the Set Minimum and Maximum Colours

EXAMPLE: Changing the Aggregate Colour

What You Can Change

With the Comments Button you can change the size and colour of the button, as well as its alignment within the cell.

1. Base Style: Set the size of the button.

• Button Size

2. Border Colour: Set the colour of the border of the button. You can choose different colours for comments are available or unavailable.

• Available Comments Border Colour
• Empty Comments Border Colour

3. Fill Colour: Set the colour of the button fill. You can choose different colours for comments are available or unavailable.

• Available Comments Fill Colour
• Empty Comments Fill Colour

4. Alignment: Set the alignment of the Comments Button within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the size of the button

EXAMPLE: Changing the colour of the button when there are no comments

EXAMPLE: Changing the colour of the button when comments are available

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the text that appears in the data label.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case

2. Alignment: Align the Data Label by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the data label component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: The text uses Sans-Serif font, bold, orange, and underlined

What You Can Change

1. Gauge Radius: Set the gauge size in pixels.

2. Gauge Target Background Colour: Set the background colour for the target segment.

3. Gauge Primary Background Colour: Set the background colour for the primary segments.

4. Gauge Secondary Background Colour: Set the background colour for the secondary segments. When the value is in a secondary alarm state, these segments take on the alarm indicator secondary colour (see 10).

5. Gauge Tertiary Background Colour: Set the background colour for the tertiary segments. When the value is in a tertiary alarm state, these segments take on the alarm indicator tertiary colour (see 10).

6. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

7. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

8. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

10. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the gauge's background colours.

11. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

12. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

Secondary Alarm

Tertiary Alarm

EXAMPLE: Small gauge, with blue background colours

EXAMPLE: Large, grey-on-blue Data Indicator

EXAMPLE: Large Alarm Indicator, coloured dark red for Tertiary

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the hyperlink text.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case

2. Alignment: Align the hyperlink by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styled base style font, underline and text case

EXAMPLE: Aligned middle left

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent.)

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small Level Meter with green background colours

EXAMPLE: Large, grey-on-blue Data Indicator

What You Can Change

1. Base Style: Style the tick values on the meter.

• Tick Value Font Family
• Tick Value Font Colour
• Tick Value Font Size
• Tick Value Font Weight
• Tick Value Underline

2. Measure 1 Colour: Set the colour of the first band of measure.

3. Measure 2 Colour: Set the colour of the second band of measure.

4. Measure 3 Colour: Set the colour of the third band of measure.

5. Measure 4 Colour: Set the colour of the fourth band of measure.

6. Measure 5 Colour: Set the colour of the fifth band of measure.

7. Arc Thickness: Set the width of the meter arc.

8. Needle Colour, Needle Thickness: Set the colour and width of the needle indicating the current value.

9. Tick Colour, Tick Thickness: Set the colour and width of the ticks for the values.

EXAMPLE: Changing the base style

EXAMPLE: Changing the measure colours

EXAMPLE: Changing the needle and ticks

EXAMPLE: Changing the arc and needle thickness

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent.)

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small pressure meter, with green background colours

EXAMPLE: Styled Units and Label

EXAMPLE: Large grey-on-blue data indicator, with a Y Offset

What You Can Change

With the Status Indicator you can change the size of the icon, as well as its alignment. Note that size and alignment can be overridden in Studio.

1. Base Style: Set the size of the indicator.

• Size

2. Alignment: Set the alignment of the indicator within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the size of the indicator

EXAMPLE: Changing the alignment of the indicator

What You Can Change

With the Status Tile you can change the fonts family, as well as the separate fonts for title, value and description. You can also change the colour that the tile takes on under different conditions.

1. Base Style: Set the font family for all fonts used in the status tile.

• Font Family

2. Under Limit, On Limit, Over Limit, Default: Set the colour of the status tile according to the value in relation to the limit.

• On Limit Colour
• Over Limit Colour
• Under Limit Colour
• Default Colour

3. Title: Set the title font and text case.

• Title Font Size
• Title Font Colour
• Title Font Weight
• Title Font Alignment
• Title Text Case

4. Value: Set the value font and text case.

• Value Font Size
• Value Font Colour
• Value Font Weight
• Value Font Alignment
• Value Text Case

5. Description: Set the description font and text case.

• Description Font Size
• Description Font Colour
• Description Font Weight
• Description Font Alignment
• Description Text Case

EXAMPLE: Changing the font family of the status tile

EXAMPLE: Changing the under limit colour of the status tile

What You Can Change

With the Tank you can change the colour of the tank and the thickness of the tank outline.

1. Tank: Style the outer container of the tank.

• Tank Outline Colour
• Tank Outline Thickness
• Tank Top Colour
• Tank Front Colour

2. Content: Set the colour of the fill.

• Content Front Colour
• Content Top Colour

EXAMPLE: Changing the tank's outline

EXAMPLE: Changing the tank's container

EXAMPLE: Changing the tank's fill

What You Can Change

With the Target Bar you can change the colour of the bar when it is over or under target, and the target line.

1. Under Target: Set the colour of the bar when the value is below the target value.

• Below Target Background Colour

2. Over Target: Set the colour of the bar when the value is above the target value.

• Above Target Background Colour

3. Target Line: Style the line indicating the target.

• Line Colour
• Line Thickness
• Line Style

EXAMPLE: Changing the bar colour for below target

EXAMPLE: Changing the bar colour for above target

EXAMPLE: Changing the Target line

What You Can Change

With the Target Label you can change both the text and label when it is over or under target.

1. Target: Style the text inside the label.

• Target Font Family
• Target Font Size
• Target Font Weight
• Target Underline
• Target Alignment
• Target Text Case
• Target Separation (distance between the value/units and the label)
• Target Horizontal Padding (padding within the label)

2. Good Target, Bad Target: Set the colour of the text and label when the value is above and below the target value.

• Good Target Background Colour
• Good Target Font Colour
• Bad Target Background Colour
• Bad Target Font Colour

3. Actual: Style the text representing the actual value.

• Actual Font Family
• Actual Font Colour
• Actual Font Size
• Actual Font Weight
• Actual Underline
• Actual Alignment
• Actual Text Case

4. Units: Style the text representing the units of measure.

• Units Font Family
• Units Font Colour
• Units Font Size
• Units Font Weight
• Units Underline
• Units Alignment
• Units Text Case

5. Alignment: Set the alignment of the Target Label within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the text inside the label, with generous horizontal padding but no separation between the label and units

EXAMPLE: Changing the colours of the label and label text for above and below target

EXAMPLE: Changing the Actual text

EXAMPLE: Changing the Units text

What You Can Change

With the Target Variance Bar you can change the colour of the bar when it is over or under target, and the target line.

1. Above Target Background Colour: Set the colour of the bar when the value is above the target value.

2. Above Target Tooltip Colour: Set the colour of the tooltip when the value is above the target value.

3. Below Target Background Colour: Set the colour of the bar when the value is below the target value.

4. Below Target Tooltip Colour: Set the colour of the tooltip when the value is below the target value.

5. Target Line: Style the line indicating the target.

• Target Line Colour
• Target Line Thickness
• Target Line Style

EXAMPLE: Changing the bar and tooltip colours for below target

EXAMPLE: Changing the bar and tooltip colours for above target

EXAMPLE: Changing the Target line

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent. )

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small temperature meter, with green background colours

EXAMPLE: Large Alarm Indicator, coloured orange for Primary

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the text that appears in the text label.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case
• Text Label Bottom Border Colour
• Text Label Bottom Border Size
• Text Label Bottom Border Style

2. Alignment: Align the Text Label by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the text label component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styling the text and bottom border (note that the bottom border is on the component border)

What You Can Change

With the Wind Vane, you can change the colours of the dial and zones, and style the text.

1. Dial Border Colour: Change the colour of the outline of the dial. By default, this is grey.

2. Dial Background Colour: Change the colour of the background of the dial. By default, this is transparent.

3. Needle Colour: Change the colour of the needle and the min/max/average semi-circle. By default, this is blue.

4. Warning Colours: Change the colour of the Warning Zone. By default, this is light grey when inactive and yellow when active.

• Warning Colour
• Warning Inactive Colour

5. Danger Colours: Change the colour of the Danger Zone. By default, this is dark grey when inactive and red when active.

• Danger Colour
• Danger Inactive Colour

6. Font: Change the colour of the text indicating North.

• Font Colour
• Font Size
• Label Font

EXAMPLE: Styling the dial border and background colours

EXAMPLE: Styling the needle and semi-circle colours

EXAMPLE: Styling the warning colours

EXAMPLE: Styling the danger colours

EXAMPLE: Styling the text

What You Can Change

Change the colour of the toggle, and the alignment.

1. Current Date/Time Toggle Rectangle: Change the colour of the box.

• Current Date/Time Toggle Rectangle Colour

2. Current Date/Time Toggle Tick: Change the colour of the tick.

• Current Date/Time Toggle Tick Colour

3. Alignment: Align the Current Date/Time Toggle by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the colour of the box and the tick

EXAMPLE: Change the alignment of the control

What You Can Change

Change the font and bottom border of the Date Picker, and the alignment.

1. Date Picker Bottom Border: Change the border below the date.

• Date Picker Bottom Border Colour
• Date Picker Bottom Border Size
• Date Picker Bottom Border Style

2. Date Picker Font: Change the font that shows the date.

• Date Picker Font Size
• Date Picker Font Family
• Date Picker Font Colour
• Date Picker Font Weight
• Date Picker Font Alignment
• Date Picker Font Underline
• Date Picker Font Text Case

3. Alignment: Align the Date Picker by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the bottom border

EXAMPLE: Change the font

What You Can Change

Change the font and bottom border of the Date/Time Picker, and the alignment.

1. Date Time Picker Bottom Border: Change the border below the date.

• Date Time Picker Bottom Border Colour
• Date Time Picker Bottom Border Size
• Date Time Picker Bottom Border Style

2. Date Time Picker Font: Change the font that shows the date.

• Date Time Picker Font Size
• Date Time Picker Font Family
• Date Time Picker Font Colour
• Date Time Picker Font Weight
• Date Time Picker Font Alignment
• Date Time Picker Font Underline
• Date Time Picker Font Text Case

3. Alignment: Align the Date/Time Picker by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the bottom border

EXAMPLE: Change the font

What You Can Change

Change the font and bottom border of the Date/Time Range Picker, and the alignment.

1. Date Time Range Picker Bottom Border: Change the border below the date.

• Date Time Range Picker Bottom Border Colour
• Date Time Range Picker Bottom Border Size
• Date Time Range Picker Bottom Border Style

2. Date Time Range Picker Font: Change the font that shows the date.

• Date Time Range Picker Font Size
• Date Time Range Picker Font Family
• Date Time Range Picker Font Colour
• Date Time Range Picker Font Weight
• Date Time Range Picker Font Alignment
• Date Time Range Picker Font Underline
• Date Time Range Picker Font Text Case

3. Alignment: Align the Date/Time Range Picker by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the bottom border

EXAMPLE: Change the font

What You Can Change

Change the font and bottom border of the Duration Picker, and the alignment.

1. Base Style: Change the font that shows the duration.

• Duration Picker Font Size
• Duration Picker Font Family
• Duration Picker Font Colour
• Duration Picker Font Weight
• Duration Picker Font Alignment
• Duration Picker Font Underline
• Duration Picker Font Text Case

2. Duration Picker Bottom Border: Change the border below the duration.

• Duration Picker Bottom Border Colour
• Duration Picker Bottom Border Size
• Duration Picker Bottom Border Style

3. Alignment: Align the Duration Picker by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the bottom border

EXAMPLE: Change the font

What You Can Change

Change the font and bottom border of the Month Picker, and the alignment.

1. Base Style: Change the font that shows the month.

• Month Picker Font Size
• Month Picker Font Family
• Month Picker Font Colour
• Month Picker Font Weight
• Month Picker Font Alignment
• Month Picker Font Underline
• Month Picker Font Text Case

2. Month Picker Bottom Border: Change the border below the month.

• Month Picker Bottom Border Colour
• Month Picker Bottom Border Size
• Month Picker Bottom Border Style

3. Alignment: Align the Month Picker by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Change the bottom border

EXAMPLE: Change the font

What You Can Change

With the Data Table you can change the background and text appearance, in all rows.

1. Header Row: Style the colour of the header row. Includes both the column heading and the filter.

• Header Row Background Colour

2. Header Cell: Style the appearance of the text for the column headings.

• Header Cell Font Family
• Header Cell Font Colour
• Header Cell Font Size
• Header Cell Font Weight
• Header Cell Alignment
• Header Cell Underline
• Header Cell Text Case
• Header Cell Border Colour
• Header Cell Border Size
• Header Cell Border Style
• Header Cell Padding

3. Filter Cell: Set the spacing around the filter box.

• Filter Cell Padding

4. Filter Field: Style the appearance of the cells.

• Filter Field Font Family
• Filter Field Font Colour
• Filter Field Font Size
• Filter Field Font Weight
• Filter Field Alignment
• Filter Field Underline
• Filter Field Text Case
• Filter Field Border Colour
• Filter Field Border Size
• Filter Field Border Style
• Filter Field Padding

5. Body Row, Body Row Odd, Body Row Even, Body Cell: Style the appearance of the rows and text in the table. See example below for colours.

• Body Row Background Colour
• Body Row Height
• Body Row Even Background Colour
• Body Row Odd Background Colour
• Body Cell Font Family
• Body Cell Font Colour
• Body Cell Font Size
• Body Cell Font Weight
• Body Cell Alignment
• Body Cell Underline
• Body Cell Text Case
• Body Cell Border Colour
• Body Cell Border Size
• Body Cell Border Style
• Body Cell Padding

6. Footer Row: Style the appearance of the row containing the aggregation.

• Footer Row Background Colour
• Footer Row Height

7. Footer Cell: Style the aggregation text.

• Footer Cell Font Family
• Footer Cell Font Colour
• Footer Cell Font Size
• Footer Cell Font Weight
• Footer Cell Alignment
• Footer Cell Underline
• Footer Cell Text Case
• Footer Cell Border Colour
• Footer Cell Border Size
• Footer Cell Border Style
• Footer Cell Padding

EXAMPLE: Changing the header background

EXAMPLE: Changing the text and borders in the header row

EXAMPLE: Changing the padding around the filter cell

EXAMPLE: Changing the text and borders in the filter field

EXAMPLE: Changing the colours of the rows - note that Body Row Background Colour will not show if both Body Row Even and Body Row Odd are set

EXAMPLE: Changing the body cell text and borders

EXAMPLE: Changing the footer cell colour, text and borders

What You Can Change

Because the Pivot Table can have several levels, its helpful to give these different background colours so that its easy to see subtotals at a glance. As well as being able to style these background colours, you can style the cell text appearance, and also the configuration panel.

1. Cell: Style the font and border style of all cells in the table.

• Cell Font Family
• Cell Font Colour
• Cell Font Size
• Cell Font Weight
• Cell Alignment
• Cell Underline
• Cell Text Case
• Cell Border Colour
• Cell Border Size
• Cell Border Style
• Horizontal Cell Padding
• Vertical Cell Padding

2. Cell Background Colour: Style the background colour for the column headers and for all detail cells (the lowest level in the pivot table). If more than five levels are used in the pivot table, the higher levels (six and up) take on this property as well.

3. Cell Level 1: Style the background colour for level 1, and also for detail row sub-totals.

• Cell Level 1 Background Colour

4. Cell Level 2: Style the background colour for level 2.

• Cell Level 2 Background Colour

5. Cell Level 3: Style the background colour for level 3.

• Cell Level 3 Background Colour

6. Cell Level 4: Style the background colour for level 4.

• Cell Level 4 Background Colour

7. Cell Level 5: Style the background colour for level 5.

• Cell Level 5 Background Colour

8. Config Panel: Style the configuration panel.

• Config Panel Font Family
• Config Panel Font Colour
• Config Panel Font Size
• Config Panel Font Weight
• Config Panel Alignment
• Config Panel Underline
• Config Panel Text Case

EXAMPLE: Styling the cell level background colours

EXAMPLE: Styling the cell text and borders

EXAMPLE: Styling the Configuration Panel

What You Can Change

With the Grid Layout you can change the background colour and styles relating to the cells.

1. Base Style: Style the page background.

• Background Colour

2. Cells: Style the appearance of the cells.

• Cell Background Colour
• Cell Border Colour
• Cell Border Width
• Cell Border Style
• Cell Margin
• Cell Padding

EXAMPLE: Changing the page background

EXAMPLE: Changing the appearance of the cells

What You Can Change

With the Precision Layout you can change the background colour and styles relating to the cells containing the added components.

1. Base Style: Style the page background.

• Background Colour

2. Cells: Style the appearance of the cells.

• Cell Background Colour
• Cell Border Colour
• Cell Border Width
• Cell Border Style
• Cell Padding

EXAMPLE: Changing the page background

EXAMPLE: Changing the appearance of the cells

What You Can Change

Style the base text, the border between the selected option and the list of options, and the aligment.

1. Base Style: Style the text that appears above the line (the Selected Option).

• Combo Box Font Size
• Combo Box Font Family
• Combo Box Font Colour
• Combo Box Font Weight
• Combo Box Font Alignment
• Combo Box Underline
• Combo Box Text Case

2. Combo Box Bottom Border: Style the line that separates the Selected Option from the list of values.

• Combo Box Bottom Border Colour
• Combo Box Bottom Border Size
• Combo Box Bottom Border Style

3. Alignment: Align the Combo Box by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styled bottom border

EXAMPLE: Aligned middle center

What You Can Change

With the Hotspot, you can style the border and the background; these are only visible in design mode.

1. Border: The colour, width, and style of the border.

• Border Colour
• Border Width
• Border Style

2. Background: Style colour of the background that appears in design mode.

• Background Colour

EXAMPLE: Border Colour

EXAMPLE: Border Width

EXAMPLE: Border Style

EXAMPLE: Background Colour

1. Base Style

Style the text that appears in the list.

2. Selection List Separator

Style the line that separates the items.

EXAMPLE: Stylised font for the list items

What You Can Change

Style the base text, the line below the selected option, and the alignment.

1. Base Style: Style the text that appears below the Selected Option.

• Option Links Font Size
• Option Links Font Family
• Option Links Font Colour
• Option Links Font Weight
• Option Links Font Alignment
• Option Links Underline
• Option Links Text Case

2. Option Links Bottom Border: Style the underline of the Selected Option.

• Option Links Bottom Border Colour
• Option Links Bottom Border Size
• Option Links Bottom Border Style

3. Alignment: Align the Option Links Box by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styled base style

EXAMPLE: Styled Bottom Border: grey, dotted, thick

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the text that appears in the text input.

• Text Input Font Size
• Text Input Font Family
• Text Input Font Colour
• Text Input Font Weight
• Text Input Text Case

2. Alignment: Align the Text Input by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the text input component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styling the text and alignment

What You Can Change

Style the line. The directions and corners are applied in design time.

Line: Style the line colour and thickness.

• Colour
• Thickness (can be overridden in Studio)
• Line Style (can be overridden in Studio)

EXAMPLE: Two styled simple lines