Sparkline

  • 4 minutes to read

This document provides general information on using sparklines in Snap applications.

A Sparkline is a report element control allowing you to provide a Snap document with simple data aware inline charts.

Add a Sparkline

To add an empty sparkline to a document, click Sparkline in the General Tools: Insert ribbon tab.

insert-toolbox-sparkline

To provide data to a sparkline, drag a corresponding item from the Data Explorer and drop it onto the highlighted area of the sparkline.

snap-sparkline-provide-data

To convert an existing Snap field to a sparkline, do the following.

  1. Select a field and click Properties in the Data Tools: Field ribbon tab.
  2. In the invoked menu, expand the Content Type drop-down list and select Sparkline.

    snap-transform-field-to-sparkline

Customize a Sparkline

To access the options of a selected SnapSparkline, click Properties in the Data Tools: Field ribbon tab.

field-sparkline-properties

You can choose from the different view types available for a sparkline by using the View Type property.

snap-sparkline-select-view-type.png

The following table describes the properties that are specific to the available sparkline view types.

View Type

Specific Properties

Line

xr-sparkline-line-view

Line Width - specifies the width of the chart line;

Highlight Negative Points - specifies whether or not to highlight all sparkline points that have negative values;

Show Markers - specifies the visibility of point markers on a sparkline;

Marker Size - specifies the size of markers for data points in a sparkline;

Max Point Marker Size - specifies the marker size of the data point with the highest value among all data points;

Min Point Marker Size - specifies the marker size of the data point with the lowest value among all data points;

Start Point Marker Size - specifies the size of a start point's marker;

End Point Marker Size - specifies the size of an end point's marker;

Negative Point Marker Size - specifies the marker size of all data points that have negative values;

Marker Color - specifies the color of line markers.

Area

xr-sparkline-area-view

Line Width - specifies the width of the chart line;

Highlight Negative Points - specifies whether or not to highlight all sparkline points that have negative values;

Show Markers - specifies the visibility of point markers on a sparkline;

Marker Size - specifies the size of markers for data points in a sparkline;

Max Point Marker Size - specifies the marker size of the data point with the highest value among all data points;

Min Point Marker Size - specifies the marker size of a data point with the lowest value among all data points;

Start Point Marker Size - specifies the size of a start point's marker;

End Point Marker Size - specifies the size of an end point's marker;

Negative Point Marker Size - specifies the marker size of all data points that have negative values;

Marker Color - specifies the color of line markers;

Area Opacity - Specifies the opacity (0-255) of the area fill color.

Bar

xr-sparkline-bar-view

Bar Distance - specifies the distance between two bars of a sparkline;

Highlight Negative Points - specifies whether or not to highlight all sparkline points that have negative values.

WinLoss

xr-sparkline-win-loss-view

Bar Distance - Specifies the distance between two bars of a sparkline.

Besides the options that are specific to the currently assigned view-type, the following properties are available for all sparklines.

  • Binding - specifies the data member that provides values to a sparkline.
  • View Type - specifies the view type used to render the sparkline's data.
  • Width - specifies the width of the sparkline.
  • Height - specifies the height of the sparkline.
  • Highlight Max Point - specifies whether or not to highlight the sparkline point with the highest value among all points.
  • Highlight Min Point - specifies whether or not to highlight the sparkline point with the lowest value among all points.
  • Highlight Start Point - specifies whether or not to highlight the start point of a sparkline.
  • Highlight End Point - specifies whether or not to highlight the end point of a sparkline.
  • Color - specifies the color used to draw a sparkline.
  • Max Point Color - specifies the color used to draw the sparkline point with the highest value among all data points.
  • Min Point Color - specifies the color used to draw the sparkline point with the lowest value among all data points.
  • Start Point Color - specifies the color used to draw the start point of a sparkline.
  • End Point Color - specifies the color used to draw the end point of a sparkline.
  • Negative Point Color - specifies the color used to draw sparkline points that have negative values.
See Also