react-unusualcharts

React chart components for flow/volume visualizations. Currently ships SankeyChart, a Sankey-style source→target flow diagram; more chart types are planned. Thin React wrapper around unusualcharts, which does all the actual rendering.

Install

npm i react-unusualcharts

Usage

import { SankeyChart } from "react-unusualcharts";

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

export default function App() {
  return <SankeyChart data={data} />;
}

SankeyChart props

| Prop | Type | Default | Description | |---|---|---|---| | data | Record<string, { outFlow?: {id, value}[]; inFlow?: {id, value}[] }> | array form | — | Required. Id-keyed flow data. | | 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. | | labelTransforms | Record<string, string> | {} | Label rewrites, e.g. fixing a specific label's casing. | | isDesktop / isBigDesktop | boolean | auto-detected | Override responsive breakpoint detection. | | className | string | — | Class on the outer wrapper. |

ChordChart props

| Prop | Type | Default | Description | |---|---|---|---| | data | same as SankeyChart | — | Required. Id-keyed flow data. | | 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. | | onSelect | (id: string) => void | — | Fired when a group 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. |