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

# Perspective - Sparkline

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

![](2019-07-19_7-27-26.jpg)

**Component Palette Icon**:  

![](2019-05-07_9-39-27.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 display a desired range, fill in the **props.desired.high** and **props.desired.low** properties.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name      | Description     | Property Type    | 
| ----------- | -------------- | ------------- |
| points    | Data points to plot. Accepts the following: May be a dataset, or an array of values or of objects containing X or Y coordinates. Also may be a string formatted with X and Y values separated by a comma.An array of numbers containing X or Y coordinates.A string of space delimited points where x and y are separated by a comma. For example: 0,20 1,35 2,15.An array of objects, where each object contains an x and a y property, and where each property's value is a number.A dataset of a single column of number type.A dataset of two columns, the first representing the x value and the second column representing the y value. The first column can be either of type number or type date. Dates and Timestamps are converted to unix timestamps which is used as the x value.| array or dataset |
| color     | 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            |
| width     | Thickness of the line, in pixels. | value: numeric   |
| opacity   | The opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric   |
| dashArray | The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated [l](https://developer.mozilla.org/en/SVG/Content_type#Length)engths (in pixels) and [p](https://developer.mozilla.org/en/SVG/Content_type#Percentage)ercentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".  | array            |
| range     | Settings for the upper and lower edge of the chart.**high**: A fixed value for the upper edge of the chart as a number.**low**: A fixed value for the lower edge of the chart as a number.| object|
| desired   | The desired operating range. Settings for the desired properties operating range.**high**: The high value of the desired operating range. Value is numeric.**low**: The low value of the desired operating range. Value is numeric.**stroke**: Settings for the stroke. Options as follows:**color**:	Color of the line. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).**width**:	Width of the line in pixels. Value is numeric.**opacity**:	Opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.**dashArray**:	The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the stroke length for the desired operating range) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2".**fill**: Settings for the fill for the desired range. Options as follows:**color**:	Fill color of the desired range. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).**opacity**:	Opacity of the fill ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.|object|
| marker    | Settings for the markers on the chart. Each of the following markers have the child properties listed in the [marker Type Child Properties table](#marker-type-child-properties) below. **first**: Settings for the first marker on the chart.**last**: Settings for the last marker on the chart.**high**: Settings for the high marker on the chart.**low**: Settings for the low marker on the chart.  | object           |
| style     | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object           |

### marker Type Child Properties
The following properties apply to the first, last, high, and low markers on the chart.

| Name  | Description   | Property Type          | 
| ------------- | ---------------------- | -------------- |
| shape   | Shape of the marker used to indicate the first point. Options are circle, triangle, or square. Default is circle.  | value: string dropdown |
| size  | Size of the marker, in pixels.   | value: numeric         |
| stroke    | Settings for the stroke for the first marker. Options as follows:**color**:	Color of the line. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).**width**:	Width of the line in pixels. Value is numeric.**opacity**:	Opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.**dashArray**:	The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the stroke length for the desired operating range) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2".|object|
| fill      | Settings for the fill for the first marker. Options as follows:**color**:	Fill color of the desired range. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).**opacity**:	Opacity of the fill ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.|object|
| style     | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). |object|

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Example
This example demonstrates what changes to the various marker properties can do. In addition, the desired range has been enabled.

![](2019-07-19_13-09-11.png)

| Property                        | Value    |
| ------------------------------- | -------- |
| props.width                     | 1        |
| props.dashArray                 | 6 2 2 2  |
| props.desired.high              | 60       |
| props.desired.low               | 25       |
| props.desired.stroke.color      | #AAAAAA  |
| props.desired.stroke.width      | 3        |
| props.desired.stroke.opacity    | 3        |
| props.desired.fill.color        | #CCFFF   |
| props.desired.fill.opacity      | 4        |
| props.marker.first.shape        | circle   |
| props.marker.first.size         | 10       |
| props.marker.first.stroke.color | #000000  |
| props.marker.first.fill.color   | #00AC00  |
| props.marker.last.shape         | triangle |
| props.marker.last.size          | 20       |
| props.marker.last.stroke.color  | #000000  |
| props.marker.last.fill.color    | #EF4D4D  |
| props.marker.low.shape          | square   |
| props.marker.low.size           | 7        |
| props.marker.low.stroke.color   | #000000  |
| props.marker.low.fill.color     | #0D9D9   |
| props.marker.high.shape         | square   |
| props.marker.high.size          | 7        |
| props.marker.high.stroke.color  | #000000  |
| props.marker.high.fill.color    | #FF47FF  |
| props.style.backgroundColor     | #E2F1Fa  |
| props.style.borderStyle         | outset   |
| props.style.borderWidth         | 7px      |
| props.style.borderColor         | #9BBFBF  |