SparkCharts.js Demo

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

On GitHub at colinhb/sparkcharts.js

Quick Start

  1. Include the script: <script src="sparkcharts.js"></script>
  2. Add the attribute to any element with data: <span data-sparkchart="true">10, 20, 30</span>
  3. Done! The chart renders automatically:

    10, 20, 30

Typography-Responsive Sizing

Charts automatically scale with the font-size of their container:

<span data-sparkchart="true">2, 3, 5, 7, 11, 13, 17</span>

2, 3, 5, 7, 11, 13, 17

<span class="large-font" data-sparkchart="true">2, 3, 5, 7, 11, 13, 17</span>

2, 3, 5, 7, 11, 13, 17

<span class="small-font" data-sparkchart="true">2, 3, 5, 7, 11, 13, 17</span>

2, 3, 5, 7, 11, 13, 17

Color via CSS

Color is inherited from CSS color property:

<span data-sparkchart="true">27, 82, 41, 124, 62, 31</span>

27, 82, 41, 124, 62, 31

<span class="green" data-sparkchart="true">27, 82, 41, 124, 62, 31</span>

27, 82, 41, 124, 62, 31

<span class="red" data-sparkchart="true">27, 82, 41, 124, 62, 31</span>

27, 82, 41, 124, 62, 31

Inline Styles

Use inline styles for custom colors and sizes:

<span style="color: blue;" data-sparkchart="true">2, 3, 5, 8, 3, 1, 4</span>

2, 3, 5, 8, 3, 1, 4

<span style="font-size: 2em;" data-sparkchart="true">2, 3, 5, 8, 3, 1, 4</span>

2, 3, 5, 8, 3, 1, 4

Fixed Maximum Scale

Add a semicolon and max value after the data points:

<span data-sparkchart="true">1, 3, 4, 7, 6, 12, 8, 15; 50</span>

1, 3, 4, 7, 6, 12, 8, 15; 50

If max is less than the largest data point, it will be overridden (check console):

<span data-sparkchart="true">1, 3, 4, 7, 6, 12, 8, 15; 10</span>

1, 3, 4, 7, 6, 12, 8, 15; 10

Negative Values

Negative values generate a console warning and are rendered as zero-height bars:

<span data-sparkchart="true">1, -2, 4, -10, 24, -64, 176</span>

1, -2, 4, -10, 24, -64, 176

Values -2, -10, and -64 appear as zero-height bars.

Tone Mode

Use data-sparkchart-mode="tone" for "tone" charts (an experimental visualization):

<span data-sparkchart="true" data-sparkchart-mode="tone">1, 3, 6, 10, 15, 21, 28</span>

1, 3, 6, 10, 15, 21, 28

<span data-sparkchart="true" data-sparkchart-mode="tone">27, 82, 41, 124, 62, 31</span>

27, 82, 41, 124, 62, 31

<span data-sparkchart="true" data-sparkchart-mode="tone">1, 3, 4, 7, 6, 12, 8, 15</span>

1, 3, 4, 7, 6, 12, 8, 15

Edge Cases

No data points results in an empty chart:

<span data-sparkchart="true"></span>

Non-numeric and empty points dropped (only 12, 34, 56 rendered):

<span data-sparkchart="true">abc, , 12, def, 34, 56</span>

abc, , 12, def, 34, 56

All zeros result in a flat chart:

<span data-sparkchart="true">0, 0, 0, 0, 0</span>

0, 0, 0, 0, 0

Accessibility

Charts automatically include ARIA labels for screen readers. Each bar has a title element for tooltips:

<span data-sparkchart="true">1, 1, 2, 2, 4, 2, 6</span>

1, 1, 2, 2, 4, 2, 6

Right-click and "Inspect Element" to see role="img" and aria-label attributes on the SVG.

Configuration

Configuration object in sparkcharts.js:

const CONFIG = {
    BAR_WIDTH_EM: 1,                // Each bar is 1em wide
    HEIGHT_EM: 2,                   // Chart height is 2em
    GAP_EM: 0.2,                    // 0.2em gap between bars
    QUIET: false,                   // Set to true to suppress warnings
    FALLBACK_FONT_SIZE: 16,         // Default font size if unavailable
    FALLBACK_COLOR: 'currentColor', // Default color if unavailable (a CSS keyword)
};