sparkline.js

Lightweight sparkline based on SVG. 基于 SVG 的轻量级缩略可视化图形。

Install

npm i --save sparkline.js

Then import it.

import { Chart, registerTheme } from 'sparkline.js';

or import it by script in HTML, then get SL on window.

<script src="https://unpkg.com/sparkline.js/dist/sparkline.min.js"></script>

Usage

• Line

import { Chart } from 'sparkline.js';

const values = [5,3,2,-1,-3,-2,2,3,5,2];

const line = new Chart.Line({ width: 32, height: 16 });

line.value(values).render('.line');

• Bar

import { Chart } from 'sparkline.js';

const values = [5,3,2,-1,-3,-2,2,3,5,2];

new Chart.Bar({ width: 32, height: 16 }).value(values).render('.bar');

• Pie

import { Chart } from 'sparkline.js';

const values = [1,1,1,8,2,4];

new Chart.Pie({ width: 32, height: 32, theme: 'dark' }).value(values).render('.pie');

Theme

The project contains 2 theme named dark, light. You can customize theme of chart by yourself with API registerTheme.

import { registerTheme } from 'sparkline.js';

registerTheme('theme-name', themeObject);

Then you can use it in charts.

License

MIT@hustcc.