quisido / sparkline-svg

Generate a Sparkline as an SVG.

Sparkline SVG

Generate a Sparkline as an SVG.

Install

• npm install sparkline-svg or
• yarn add sparkline-svg

Table of Contents

• Use
  • d
  • dataUri
  • outerHTML
  • setDecimals
  • setDesc
  • setDescription
  • setFill
  • setHeight
  • setPreserveAspectRatio
  • setStroke
  • setStrokeWidth
  • setTitle
  • setValues
  • setViewBoxHeight
  • setViewBoxWidth
  • setWidth

Use

The sparkline-svg package exports a Sparkline class, which can be constructed with or without an array of values used to generate the sparkline.

import Sparkline from 'sparkline-svg';

const sparkline= new Sparkline();
// or
const sparkline = new Sparkline(values);

get d(): string

sparkline.d returns the <path />'s d attribute for the sparkline (stroke) itself.

get dataUri(): string

sparkline.dataUri returns the sparkline SVG as a data URI, i.e. data:image/svg+xml;base64,.... This is particularly useful for CSS background images.

get outerHTML(): string

sparkline.outerHTML returns a string of the HTML for an SVG containing the sparkline.

setDecimals(decimals: number): this

Sets the number of decimal places used to generate the sparkline. A larger number of decimal places will result in better precision, but a larger file size.

Default: 4

setDesc(desc: string): this

Sets the description of the sparkline. Used to populate the <desc> element.

Default: 'A line graph representation of a value's change over time.'

setDescription(desc: string): this

Synonymous with setDesc.

setFill(fill: string): this

Sets the color of the area underneath the sparkline.

Default: 'transparent'

setHeight(height: string): this

Sets the height of the sparkline's SVG element. Not to be confused with setViewBoxHeight.

Default: '100%'

setPreserveAspectRatio(preserveAspectRatio: string): this

Sets the preserveAspectRatio attribute of the SVG element.

Default: 'none'

setStroke(stroke: string): this

Sets the color of the sparkline itself.

Default: 'currentColor'

setStrokeWidth(strokeWidth: number | string): this

Sets the width of the sparkline itself. If using a number, this will be relative to the view box height and width.

Default: '1%'

setTitle(title: string): this

Sets the title of the sparkline SVG by populating the <title> element. This is useful for accessibility purposes and often appears as a tooltip, similar to the title attribute on an anchor tag.

Default: 'Sparkline'

setValues(values: number[]): this

Sets the values used to generate the sparkline. These can also be provided in the constructor.

Default: []

setViewBoxHeight(viewBoxHeight: number): this

Sets the height of the sparkline's view box. Not to be confused with setHeight. The sparkline will always stretch to fit the view box.

Default: 100

setViewBoxWidth(viewBoxWidth: number): this

Sets the width of the sparkline's view box. Not to be confused with setWidth. The sparkline will always stretch to fit the view box.

Default: 100

setWidth(width: string): this

Sets the width of the sparkline's SVG element. Not to be confused with setViewBoxWidth.

Default: '100%'

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.

sparkline-svg's Issues

Raise typescript target / ship source

What do you think about raising the target to avoid shipping some of the polyfills?

https://cdn.jsdelivr.net/npm/[email protected]/index.js

Could also include the source code in the distributable to provide some flexibility for consumers.

Happy to open a PR if any of this sounds good. Thanks for sharing the package!

Accommodate stroke width in getD

Hey! Thanks for sharing this lib, it's awesome 🤙

I noticed the apex of the stroke tends to be clipped. It's noticeable when it occurs in the middle of the sparkline. What do you think about adding some logic to getD to accommodate the stroke width?