Main chart

Graphima (Greek: γράφημα) is an attempt to build full-featured WebAssembly-based monolith charts.
See "Can I Use" WebAssembly for browser support.

Tutorial

1. select an area within the main or the preview chart to zoom in
2. drag the camera within the preview chart (when zoomed in)
3. click the preview part to zoom out
4. click the main chart to freeze the tooltip (click once again to undo)
5. press and hold a legend item to select the series and deselect everything else
6. click the only selected legend item to select all

Nice bits

• default theme uses color-blind friendly palette (5 colors)
• automatic pseudo-log scale (log10(value - globalMinValue + 1000.0) - 3.0)
• proposed config defaults to sorting series by median in descending order (the first in the tooltip is the one with highest median)
• mobile friendly (+supports pinch gesture)
• tolerant to too many series (paginated legend + tooltip with max size)

Installation

graphima on npmjs.com

As IIFE module

iife module (Immediate Invoked Function Expression) makes it available as window.Graphima.

in index.html above your app code

<script src="https://unpkg.com/graphima@0.1.4/dist/index-iife.js"></script>

As ESM module

Run npm i graphima and then use a bundler of your choice (e.g. Rollup):

import Graphima from "graphima";

Code of the chart above

async function run() {
  const response = await fetch("./overview.json");
  const data = await response.json();

  const params = {
    selector: "#chart-1",
    contentName: "New chart",
    coordType: "date",
    valueType: "number",
    dataSets: [
      {
        name: data.names.y0,
        coords: data.columns[0].slice(1), // list of coordinates
        values: data.columns[1].slice(1), // list of values
      },
      {
        name: data.names.y1,
        coords: data.columns[0].slice(1),
        values: data.columns[2].slice(1),
      },
    ],
  };
  Graphima.createMain(params, CONFIG);
}

const CONFIG = {
  version: 1,
  fontStandard: "system-ui",
  fontMonospace: "monospace",
  fontSizeSmall: 10,
  fontSizeNormal: 12,
  fontSizeLarge: 14,
  fontWidthCoeff: 0.65,
  lineWidth: 1.5,
  circleRadius: 2,
  colorGrid: [237, 237, 237],
  colorTick: [142, 142, 142],
  colorCameraGrip: [0, 0, 255, 0.15],
  colorPreviewOverlay: [0, 0, 0, 0.4],
  colorPreviewHint: [255, 255, 255, 1],
  colorTooltip: [255, 255, 255, 1],
  colorTooltipFont: [0, 0, 0, 1],
  sortDataSetsBy: "medianDesc",
  layoutContentHeight: 5,
  layoutPreviewHeight: 1,
  layoutLegendHeight: 1.5,
  colorPalette: [
    [75, 216, 100],
    [254, 60, 47],
    [147, 12, 249],
    [54, 152, 224],
    [255, 221, 50],

    // same, but 1.7x darker
    [44, 127, 58],
    [149, 35, 27],
    [86, 7, 146],
    [31, 89, 131],
    [150, 130, 29],
  ],
  msLongPress: 500,
  // switch to pseudo-log scale if series cover 15x more vertical space than
  // when linear scale is used
  autoLogScaleThreshold: 15,
  expFmtSignificantDigits: 5,
};
run();