How to build Sparkline components

Highlights

Component

The Sparkline component includes the following chart types: Sparkline, Spark Bar, and Win/Loss.

Overview Choose chart types to visualize your data sets that occur over time, combine chart types by using multiple series, and customize or show the last value of your data.
Key Features Choose from 3 different chart types.
Layer, by adding multiple series, different chart types and formatting options.
Customize the appearance of the last value.
Use indicators on a series of data for maximum visual impact by displaying points or assigning a selection of colors.
Filter, Group, Aggregate and Sort You can filter, group, aggregate and sort your visualization without the use of formulas. Using the More Actions menu allows you to apply these actions directly in your visualization. See the More Actions article to learn how to use these actions with elements of your components and Hidden Data.

Overview

The Sparkline component allows you to monitor changes to one or more KPIs over time using one or more different chart types. Each chart type can be displayed using different formatting options. Each series can be displayed using a different chart type.

Below are some examples of the Sparkline component chart types that you can build in Klipfolio , including a win/loss chart with a second Sparkline series.

Component Structure

The Sparkline component has the following structure.

Key Features

This section highlights the different formatting options for each chart type, and provides the steps to create a Sparkline.

Creating a Sparkline

  1. Select the Series 1 sub-component from the tree.
  2. Select the Properties panel.
  3. Locate the Type field and select the icon associated with the chart type you want to display.
  4. From the Properties panel, customize the appearance of your chart using a collection of different formatting options:

 

For a Sparkline chart type:

 

Setting Description
Style Choose from either a line or line and area chart.
Line Weight Choose from eight different line weights. An automatic line weight is derived from the size of the component.
Highlight highest and lowest points Show points at the highest and lowest values.
Point Size Choose from four different point sizes. Set to Auto, Klipfolio determines the best point size for your chart.
Range Select a custom minimum and maximum range of values.
Colors Choose different colors to highlight the line, area, or end point.
Tooltip Format Set a tooltip format of number, currency, percentage or duration for a descriptive label of values when moving your mouse over a series.
Decimal Places Select from four different formatting options.
Separators Select from eight different separator styles.
Prefix Add a letter before the last value, eg $.
Suffix Add a letter after the last value, eg M.

 

For a Sparkbar chart type:

 

Setting Description
Colors Choose different colors to highlight the positive, negative and zero values.
Comment

You can also set a tooltip format, range, decimal places, separators, prefix and suffix on a sparkbar chart.

Note: If your data includes a value that is outside the minimum and maximum range you set, that value will still display in your Klip.

 

For a Win/Loss chart type:

 

Setting Description
Threshold Set a value to determine what value constitutes a win or loss.
Color Choose different colors to highlight the win, draw and loss values.
Comment You can also set a tooltip format, decimal places, separators, prefix and suffix on a win/loss chart.

 

  1. From the Data panel, formula editing toolbar, build a formula similar to ARRAY( 12 , 14 , 8 ).
  2. Optional: Select the Indicators panel.
  3. Optional: Use relational operators to create if conditions to display an indicator, such as an icon or change of color.
  4. Click the Save button.
  5. Type a name for your Klip.
  6. Click the Finished button.

To add additional series

The Sparkline component provides you with the flexibility to add as many additional series as you want. You can configure each series for a different chart type and use the different formatting options available for each chart type. For example, you might want to add a win and loss chart to a sparkline chart.

To assign the last value

From the Sparkline component, Properties panel, you have the option to hide, display or customize the Last Value of your data set. If you have multiple series, you also have the option to assign the Last Value to a specific series.

Tip: By selecting Custom, Assign data to Last Value, the Last Value becomes a sub-component of the tree. You can use the Data panel to assign values and use a function like AVERAGE to display the Last Value as an average value, instead as the last value in a series.

To select indicators

To visualize your data, you can configure each Series to display an indicator or indicators based on an if/then condition. For example, for a Sparkline chart, you can display points, change point color, change line color, change end color, and change area color depending on the condition or conditions you set. Learn More: How to use indicators

Important concepts

These articles provide an overview of important concepts for building Klips: