Visualizations → Shapes
About Shapes visualizations
Starting 2024.1.0, Incorta is enabling dashboard developers to elevate their dashboard designs with the new shapes and icons feature. Having free-style shapes that you can use in designing dashboards will help dashboard developers to promote data clarity while presenting it to stakeholders. With this addition, you can incorporate lines, arrows, rectangles, circles, and a variety of other shapes and icons into your dashboard creations. You can also embed text within your added shapes, resize them, add shadows, and change icon styles.
You can find the new Shapes category in the Add Insight panel with the following shapes available:
Configurations for Shapes
For each shape, you can drag the edges to resize or reshape it, for example, you can reshapre circles to be ovals, and rectangles to be squares. In addition, more configurations are under the Appearance tab, where you can configure and customize the appearance of the shapes using various settings and controls, such as shadows and text.
There are common properties across all shapes, except for Text.
Rectangle
By default, the shape of this component is a square. You can resize or reshape it using its endpoint edges.
You can also change how the shape looks like using the settings in the Appearance tab.
General tab properties
| Control | Type | Description |
|---|---|---|
| Fill color | color palette | Select the fill color for the shape. |
| Stroke Color | color palette | Select the stroke color. |
| Stroke Width | spin box | Set the stroke width in pixels. |
| Corner Radius | spin box | Set the corner radii in pixels. |
| Dashed | toggle | Enable to change the stroke of the shape to be dashed. |
Circle
By default, the shape of this component is a circle. You can resize or reshape it using its endpoint edges. You can also change how it looks using the settings in the Appearance tab.
General tab properties
| Control | Type | Description |
|---|---|---|
| Fill color | color palette | Select the fill color for the shape. |
| Stroke Color | color palette | Select the stroke color. |
| Stroke Width | spin box | Set the stroke width in pixels. |
| Dashed | toggle | Enable to change the stroke of the shape to be dashed. |
Line
By default, the shape of this component is a horizontal line. You can resize it using its endpoint edges. Simply start dragging and dropping these endpoints to achieve the needed size and shape.
You can also change the orientation of the line and how it looks using the settings in the Appearance tab.
General tab properties
| Control | Type | Description |
|---|---|---|
| Line color | color palette | Select the fill color for the arrow. |
| Line Width | spin box | Set the size of the arrow in pixels, knowing that the default is 20px. |
| Rounded | toggle | Enable to set the shape to be rounded instead of being sharp. |
| Dashed | toggle | Enable to change the line to be dashed. |
| Orientation | drop-down | Select the orientation of the line to be either: ● Horizontal (default) ● Vertical |
Arrow
By default, the shape of this component is an arrow pointing to the right. You can resize or reshape it using its endpoint edges. You can also change the direction of the arrow and how it looks using the settings in the Appearance tab.
General tab properties
| Control | Type | Description |
|---|---|---|
| Line color | color palette | Select the fill color for the arrow. |
| Body Width | spin box | Set the body size of the arrow in percentage, knowing that the default is 20%. |
| Pointer Length | spin box | Set the pointer length of the arrow in percentage, knowing that the default is 20%. |
| Direction | drop-down | Select the direction of the arrow from the following: ● Right (default) ● Up ● Left ● Down |
Icon
The Icon component enables you to add icons to your dashboard. You can choose the icon shape from a set of different icons that are currently available. Afterward, you may change the icon’s appearance using the Shape Styles section as well as add text to it.
General tab properties
| Control | Type | Description |
|---|---|---|
| Fill color | color palette | Select the fill color for the icon. |
| Stroke Color | color palette | Select the stroke color. |
| Stroke Width | spin box | Set the stroke width in pixels. |
Text
The Text component enables you to add plain text to your dashboard if you do not need to use the Rich Text component.
General tab properties
| Control | Type | Description |
|---|---|---|
| Text | text box | Enter the text you want to display in the shape. |
| Font Style | drop-down | Select text font style. |
| Font size | spin box | Set/enter text font size. |
| Font color | color palette | Select text font color. |
| Font Style | buttons | Select between four icons: ● Bold ● Italic ● Underlined ● Strikethrough |
| Alignment | buttons/spin box | Choose the alignment of the text through the available controls predefined controls. Alternatively, you can customize the alignment by entering the pixel number. |
| Rotation | drop-down | Select the rotation of the displayed text from the following: ● 0 (Default) ● 90 ● 180 ● 270 |
Common properties
Title Tab properties
| Control | Type | Description |
|---|---|---|
| Text | text box | Enter the text you want to display in the shape. |
| Font Style | drop-down | Select text font style. |
| Font size | spin box | Set/enter text font size. |
| Font color | color palette | Select text font color. |
| Font Style | buttons | Select between four icons: ● Bold ● Italic ● Underlined ● Strikethrough |
| Alignment | buttons/spin box | Choose the alignment of the text through the available controls predefined controls. Alternatively, you can customize the alignment by entering the pixel number. |
Shadow tab properties
| Control | Type | Description |
|---|---|---|
| Shadow Color | color palette | Choose the shadow color of your shape. |
| Shadow Blur | spin box | Set the blur of the shadow in pixels, knowing that the default value is zero. |
| Shadow Offset X | spin box | Select the offset of the shadow on the x-axis in pixels. The range is between -30px and 30px, knowing that the default value is 0. |
| Shadow Offset Y | spin box | Select the offset of the shadow on the y-axis in pixels. The range is between -30px and 30px, knowing that the default value is 0. |