sparklines.css

Installation

To use sparklines.css in your project:

1. Install the package via npm:

npm install sparklines.css

2. Register the worklet:

(async () => {
    if (!CSS["paintWorklet"]) {
        await import("https://unpkg.com/css-paint-polyfill");
    } else {
        CSS.paintWorklet.addModule('https://unpkg.com/[email protected]/dist/sparklines.min.js');
    }
})();

3. Customize it in your CSS:

@layer sparklines {

    :root {
        --chart-color: #dcff52;
        --chart-data: 110, 55, 62, 15, 48, 19, 30, 27, 11, 23, 21, 29, 12, 38, 25, 17, 5, 20, 32, 28, 13, 36, 24, 87, 45, 90, 58, 47, 11, 23;
        --max-data-points: 30;
        --bar-width: 2;
        --line-width: 1;
        --fill-type: gradient;
        --fill-opacity: 0.5;
        --gradient-opacity: 0.5;
        --padding-vertical: 10;
        --padding-horizontal: 20;
    }

    .chart {
        background: paint(sparklines);

        &.line {
            --chart-type: line; 
        }

        &.bar {
            --chart-type: bar; 
        }
    }
}

4. Use it in your HTML (example combined with tailwind for utility styles):

<div class="p-6 flex flex-row">
    <div class="chart line h-[75px] w-1/2 place-self-center"></div>
    <div class="chart bar h-[75px] w-1/2 place-self-center"></div>
</div>

Browser Support

If you need to support browsers that do not natively support the CSS Paint API, you can use a polyfill:

if (!CSS["paintWorklet"]) {
    await import("https://unpkg.com/css-paint-polyfill");
} else {
    CSS.paintWorklet.addModule('https://unpkg.com/[email protected]/dist/sparklines.min.js');
}

For more information on browser support for the CSS Paint API, you can check the compatibility on can I use.

Demo

Live demo here.

Contributing

Feel free to submit issues or pull requests to improve the package.

License

This project is licensed under the MIT License - see the LICENSE file for details.