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

    1.0.4 • Public • Published

    Sparkline SVG

    Generate a Sparkline as an SVG.

    Install

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

    Table of Contents

    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%'

    Keywords

    none

    Install

    npm i sparkline-svg

    DownloadsWeekly Downloads

    109

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • charlesstover