How to build Sparkline components



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.


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.
    • 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.
  5. From the Data panel, formula editing toolbar, build a formula similar to ARRAY( 12 , 14 , 8 )For more information about building these formulas, see How to use sparkline, sparkbar, and win/loss charts.
  6. Optional: Select the Indicators panel.
  7. Optional: Use relational operators to create if conditions to display an indicator, such as an icon or change of color.
  8. Click the Save button.
  9. Type a name for your Klip.
  10. 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:

Feedback and Knowledge Base