RankingVarianceChart

Rows sorted by deviation: AC bars with the comparison overlaid, then the absolute variance as bars, then the relative variance as pins - with a bold total row underneath.

When to use

Rank entities (regions, states, products) by their variance vs plan - see who beats and who misses, with absolute and relative deviation side by side and a bold total.

Example

import { RankingVarianceChart } from "ibcs-react";

<RankingVarianceChart
  title="Net sales by state - AC vs Plan"
  baseLabel="PL"
  sortBy="variance" // "variance" | "value" | "none"
  data={[
    { label: "California", AC: 188, base: 154 },
    { label: "Texas", AC: 197, base: 201 },
    { label: "Virginia", AC: 69, base: 166 },
  ]}
/>;

The relative panel is the reason small bases stay honest: a tiny entity can double while contributing almost nothing in absolute terms. Percentages beyond clampPct draw an off-scale arrow instead of stretching the whole scale for one outlier.

baseLabel is what the headers say - set it to "PY" when the base values are last year's.

Props