Socket
Socket
Sign inDemoInstall

@rowno/sparkline

Package Overview
Dependencies
18
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @rowno/sparkline

Lightweight React sparklines ✨ 📈


Version published
Weekly downloads
511
increased by4.93%
Maintainers
1
Install size
1.29 MB
Created
Weekly downloads
 

Readme

Source

sparkline

Build Status Dependency Status

Lightweight React sparklines ✨ 📈

Example sparkline

Install

yarn add @rowno/sparkline
# or
npm install --save @rowno/sparkline

Example

function Spark() {
  const lines = [
    {
      values: [789, 880, 676, 200, 890, 677, 900],
      colors: {
        area: 'rgba(217, 227, 237, 0.5)',
        line: '#193652'
      }
    }, {
      values: [354, 456, 200, 566, 344, 467, 545],
      colors: {
        area: 'rgba(199, 228, 255, 0.5)',
        line: '#004585'
      }
    }
  ]

  return (
    <Sparkline
      width={56}
      height={12}
      lines={lines}
      />
  )
}

Outputs: Example output

Properties

{
  width: 56,
  height: 12,
  lines: [{
    values: [789, 880, 676],
    colors: {
      area: 'rgba(217, 227, 237, 0.5)',
      line: '#193652'
    },
    title: 'Allowed events',
    key: 'allowed'
  }]
}

width

Type: number (required)

Width of the sparkline.

height

Type: number (required)

Height of the sparkline.

lines

Type: array<object> (required)

Objects defining the lines to draw.

values

Type: array<number> (required)

Numbers that make up the data points of the line.

colors

Type: object

Custom colors for the line.

area

Type: string

Color of the line's filled in area.

line

Type: string

Color of the line's stroke.

title

Type: string

title of the line. Shown as a tooltip in the browser.

key

Type: any

Unique React key of the line.

License

sparkline is released under the ISC license.

Copyright © 2017, Roland Warmerdam.

Keywords

FAQs

Last updated on 18 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc