---
title: "Sparkline Chart"
description: "The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. "
---

# Sparkline Chart

> The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. 

![A Sparkline Chart: a small, borderless line chart with no axes or labels, tracing the recent history of a single datapoint as it oscillates up and down, with a dot marking the most recent value at the right edge.](sparkline0.png)

**Component Palette Icon:**  
![Sparkline Chart 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: is it rising? falling? oscillating? etc..

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, simply fill in the Range Highand Range Low properties.

## Properties

| Name 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Background Color 	| The background color of the component. 	| Color 	| .background 	| Appearance 	|
| Border 	| The border surrounding this component. NOTE that 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. 	| int 	| .cursorCode 	| Common 	|
| Data 	| The history data to draw in the sparkline chart. 	| Dataset 	| .data 	| Data 	|
| Data Quality 	| The data quality code for any tag bindings on this component. 	| int 	| .dataQuality 	| 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. 	| Color 	| .desiredRangeColor 	| Appearance 	|
| First Marker Color 	| The color of the first value marker. 	| 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. 	| 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. 	| 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. 	| Color 	| .foreground 	| Appearance 	|
| Line Width 	| The width of the sparkline. 	| float 	| .lineWidth 	| Appearance 	|
| Low Marker Color 	| The color of the low value marker. 	| 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 	|
| 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

### Scripting Functions
This component does not have scripting 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](scripting\scripting-in-ignition\component-and-window-scripting\component-events.md) page

## Customizers
This component does not have any custom properties.

## Examples
### Sparkline Chart with Low and High Limits
![A Sparkline Chart with a shaded blue band filling the desired range between the Desired Low and Desired High limits. The trend line stays within the band for the full history, ending in a dot at the most recent value.](sparkline2.png)

| Property Name | Value |
|---|---|
| Range High | 100 |
| Range Low | 0 |
| Desired High | 75 |
| Desired Low | 40 |