You're currently browsing the Ignition 7.9 docs. Click here to view the latest docs.


As you probably learned working with Vision components, each component has its own unique properties. The Report Design components are no different. The Report Designer has some of the same components like tables, bar charts, graphs, and various shape tools, but their properties are different from the Vision components because they are designed to go in reports. For example, Stroke and Fill properties control the appearance of the reporting components so you can change stroke style or border, create a dashed line around the shape, change the width of the lines and the color, and more. Stroke Style and Stroke properties can be particularly useful when using a Table in a report. You can make objects in a table and add an outline or set any edges of they outline to show to make your report stand out. 

Stroke and Fill Properties

Stroke and Fill properties are commonly used by many reporting components. All of the components, charts, graphs, and shapes in the Report Design Palette use the same Stroke and Fill properties. These properties affect how the components look in a report. There are five basic Stroke and Fill properties:

  • Fill - if this property is marked true, the shape will fill its space with color.
  • Fill Color - if the Fill property is selected, the color you select will fill the shape. 
  • Opacity - defines how opaque the color is in the shape, between 0 and 1.
  • Stroke Style - defines what type of stroke or border to use.  
  • Stroke - An expandable list of properties for the chosen stroke style. 



The Fill, Fill Color, and Opacity properties are pretty easy to understand, so we are going to focus on Stroke Styles and Stroke properties in the following sections so you can take full advantage of how to use these properties to make professional looking reports. 

On this page ...


Stroke Styles

Stroke Style defines what style of stroke or border to use. Primarily, the Stroke Style controls the type of line drawn around the component (table, chart, shape, etc) that you are using. There are four pre-configured Stroke Style templates you can choose from. 

  • Hidden -  no stroke or border
  • Shape Outline - a solid line outline
  • Border - border or rectangle shape
  • Double - two parallel lines

Each of these Stroke Styles come with their own set of properties. In the Design panel, select a component, and choose any one of the style templates from the Stroke Style property in the Properties tab. You can use the Stroke Style as is, or double click on any of the rows or cells to change its individual properties. For example, you might want to change the thickness of the lines or create a dashed line around the border of a component. This is easy to do: select the component, row, or cell, and change the Width under the Stroke property (thickness of the lines is specified in pixels). Then view your report with the Preview tab. You can keep repeating this step until you get the desired result. 


Stroke Properties

Each Stroke shares some properties with other strokes, but have their own unique properties. The only exception is that the Hidden Stroke Style does not have any properties. Note: If you switch between stroke styles your values will be overwritten by defaults. This is not true when switching to the Hidden type.

The properties for each Stroke Style are shown below.

Shape Outline Stroke Properties

Shape Outline is a solid line outline around a component or shape. It has the following properties that you can use as is, or change.

PropertyDescription
ColorColor to use for the stroke.
Dash PatternA "Dash Pattern" string to specify the number of pixels on and off. For example "5,10"
WidthWidth of the shape in pixels.
Stroke Style - Shape Outline Example

This example shows a report with a Shape Outline around the Table component at the bottom of the image. Select the whole table to set stroke and fill for it. The property values used to create the outline around the data are shown in the properties list in the table below.


Table Stroke and Fill PropertiesPropertyValue

Stroke StyleShape Outline
Stroke ColorRed
Width2 pixels

Border Style Stroke Properties

The Border Stroke Style is similar to the Shape Outline, but it gives you the option to disable the any of the lines around the border; bottom; left; right; or top.

PropertyDescription
ColorColor to use for the stroke.
Dash PatternA "Dash Pattern" string to specify the number of pixels on and off. For example "5,10"
Border BottomIf true, show the border on the bottom side of the shape.
Border LeftIf true, show the border on the left side of the shape.
Border Right

If true, show the border on the right side of the shape.

Border TopIf true, show the border on the top side of the shape.
WidthWidth of the stroke in pixels.
Stroke Style - Border Example

This example used the Border Stroke Style for the Equipment Summary cell at the bottom of a Table. (Total: @total.Downtime@Minutes). Three images appear inside the outline because they are in the Equipment Header (unstructured) row. The property values are shown for the Table, Row, and Cell in the property lists below.


Equipment Table in the Designer


Table Property Values

Table Stroke and Fill PropertiesPropertyValue

Stroke StyleBorder

Stroke

  • Border Bottom
  • Border Left
  • Border Right
  • Border Top
All Enabled

Data Summary Cell
Shows the Total Downtime Minutes for each downtime cause for each piece of equipment.

Cell Text Properties for Data SummaryPropertyValue

Text ColorRed, Bold


Equipment Summary Cell
Shows the Total Downtime Minutes for all causes and for all equipment.

Cell Stroke and Fill Properties for Equipment SummaryPropertyValue

Stroke StyleBorder
FillEnabled
Fill ColorYellow
Width2 pixels


Double Style Stroke Properties

By default, the Double Stroke Style consists of two parallel lines around the component. You can choose to disable any of the lines at the bottom, left, right, or top. You can also change the width of both lines and the separation between these lines, if desired.  

PropertyDescription
ColorColor to use for the stroke.
Inner WidthWidth of the inner border in pixels.
Outer WidthWidth of the outer border in pixels.
PositionPosition of borders relative to the bounds of the shape.
  • Outer on path - places the outer border on the edge of the component and the inner border inside the component.
  • Inner on path - places the inner border on the edge of the component and the outer border outside the component.
  • Centered about path - centers the whole border (based on inner+outer+gap widths) on the shape edge.
  • Gap on path - centers on the gap on the shape edge.
SeparationSeparation between inner and outer borders in pixels.
Stroke Style - Double Example

Here is an example of a Pie Chart with a Double border used in a report. The property values for the Border Stroke Style are listed in the properties list table below.

Pie Chart Stroke and Fill PropertiesPropertyValue

Stroke StyleDouble
Stroke ColorBlue
Inner Width1
Outer Width3
PositionInner on Path
Separation10




  • No labels