IntegratedVarianceChart

The signature integrated variance column chart: three tiers over one time axis

• relative deviation as pins on top, absolute deviation as bars in the middle, and the AC columns with the comparison overlaid at the bottom. Forecast periods are hatched, and an optional full-year total column is set apart on the right.

When to use

A monthly actual-vs-plan (or vs previous year) story where you want the values, the absolute deviation and the relative deviation read together - with a hatched forecast tail and an optional full-year total.

Example

import { IntegratedVarianceChart } from "ibcs-react";

<IntegratedVarianceChart
  title="Contribution margin - AC vs PY"
  comparison="PY" // or "PL" (plan renders as a hollow frame)
  data={[
    { category: "Jan", AC: 128, PY: 115 },
    { category: "Feb", AC: 147, PY: 134 },
    // … forecast months carry isForecast: true -> hatched
    { category: "Dec", AC: 211, PY: 183, isForecast: true },
  ]}
  fyTotal={{
    label: "2,036",
    segments: [
      { label: "AC", value: 1458 },
      { label: "FC", value: 578 },
    ],
  }}
/>;

Either deviation tier can be dropped (showPctPanel, showAbsPanel) when only one of them carries the message. For a cost or expense measure set higherIsBetter={false} so a rise reads as unfavorable.

Use GroupedVarianceChart instead when the comparison should stand beside AC rather than behind it.

Props