TrendChart

Actuals as solid columns, forecast periods hatched, prior year and plan drawn as reference lines over them, and a variance panel underneath. A summary row is set off as a total - on its own terms: summaries stay out of the period scale, so a full-year total is drawn capped with a marked scale break and its value label instead of crushing the months into slivers.

When to use

Trend over time - 12-13 periods with actuals then forecast, against prior year and plan.

Example

import { TrendChart } from "ibcs-react";

<TrendChart
  data={months} // { category, AC?, FC?, PY?, PL?, summary? }
  comparison="PY"
  referenceLines={["PY", "PL"]}
/>;

More examples

Relative variance vs plan

Compare the forecast tail against plan as a percent - the hatched FC periods carry through to the percent variance panel.

<TrendChart data={months} comparison="PL" variance="pct" />

Reference lines follow IBCS notation: PY solid with dots, PL dashed. Drop one by narrowing referenceLines, e.g. referenceLines={["PY"]}.

A year plus its total

Mark the total with summary: true. It is set off by a divider, drawn in the emphasis colour - and kept OFF the period scale: the total is ~12× any month, so on a shared axis the months would collapse to slivers. Instead the summary column (and its variance bar) is capped with a marked scale break, its real value printed above; the PY line stops at December, because a total is not a point in the time series. A summary in the same range as the periods (a monthly average, say) shares the scale and gets no break.

<TrendChart
  data={[
    { category: "Jan", AC: 2.1e6, PY: 1.95e6 },
    // … through Dec (FC for the forecast tail) …
    { category: "FY", AC: 29.2e6, PY: 27.0e6, summary: true },
  ]}
  comparison="PY"
/>

Props