Insites Docs Web Components V2Data DisplayCharts - Sparkline

Charts - Sparkline

Published on February 18, 2021, updated on June 01, 2021

Element: <ins-sparkline>

Defines a Sparkline Chart.

Complete Example

Code Snippet

<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>
Default State

Code Snippet

<ins-sparkline></ins-sparkline>
Direct Data Source

Code Snippet

<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

Code Snippet

<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>

 

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

 

Have a suggestion for this page?

Send your suggestions using this form.