Sparkline

xxxxxxxxxx
 
1
<ef-sparkline reference-value="0" data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

1
 
1
​

xxxxxxxxxx
 
1
ef-sparkline {
2
  width: 250px;
3
  height: 100px;
4
}

ef-sparkline is a small chart component for quickly representing historical data without axes.

Basic usage

To create a sparkline, pass data as an array of numbers using the data attribute. The style of the sparkline is managed by the theme, but chart size can be customized using standard CSS.

xxxxxxxxxx
 
1
<ef-sparkline data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

1
 
1
​

xxxxxxxxxx
 
1
ef-sparkline {
2
  width: 200px;
3
  height: 100px;
4
}

ef-sparkline {
  width: 200px;
  height: 100px;
}

<ef-sparkline data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

Reference line

Sparkline supports adding a reference line. The area above or below the reference line will be filled with different colors. The reference value can be set using the reference-value attribute or the referenceValue property.

xxxxxxxxxx
 
1
<ef-sparkline reference-value="0" data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

1
 
1
​

xxxxxxxxxx
 
1
ef-sparkline {
2
  width: 200px;
3
  height: 100px;
4
}

<ef-sparkline reference-value="0" data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

Display previous data

Sparkline can be set to display previous data with an inactive line color. It's common to use previous data for comparison with the current dataset.

When previous-data is provided, sparkline will use the value of last point in the dataset as a reference line. It is recommended to not set reference-value when previous data is used.

xxxxxxxxxx
 
1
<ef-sparkline previous-data="[-3, -2, 1, 0, 4, 2, -2, 4, 4, 6, -1]" data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 3, 4, 3, 6]"></ef-sparkline>

1
 
1
​

xxxxxxxxxx
 
1
ef-sparkline {
2
  width: 200px;
3
  height: 100px;
4
}

<ef-sparkline previous-data="[-3, -2, 1, 0, 4, 2, -2, 4, 4, 6, -1]" data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 3, 4, 3, 6]"></ef-sparkline>

Customize colors and line width

Sparkline colors and line width are managed by the theme but can be overridden using CSS variables.

xxxxxxxxxx
 
1
<ef-sparkline custom-line-color data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>

1
 
1
​

xxxxxxxxxx
 
1
ef-sparkline[custom-line-color] {
2
  width: 200px;
3
  height: 100px;
4
  --line-color: #D94255;
5
  --line-width: 5px;
6
}

<style>
  ef-sparkline[custom-line-color] {
    --line-color: #D94255;
    --line-width: 5px;
  }
</style>
<ef-sparkline custom-line-color data="[-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 9, 10, 9, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6]"></ef-sparkline>