VarianceColumnChart

The workhorse period comparison: solid AC columns over the comparison scenario's own notation (PY solid grey, PL hollow frame, FC hatched), with an absolute or percent variance panel underneath.

When to use

Comparison / deviation across a few categories or periods - e.g. revenue by quarter, AC vs PY.

Example

import { VarianceColumnChart } from "ibcs-react";

<VarianceColumnChart
  data={[
    { category: "Jan", AC: 30.1, PY: 28.6 },
    { category: "Feb", AC: 27.4, PY: 28.9 },
  ]}
  comparison="PY"
  variance="abs" // or "pct" / "none"
  mark="bar" // or "pin"
  width={620}
  height={320}
/>;

More examples

Relative variance as pins

Switch the lower panel to percent and the marks to pins - Q4 is well ahead of last year, which the percent variance makes explicit.

<VarianceColumnChart data={quarterly} comparison="PY" variance="pct" mark="pin" />

Compare against plan (PL)

Point the variance at a different base - here actuals vs plan instead of prior year.

<VarianceColumnChart data={quarterly} comparison="PL" />

Props