vue-unusualcharts

Vue wrapper for unusualcharts to build interactive flow/volume visualizations in Vue. Currently ships SankeyChart and ChordChart; more chart types are planned.

Install

npm i vue-unusualcharts

Usage

<script setup>
import { SankeyChart } from "vue-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 }],
  },
};
</script>

<template>
  <SankeyChart :data="data" />
</template>

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". | | 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. | | 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. |

vue-unusualcharts