SparkCharts.js

Lightweight bar chart sparklines using inline SVG. All sizing and colors are automatic based on typography / styling.

See index.html (on GitHub Pages) for examples.

Usage

1. Include the script:

<script src="sparkcharts.js"></script>

2. Add the attribute data-sparkchart="true" to any element with data:

<span data-sparkchart="true">10, 20, 30</span>

Note: You may also use jsDelivr to source the library from GitHub¹:

<script src="https://cdn.jsdelivr.net/gh/colinhb/sparkcharts.js@81df262/sparkcharts.js"></script>

Features

• Typography-responsive: Charts automatically scale with font-size
• CSS colors: Inherits color from CSS color property
• Fixed scale: Optional max value, supplied after a ;: <span data-sparkchart="true">1, 2, 3; 10</span>
• Accessible: Includes ARIA labels and tooltips

History

This library was developed to support easy "distribution reporting" of public opinion data online. For example, see this release.

Footnotes

1. I'm using a specific commit here. You should probably do the same. ↩