Sparklines.js - Vanilla JavaScript Sparklines Library

View on GitHub

Disclaimer:
sparklines.js is a derivative work of jquery.sparkline.js v2.1.2
(c) Splunk, Inc., authored by Gareth Watts.
The original project was licensed under the New BSD License.
This library has been refactored and rewritten to remove the jQuery dependency, modernize the code, and adapt it for current browsers.
sparklines.js is released under the MIT License, with attribution to the original work as required.

Features

✅ No jQuery dependency - Pure vanilla JavaScript
✅ All 7 chart types: Line, Bar, Tristate, Discrete, Bullet, Pie, Box
✅ Interactive tooltips and hover effects
✅ Canvas and VML rendering support
✅ Composite charts (multiple sparklines layered)
✅ Data parsing from HTML content, attributes, and comments
✅ Customizable colors, sizes, and formatting
✅ Range maps and value lookups
✅ Custom events (sparklineClick, sparklineRegionChange)

Interactive Demo

Try out different chart types and options in real-time. Customize the settings below and see the changes instantly.

Chart Type:

Data (comma-separated):

Width:

Height:

Line Color:

Fill Color:

Bar Color:

Show Spots

Show Fill

Generated Code:

sparklines('#demo-chart', [1,4,6,6,8,5,3,5], { width: '80px', height: '30px' });

Interactive Chart

1,4,6,6,8,5,3,5

Web Components

You can use declarative custom elements for all chart types. Set values as a comma-separated list and options as kebab-case attributes. Works with the same script include.

Line, Bar, Tristate (declarative)

<spark-line values="1,4,6,6,8,5,3,5" width="80" height="30" line-color="#00f"></spark-line>
<spark-bar values="3,5,2,8,1" width="80" height="30" bar-color="#3366cc" bar-width="6" bar-spacing="2"></spark-bar>
<spark-tristate values="1,-1,0,1,0,-1,1" width="80" height="30"></spark-tristate>
          

Discrete, Bullet, Pie, Box

<spark-discrete values="1,2,1,2,3,2,1" width="80" height="30"></spark-discrete>
<spark-bullet values="150,120,50,100,150" width="120" height="30" range-colors="#d3dafe,#a8b6ff,#7f94ff"></spark-bullet>
<spark-pie values="30,20,50" width="60" height="60" slice-colors="#3366cc,#dc3912,#ff9900"></spark-pie>
<spark-box values="1,2,...,20" width="80" height="30"></spark-box>
          

Programmatic update

var el = document.getElementById('wc-live');
el.values = [1, 4, 6, 6, 8, 5, 3, 5];
el.options = { spotRadius: 3, lineWidth: 2 };
          

Line Charts

Line charts are the default chart type. They can display filled areas, spots, and normal ranges.

Basic Line Chart

1,4,6,6,8,5,3,5

            sparklines('#line1', [1,4,6,6,8,5,3,5], { width: '80px', height:
            '30px' });
          

Filled Line Chart with Spots

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

            sparklines('#line2', [2,4,3,1,5,4,6,8], { fillColor: '#cdf',
            lineColor: '#00f', spotColor: '#f80', spotRadius: 3, lineWidth: 2,
            width: '80px', height: '30px' });
          

Line Chart with Normal Range

3,7,2,9,1,4,6,8,2,5

            sparklines('#line3', [3,7,2,9,1,4,6,8,2,5], { normalRangeMin: 2,
            normalRangeMax: 7, normalRangeColor: '#ccc', fillColor: '#e8f4fd',
            width: '80px', height: '30px' });
          

Bar Charts

Bar charts display data as vertical bars. They support positive/negative values, stacking, and custom colors.

Basic Bar Chart

3,6,2,8,4,7,1,9

            sparklines('#bar1', [3,6,2,8,4,7,1,9], { type: 'bar', barColor:
            '#3366cc', barWidth: 6, barSpacing: 2, width: '80px', height: '30px'
            });
          

Bar Chart with Negative Values

5,-2,3,-1,4,-3,2,-4

            sparklines('#bar2', [5,-2,3,-1,4,-3,2,-4], { type: 'bar', barColor:
            '#3366cc', negBarColor: '#f44', zeroAxis: true, width: '80px',
            height: '30px' });
          

Stacked Bar Chart

2:3:1,1:2:2,3:1:1,2:2:3

            sparklines('#bar3', ['2:3:1','1:2:2','3:1:1','2:2:3'], { type:
            'bar', stackedBarColor: ['#3366cc', '#dc3912', '#ff9900'], width:
            '80px', height: '30px' });
          

Tristate Charts

Tristate charts display win/loss/draw data with different colors for positive, negative, and zero values.

Tristate Chart (Win/Loss/Draw)

1,1,-1,1,0,0,-1,1,-1,0

            sparklines('#tristate1', [1,1,-1,1,0,0,-1,1,-1,0], { type:
            'tristate', posBarColor: '#6f6', negBarColor: '#f44', zeroBarColor:
            '#999', width: '80px', height: '30px' });
          

Discrete Charts

Discrete charts display data as vertical lines of varying heights, useful for showing discrete values.

Discrete Chart

1,3,4,5,5,3,4,5,2,6

            sparklines('#discrete1', [1,3,4,5,5,3,4,5,2,6], { type: 'discrete',
            lineColor: '#00f', thresholdColor: '#f44', thresholdValue: 3, width:
            '80px', height: '30px' });
          

Bullet Charts

Bullet charts display performance against targets with qualitative ranges. Data format: [target, performance, range1, range2, range3].

Bullet Chart

10,12,12,9,7

            sparklines('#bullet1', [10,12,12,9,7], { type: 'bullet',
            targetColor: '#f33', performanceColor: '#33f', rangeColors:
            ['#d3dafe', '#a8b6ff', '#7f94ff'], width: '80px', height: '30px' });
          

Pie Charts

Pie charts display data as slices of a circle, showing proportions of a whole.

Pie Chart

3,2,4,1

            sparklines('#pie1', [3,2,4,1], { type: 'pie', sliceColors:
            ['#3366cc', '#dc3912', '#ff9900', '#109618'], borderWidth: 2,
            borderColor: '#000', width: '30px', height: '30px' });
          

Box Charts

Box charts display statistical data showing quartiles, median, outliers, and whiskers.

Box Chart

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20

            sparklines('#box1',
            [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], { type: 'box',
            boxLineColor: '#000', boxFillColor: '#cdf', whiskerColor: '#000',
            outlierLineColor: '#333', outlierFillColor: '#fff', medianColor:
            '#f00', width: '80px', height: '30px' });
          

Interactive Features

All charts support interactive features like tooltips, hover highlighting, and click events.

Interactive Line Chart with Custom Tooltip

5,8,3,9,2,7,4,6,8,1

            sparklines('#interactive1', [5,8,3,9,2,7,4,6,8,1], {
            tooltipChartTitle: 'Sales Data', tooltipPrefix: 'Value: ',
            tooltipSuffix: ' units', spotColor: '#f80', spotRadius: 3,
            highlightSpotColor: '#5f5', highlightLineColor: '#f22', width:
            '80px', height: '30px' }); // Add click event listener
            document.getElementById('interactive1').addEventListener('sparklineClick',
            function(e) { console.log('Chart clicked!', e.sparklines); });
          

Data Sources

Sparklines can read data from various sources: arrays, HTML content, attributes, and comments.

Data from HTML Content

4,6,2,8,5,3,7,1

            sparklines('.sparkline', null, { width: '80px', height: '30px' });
            // Reads data from HTML content
          

Data from HTML Comment

            <span
            class="sparkline-comment"><!--2,5,8,3,6,9,1,4--></span>
            sparklines('.sparkline-comment', null, { width: '80px', height:
            '30px' });
          

Data from Attribute

            <span class="sparkline-attr"
            values="7,3,9,2,5,8,1,6"></span>
            sparklines('.sparkline-attr', null, { width: '80px', height: '30px'
            });
          

Usage Examples

          // Basic usage sparklines('#element', [1,2,3,4,5], { width: '80px',
          height: '30px' }); // With options sparklines('#element', [1,2,3,4,5],
          { type: 'bar', barColor: '#3366cc', height: '30px', width: '80px' });
          // Multiple elements sparklines('.sparkline', [1,2,3,4,5], { width:
          '80px', height: '30px' }); // Read from HTML content
          sparklines('.sparkline', null, { width: '80px', height: '30px' }); //
          Reads data from element content // Enable tag options
          sparklines('.sparkline', [1,2,3,4,5], {enableTagOptions: true, width:
          '80px', height: '30px'}); // Then use: <span class="sparkline"
          sparkType="bar" sparkBarColor="red">1,2,3,4,5</span>
        