Stroke and Fill Properties for Reports

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.

Property	Description
Color	Color to use for the stroke.
Dash Pattern	A "Dash Pattern" string to specify the number of pixels on and off. For example "5,10"
Width	Width 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 Properties	Property	Value
	Stroke Style	Shape Outline
	Stroke Color	Red
	Width	2 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.

Property	Description
Color	Color to use for the stroke.
Dash Pattern	A "Dash Pattern" string to specify the number of pixels on and off. For example "5,10"
Border Bottom	If true, show the border on the bottom side of the shape.
Border Left	If 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 Top	If true, show the border on the top side of the shape.
Width	Width 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 Properties

Property

Value

Stroke Style

Border

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 Summary	Property	Value
	Text Color	Red, Bold

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

Cell Stroke and Fill Properties for Equipment Summary	Property	Value
	Stroke Style	Border
	Fill	Enabled
	Fill Color	Yellow
	Width	2 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.

Property	Description
Color	Color to use for the stroke.
Inner Width	Width of the inner border in pixels.
Outer Width	Width of the outer border in pixels.
Position	Position 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.
Separation	Separation 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 Properties	Property	Value
	Stroke Style	Double
	Stroke Color	Blue
	Inner Width	1
	Outer Width	3
	Position	Inner on Path
	Separation	10

Contents

Strategic Partner Links

Resources

All Manual Versions