--- title: "Vision - Sparkline Chart" description: "The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. " --- # Vision - Sparkline Chart > The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. ![](sparkline0.png) **Component Palette Icon**: ![](spark1.png) ## Description The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. Sparklines were invented by Edward Tufte as a way to show a great deal of contextual information in a very small amount of space. Sparklines are typically used to display the recent history (up to current time) of a datapoint so that the viewer can quickly discern the recent trend of a datapoint. To use a sparkline, bind its Data property either to a Tag Historian realtime query, or to a database query. There should be two columns in this dataset: the first one a date column, the second a number. Each row will become a datapoint on the chart, and the dataset must be sorted by time in ascending order. Instead of using axes to convey scale, the sparkline can display a band of color across the back of the chart which indicates the desired operating range of the datapoint. In this way, it is instantly obvious when a value is in its expected range, above that range, or below. The sparkline automatically configures its internal axes based on the data given to it. To give it a fixed range, fill in the Range High and Range Low properties. ## Properties | Name | Description | Property Type | Scripting | Category | |--- |--- |--- |--- |--- | | Background Color | The background color of the component. 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 | .background | Appearance | | Border | The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.**Note**: The border is unaffected by rotation. | Border | .border | Common | | Border Inset | The amount of space to inset the chart inside its border. | double | .borderInset | Appearance | | Chart Max | The value that corresponds to the upper edge of the chart. (Read only. Usable in bindings and scripting.) | Double | .chartMax | Uncategorized | | Chart Min | The value that corresponds to the lower edge of the chart. (Read only. Usable in bindings and scripting.) | Double | .chartMin | Uncategorized | | 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 | | Data | The history data to draw in the sparkline chart. | Dataset | .data | Data | | Desired High | The high value of the desired operating range. If left blank (null), no desired range band will be shown. | Double | .desiredHi | Data | | Desired Low | The low value of the desired operating range. If left blank (null), no desired range band will be shown. | Double | .desiredLo | Data | | Desired Range Color | The color of the desired operating range band. Only used if the desired operating range is configured. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .desiredRangeColor | Appearance | | First Marker Color | The color of the first value marker. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .firstMarkerColor | Markers | | First Marker Size | The size of the first value marker. | double | .firstMarkerSize | Markers | | First Marker Style | The style of the first value marker. | int | .firstMarkerStyle | Markers | | First Value | The first (oldest) value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .firstValue | Uncategorized | | High Marker Color | The color of the high value marker. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .hiMarkerColor | Markers | | High Marker Size | The size of the high value marker. | double | .hiMarkerSize | Markers | | High Marker Style | The style of the high value marker. | int | .hiMarkerStyle | Markers | | Last Marker Color | The color of the last value marker. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .lastMarkerColor | Markers | | Last Marker Size | The size of the last value marker. | double | .lastMarkerSize | Markers | | Last Marker Style | The style of the last value marker. | int | .lastMarkerStyle | Markers | | Last Value | The last (most recent) value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .lastValue | Uncategorized | | Line Color | The color of the sparkline. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .foreground | Appearance | | Line Width | The width of the sparkline. | float | .lineWidth | Appearance | | Low Marker Color | The color of the low value marker. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | Color | .loMarkerColor | Markers | | Low Marker Size | The size of the low value marker. | double | .loMarkerSize | Markers | | Low Marker Style | The style of the low value marker. | int | .loMarkerStyle | Markers | | Max Value | The largest value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .maxValue | Uncategorized | | Min Value | The smallest value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .minValue | Uncategorized | | 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. | int | .quality | Data | | Range High | A fixed value for the upper edge of the chart. If left blank (null), the upper range will be calculated automatically. | Double | .rangeHi | Data | | Range Low | A fixed value for the lower edge of the chart. If left blank (null), the lower range will be calculated automatically. | Double | .rangeLo | Data | | 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 ### Sparkline Chart with Low and High Limits ![](sparkline2.png) | Property Name | Value | |---|---| | Desired Range Color | 184,218,255 | | Range High | 100 | | Range Low | 0 | | Desired High | 75 | | Desired Low | 40 |