unusualcharts

Framework-agnostic chart components for flow/volume visualizations. Currently ships createSankeyChart and createChordChart; more chart types are planned. This is the engine — for framework wrappers, see react-unusualcharts, vue-unusualcharts, and ng-unusualcharts.

Install

npm i unusualcharts

Usage

import { createSankeyChart } from "unusualcharts";
import "unusualcharts/styles";

const data = {
  ethereum: {
    outFlow: [{ id: "solana", value: 55027314 }],
    inFlow: [{ id: "solana", value: 55059721 }],
  },
  solana: {
    outFlow: [{ id: "ethereum", value: 55059721 }],
    inFlow: [{ id: "ethereum", value: 55027314 }],
  },
};

const chart = createSankeyChart(document.getElementById("chart"), data, {
  onSelect: (id, side) => console.log(id, side),
});

// later:
chart.update(newData);
chart.destroy();

createSankeyChart(container, data, options)

Returns { update(data), destroy() }.

| Option | Type | Default | Description | |---|---|---|---| | valuePrefix / valueSuffix | string | "" | Text glued onto the default formatted number, e.g. valuePrefix: "$" → "$123,123,123". The easy way to label a unit. | | formatValue | (value: number) => string | plain locale-formatted number | Full override for how a node's value is displayed (ignores valuePrefix/valueSuffix) — use for custom decimals, compact notation, another locale, etc. | | config | ChartConfig | — | Colors, dimensions, maxVisibleItems, animations. | | onSelect | (id, side) => void | — | Fired when a source/target node is clicked. | | renderIcon | (label) => string \| null \| undefined | — | Return an image URL to show next to a node's label. The library has no idea what the label represents — icon lookup is entirely up to the caller. | | labelTransforms | Record<string, string> | {} | Label rewrites, e.g. fixing a specific label's casing. | | isDesktop / isBigDesktop | boolean | auto-detected | Override responsive breakpoint detection. | | sourceLabel / targetLabel | string | "Source" / "Target" | Column header labels. | | className | string | — | Class on the outer wrapper. |

createChordChart(container, data, options)

A Chord diagram: every node gets an arc around a circle, and every flow between two nodes becomes a ribbon connecting their arcs — unlike Sankey's two fixed columns, any node can connect to any other. Same data shape as createSankeyChart.

Returns { update(data), destroy() }.

| Option | Type | Default | Description | |---|---|---|---| | valuePrefix / valueSuffix | string | "" | Text glued onto the default formatted number. | | formatValue | (value: number) => string | plain locale-formatted number | Full override for how a value is displayed. | | config | ChartConfig | — | Colors, dimensions, maxVisibleItems, animations — shared with createSankeyChart. | | onSelect | (id: string) => void | — | Fired when a group (node arc) is selected, or with "" on deselect. | | renderIcon | (label) => string \| null \| undefined | — | Return an image URL to show next to a group's label. | | labelTransforms | Record<string, string> | {} | Label rewrites. | | isDesktop / isBigDesktop | boolean | auto-detected | Override responsive breakpoint detection. | | className | string | — | Class on the outer wrapper. |