open-index/open-npm huggingface dataset:
npm package: @qumeleon/sparklines
Description: Sparklines
Author: Rene Buhrs
Latest version: 1.0.2

# Sparklines

## Install

```javascript
npm install @qumeleon/sparklines
````

## Quick start

### Line graph

![](https://github.com/Qumeleon/sparklines/blob/main/packages/Examples/example_sparkline_graph.png?raw=true)

````javascript
// create an element on your page which will contain the sparkline
const myDiv = document.createElement('div')
myDiv.setAttribute('style', 'width: 100px; background: #fff; padding: 5px')

// your values (data)
const values = [1, 3, 9, -4, 7, 2, 12, 0, 1]

// create the sparkline
const sparkLine = new SparkLineGraph({
    width: 100,
    height: 50,
    // color any valid css color name or hex/rgb(a) code
    // if not specified 'currentColor' is used
    color: 'gray'
}, values)

// render the sparkline, and attach it to your element
myDiv.appendChild(sparkLine.render())
````

### Column chart

![](https://github.com/Qumeleon/sparklines/blob/main/packages/Examples/example_sparkline_column_chart.png?raw=true)

```javascript
const myDiv = document.createElement('div')
myDiv.setAttribute('style', 'width: 100px; background: #fff; padding: 5px')

// your values (data)
const values = [8, 23, 9, -4, 7, 21, 4, 12]

// create the sparkline
const sparkLine = new SparkLineColumnChart({
  width: 100,
  height: 50,
  color: '#5fadf5'
}, values)

// render the sparkline, and attach it to your element
myDiv.appendChild(sparkLine.render())
```

### Win / Loss

![](https://github.com/Qumeleon/sparklines/blob/main/packages/Examples/example_sparkline_win_loss.png?raw=true)

````javascript
// create an element on your page which will contain the sparkline
const myDiv = document.createElement('div')
myDiv.setAttribute('style', 'width: 160px; background: #fff; padding: 5px')

// your values (win loss points)
// note that these can be any positive/negative numbers
const winLossPoints = [18, -3, 9, -4, 7, -21, 4, 12]

// create the sparkline
const sparkLine = new SparkLineWinLoss({
  width: 160,
  height: 40,
  colorWin: 'green',
  colorLoss: 'red',
}, winLossPoints)

// render the sparkline, and attach it to your element
myDiv.appendChild(sparkLine.render())
````

### Line graph with markers (dots)

![](https://github.com/Qumeleon/sparklines/blob/main/packages/Examples/example_sparkline_graph-with-dots.png?raw=true)

````javascript
// create an element on your page which will contain the sparkline
const myDiv = document.createElement('div')
myDiv.setAttribute('style', 'width: 200px; background: #fff; padding: 5px')
// your values (data)
const values = [1, 3, 9, -4, 7, 2, 12, 0, 1]
// create the sparkline
const sparkLine = new SparkLineGraph({
    width: 180,
    height: 60,
    lineWidth: 1.67, // optional
    markers: {
        color: 'blue', // any valid css color name or hex/rgb(a) code
        size: 5
    }
}, values)

// render the sparkline, and attach it to your element
myDiv.appendChild(sparkLine.render())
````
npm package: @qumeleon/sparklines-react
Description: A reusable sparklines component for react
Author: Qumeleon
Latest version: 1.0.18

# Sparklines-react

## Install

```javascript
npm install @qumeleon/sparklines-react
````

## Quick start

### Line graph

![](./Examples/example_sparkline_graph.png)

````javascript
<SparkLinesComponent
  // set the values to be used in the sparkline
  values={[1, 3, 9, -4, 7, 2, 12, 0, 1]}
  // set the settings used for SparkLineGraph, this is customizable
  settings={{
    width: 100,
    height: 50,
    line: {
      stroke: {
        color: 'gray'// any valid css color name or hex/rgb(a) code
      }
    }
  }}
    // set the sparkline type
    type="SparkLineGraph"
  />
````

### Column chart

![](./Examples/example_sparkline_column_chart.png)

```javascript
  <SparkLinesComponent
    // set the values to be used in the sparkline
    values={[8, 23, 9, -4, 7, 21, 4, 12]}
    // set the settings used for SparkLineColumnChart, this is customizable
    settings={{
      width: 100,
      height: 50,
      bars: {
       fill: {
        color: '#5fadf5'// any valid css color name or hex/rgb(a) code
      }
    }}}
    // set the sparkline type
    type="SparkLineColumnChart"
  />
```

### Win / Loss

![](./Examples/example_sparkline_win_loss.png)

````javascript
  <SparkLinesComponent
    // set the values to be used in the sparkline
    values={[18, -3, 9, -4, 7, -21, 4, 12]}
    // set the settings used for SparkLineWinLoss, this is customizable
    settings={{
      width: 160,
      height: 40,
      bars: {
       fill: {
        colorForPositiveValues: '#008700',// any valid css color name or hex/rgb(a) code
        colorForNegativeValues: '#c00000',
      }
    }}}
    // set the sparkline type
    type="SparkLineWinLoss"
  />
````

### Line graph with markers (dots)

![](./Examples/example_sparkline_graph-with-dots.png)

````javascript
  <SparkLinesComponent
    // set the values to be used in the sparkline
    values={[1, 3, 9, -4, 7, 2, 12, 0, 1]}
    // set the settings used for SparkLineGraphDots, this is customizable
    settings={{
      width: 180,
      height: 60,
      line: {
        stroke: {
          color: '#333'// any valid css color name or hex/rgb(a) code
      },
      strokeWidth: 1.67, // optional
      dots: {
        fill: {
        color: 'blue', // any valid css color name or hex/rgb(a) code
      },
      size: 5
    }}}}
    // set the sparkline type
    type="SparkLineGraphDots"
  />
````