Skip to content

taliator/sparklines

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Library to generate SVG sparklines

Usage

HTML

<div class="sparkline" data-values="1,4,3,6,5"></div>
<div class="sparkline sparkline-filled" data-values="1,4,3,6,5"></div>
<script src="sparklines.js"></script>

Javascript

Pass a selector to the function.

sparklines( '.sparkline' );

Optionally pass an aspectRatio.

var el = document.getElementById( 'foo' ),
    aspectRatio = foo.clientWidth / foo.clientHeight;

sparklines( '.sparkline', aspectRatio );

// OR

sparklines( '.sparkline', 2.5 )

CSS

Set line and fill colors.

.sparkline svg {
    stroke: rgb( 70, 200, 255 );
}
.sparkline-filled svg {
    fill: rgba( 70, 200, 255, 0.25 );
}

About

SVG sparklines

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.5%
  • HTML 8.1%
  • CSS 2.4%