mithril-sparkline

Generate SVG sparklines with Mithril. Based on SVG sparkline by fnando, but converted to a TypeScript-based Mithril component.

Installation

This lib is available as a NPM package. To install it, use the following command:

npm install mithril-sparkline --save

If you're using PNPM (and you should):

pnpm install mithril-sparkline

API

Sparkline

This package exposes a Mithril component, Sparkline, which can be used as any other component. It has the following attributes:

• entries: Array of numbers, or Array<{ value: number }>. Alternatively, you can use your own datatype and specify options.fetch.
• width: number; Width of the SVG.
• height: number; Height of the SVG.
• strokeWidth: number.
• options: SparklineOptions (see below).

export type SparklineOptions<T = SparklineEntry> = {
  /**
   * This function will be called whenever the mouse moves over the SVG.
   * You can use it to render something like a tooltip.
   */
  onmousemove: (event: MouseEvent, value: SparklineMouseMove<T>) => void;
  /**
   * This function will be called whenever the mouse leaves the SVG area.
   * You can use it to hide the tooltip.
   */
  onmouseout: (event: MouseEvent) => void;
  /**
   * Should we run in interactive mode?
   * If yes, this will handle the cursor and spot position when moving the mouse.
   */
  interactive?: boolean;
  /**
   * Define the size of the spot area (circle highlighting the selected point).
   * @default 2
   */
  spotRadius?: number;
  /**
   * Define the width of the cursor (vertical line).
   * @default 2
   */
  cursorWidth?: number;
  /**
   * By default, data must be formatted as an array of numbers or
   * an array of objects with the value key (like `[{value: 1}]`).
   * You can set a custom function to return data for a different data structure.
   */
  fetch?: (entry: T[]) => number;
};

Usage

This is the minimum working example. A more elaborate example can be found on CodePen or you can play with the source code here:

import { Sparkline } from './sparkline'

const app = {
  view: () => [
    m(Sparkline, { entries: [1, 5, 2, 4, 8, 3, 7], width: 300, height: 50 }),
  ],
}

m.mount(document.body, app);

You can change the colours by using CSS, like the following:

/* just the line */
.sparkline {
  stroke: red;
  fill: none;
}

/* line with highlight area */
.sparkline {
  stroke: red;
  fill: rgba(255, 0, 0, .3);
}

/* change the spot color */
.sparkline--spot {
  stroke: blue;
  fill: blue;
}

/* change the cursor color */
.sparkline--cursor {
  stroke: orange;
}

/* style fill area and line colors using specific class name */
.sparkline--fill {
  fill: rgba(255, 0, 0, .3);
}

.sparkline--line {
  stroke: red;
}