TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published


Sparkline is a very plain and usually smallish chart that is used to show a variation in a measurement. It is used for providing a quick-glance and simple information without extra bells and whistles.

Magx-Sparkline uses Lit as the base libray for creating the web components and Vite as the build tool.


See the index.html and main.ts files that show various different sparkline examples.

How To Use

Install the component using npm:

$ npm install magx-sparkline

View the examples:

$ npm run dev

Then connect on your browser to the localhost URL provided by Vite.

First create either instance of MagxSparkline class or declare <magx-sparkline> element in DOM. If you declare the element in DOM, you can define multiple different attributes to customize the sparkline. Similarly you can customize the component completely programmatically.

The key values to changes are the type of the sparkline (line chart / bar chart), the outlook of the line and filling, and the reference line y-position and outlook that defines, which values are over/under zero line.

New data can be added dynamically and the total amount of data points on the sparkline can be defined at will.

The key attributes to modify are:

Attribute Method on class HTML Attribute
Sparkline type setType() type
Background color setBackgroundColor() bckgCol
Line / bar outline width setLineWidth() lineWidth
Line / bar type and color(s) setLineColor() lineType, lineColor, lineAboveCol, lineBelowCol
Fill color between reference line and sparkline setFill() fillType, fillCol, fillAboveCol, fillBelowCol
Reference line type setReferenceLine() refLineType, refLineYPos
Reference line width setReferenceLineWidth() refLineWidth
Reference line color setReferenceLineColor() refLineColor
Endpoint marker color and radius setEndpoint() endpointCol, endpointRadius
Set lower bound limit setLowerBound() lowerBound
Set upper bound limit setUpperBound() upperBound
Cap values on lower bound setCap() capBelow
Cap values on upper bound setCap() capAbove
Set data setDataPointNum(), addDatapoint(), setData() data

Package Sidebar


npm i magx-sparkline

Weekly Downloads






Unpacked Size

28.2 kB

Total Files


Last publish


  • mlalmanpm2