ng-unusualcharts

Angular wrapper for unusualcharts to build interactive flow/volume visualizations in Angular. Currently ships SankeyChartComponent and ChordChartComponent; more chart types are planned.

Install

npm i ng-unusualcharts

Add the base styles once, globally (e.g. in angular.json's styles array, or a global stylesheet):

"styles": ["node_modules/unusualcharts/dist/index.css"]

Usage

import { Component } from "@angular/core";
import { SankeyChartComponent } from "ng-unusualcharts";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [SankeyChartComponent],
  template: `<unusual-sankey-chart [data]="data" />`,
})
export class AppComponent {
  data = {
    ethereum: {
      outFlow: [{ id: "solana", value: 55027314 }],
      inFlow: [{ id: "solana", value: 55059721 }],
    },
    solana: {
      outFlow: [{ id: "ethereum", value: 55059721 }],
      inFlow: [{ id: "ethereum", value: 55027314 }],
    },
  };
}

SankeyChartComponent (unusual-sankey-chart) inputs

| Input | 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". | | formatValue | (value: number) => string | plain locale-formatted number | Full override for how a node's value is displayed (ignores valuePrefix/valueSuffix). | | config | ChartConfig | — | Colors, dimensions, maxVisibleItems, animations. | | onSelect | (id, side) => void | — | Fired when a source/target node is clicked. Plain callback input, not an @Output(), to keep parity with the other wrappers. | | 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. |

ChordChartComponent (unusual-chord-chart) inputs

| Input | Type | Default | Description | |---|---|---|---| | data | same as SankeyChartComponent | — | 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. |

ng-unusualcharts