Dependency wheel chart

A dependency wheel chart is a type of flow diagram, where nodes are laid out in a circle, and links are drawn between them. The width of the link and size of the nodes are proportional to the flow quantity or weight of each link. Use it to show the relationships among entities, for example, the dependencies between tasks in a project.

Buckets

Sorting

The dependency wheel applies no default sorting. DependencyWheelChart accepts a sortBy prop but doesn’t add it to the execution, so the prop has no effect.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• A dependency wheel can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
• A dependency wheel renders up to 10,000 nodes and 10,000 links. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { DependencyWheelChart } from "@gooddata/sdk-ui-charts";

<DependencyWheelChart
    measure={<measure>}
    attributeFrom={<attribute>}
    attributeTo={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { DependencyWheelChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };
const config = {
    separators: { decimal: ".", thousand: "," },
    legend: { position: "auto", enabled: true },
    dataLabels: { visible: false },
};

<div style={style}>
    <DependencyWheelChart
        measure={Md.TotalSales}
        attributeFrom={Md.MenuCategory}
        attributeTo={Md.LocationState}
        config={config}
    />
</div>

Props