Component library

Charts - Sparkline

Last updated 2 November 2026

Defines a Sparkline Chart.

Live demo

<ins-sparkline 
  id="sparkLineChartID" 
  icon="icon-analytic-1" 
  name="Profits" 
  value="370"
  percentage="26" 
  description="From previous year" 
  movement="0
  tooltip="This is a sample tooltip content. It also support html content."">

<script>
  var data = [
    ["2017-12-18", 13],
    ["2017-12-25", 0],
    ["2018-01-01", 6],
    ["2018-01-08", 8],
    ["2018-03-12", 4],
    ["2018-06-01", 2],
    ["2018-08-08", 0]
  ]

  var sparklineChartEl = document.getElementById('sparkLineChartID');
  sparklineChartEl.addEventListener('didLoad', function(e){
    sparklineChartEl.chartData = data;
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
icon	string	"icon-user-1"	icon-close-1, icon-utilities, icon-lock-1 ...	Defines icon of chart
name	string	"Sparkline"	any	Defines name of chart
value	string	"0"	any	Defines value of chart
chart-data	any		any value separated by comma	Defines chart data
percentage	any	"0"	any	Defines percentage of chart data
description	string	"N/A"	any	Defines description of chart
movement	any	"none"	increase, decrease, none	Defines movement of chartdata either up or down

Examples

Default State

<ins-sparkline></ins-sparkline>

Direct Data Source

<ins-sparkline 
  id="directDataSourceSpark"
  name="Direct Data Source"
  icon="icon-user-1"
  value="720"
  percentage="7"
  description="From previous year"
  movement="1">
</ins-sparkline>

<script>
  var data = [
    ["2017-12-18", 13],
    ["2017-12-25", 0],
    ["2018-01-01", 0],
    ["2018-01-08", 8]
  ]

  var directDataSourceSpark = document.getElementById('directDataSourceSpark');
  directDataSourceSpark.addEventListener('didLoad', function(e){
  directDataSourceSpark.chartData = data;
  });

</script>

Static Data Source

<ins-sparkline
  id="staticDataSource"
  icon="icon-analytic-1"
  name="Static Data Source"
  value="720"
  percentage="7"
  description="From previous year"
  movement="increase">
</ins-sparkline>

<script>
  var data = [
    ["2017-12-18", 13],
    ["2017-12-25", 0],
    ["2018-01-01", 0],
    ["2018-01-08", 8]
  ]

  var staticDataSource = document.getElementById('staticDataSource');
  staticDataSource.addEventListener('didLoad', function(e){
    staticDataSource.chartData = data;
  });
</script>