---
title: "Vision - Line"
description: "The Line component displays a straight line. It can run north-south, east-west, or diagonally."
---

# Vision - Line

> The Line component displays a straight line. It can run north-south, east-west, or diagonally.

![](line.png)

**Component Palette Icon**:  

![](line1.png)

## Description
The line component displays a straight line. It can run north-south, east-west, or diagonally. You can add arrows to either side. The line can be dashed using any pattern you want. You can even draw the line like a sinusoidal wave.

:::info Reporting Line Component
If you are looking for the Line component used in Reporting, refer to [Report - Line Shape](appendix\components\report-design-components\report-design-shape-palette\report-component-line-shape\report-component-line-shape.md).
:::

## Properties
| Name 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Color 	| Set the color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .foreground 	| Appearance 	|
| Cursor 	| The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. 	| int 	| .cursorCode 	| Common 	|
| Dash Pattern 	| Enter a string of comma-delimited numbers which indicate the stroke pattern for a dashed line. For instance, "3,5" means three pixels on, five pixels off. 	| String 	| .strokePattern 	| Appearance 	|
| Left Arrow 	| Draw an arrow head on the left/top of the line? 	| boolean 	| .leftArrow 	| Appearance 	|
| Left Arrow Size 	| The size of the left arrow, if present. 	| int 	| .leftArrowSize 	| Appearance 	|
| Line Mode 	| The line mode determines where in the rectangle the line is drawn. 	| int 	| .lineMode 	| Appearance 	|
| Line Style 	| The line style determines how the shape of the line looks. Options are: Plane, Dashed, Sinusoidal, Sinusoidal-Dashed, Loop, and Loop-Dashed. 	| int 	| .lineStyle 	| Appearance 	|
| Line Width 	| Set the width of the line in pixels. 	| int 	| .lineWidth 	| Appearance 	|
| Mouseover Text 	| The text that is displayed in the tooltip which pops up on mouseover of this component. 	| String 	| .toolTipText 	| Common 	|
| Name 	| The name of this component. 	| String 	| .name 	| Common 	|
| Quality 	| The data quality code for any Tag bindings on this component. 	| QualityCode 	| .quality 	| Data 	|
| Right Arrow 	| Draw an arrow head on the right/bottom of the line? 	| boolean 	| .rightArrow 	| Appearance 	|
| Right Arrow Size 	| The size of the right arrow, if present. 	| int 	| .rightArrowSize 	| Appearance 	|
| Sine Height 	| Sets the amplitude of the sine wave to be drawn. 	| int 	| .sineHeight 	| Appearance 	|
| Sine Length 	| Sets the wavelength of the sine wave to be drawn. 	| int 	| .sineLength 	| Appearance 	|
| Styles 	| Contains the component's styles. 	| Dataset 	| .styles 	| Appearance 	|
| Visible 	| If disabled, the component will be hidden. 	| boolean 	| .visible 	| Common 	|

## Scripting
### Component Functions
This component does not have component functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](ignition-modules/vision/scripting-in-vision/component-events/component-events.md) page

## Customizers
* [Vision Component Customizers](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md)
* [Style Customizer](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md#style-customizer)

## Examples
### Line with Sinusoidal Pattern
![](sinusoidal.png)

| Property | Setting |
|---    |---    |
| Color |	0,0,255 |
| Line Style |	Sinusoidal |

### Line with Arrow Endpoints
![](arrow-endpoints.png)

| Property | Setting |
|---    |---    |
| Color |	217,0,0 |
| Line Style |	Plain |
| Left Arrow |	True |
| Left Arrow Size |	25 |
| Line Width |	4 |
| Right Arrow |	True |
| Right Arrow Size |	25 |