Dashboards

Seven realistic management dashboards - the things people most commonly build with BI and reporting tools - each assembled entirely from ibcs-react components. Every one is a multi-panel composition (a KPI strip, two or more charts and a table), leads with its message and names its Who / What / When. The figures are fictitious but plausible.

Notation is consistent throughout: AC solid, PY grey, PL hollow frame, FC hatched; variance coloured by impact; cost lines carry higherIsBetter: false so a rise reads red.

How a dashboard is put together

Three things do the work, and none of them is a chart:

1. The headline is the conclusion. Not "Revenue by region" but "APAC and the new Cloud line carried the quarter". The panels below it are the evidence.
2. Who / What / When under the headline - the audience, the measure and its unit, and the period. Without them a number is unreadable.
3. One layout grid. A four-up KPI strip, then panels in a two-column grid (sometimes with a wider left column), each panel a <div> with a small caps title. The library draws inside the panels; CSS grid does the rest.

<div className="kpis">
  <KpiCard
    label="Revenue"
    values={{ AC: 30_100_000, PY: 26_100_000, PL: 28_500_000 }}
    comparisons={["PY", "PL"]}
    format={{ compact: true, decimals: 1 }}
    sparkline={monthlyRevenue}
  />
  {/* three more cards */}
</div>

<div className="panels">
  <Panel title="Operating-income bridge">
    <WaterfallChart width={560} height={290} data={bridge} />
  </Panel>
  <Panel title="Revenue by region">
    <StructureChart comparison="PY" variance="abs" width={360} height={290} data={regions} />
  </Panel>
</div>

Charts take explicit width / height - they are printable artifacts, not fluid boxes. For a panel that must fill a wide column on a laptop and still show all twelve months on a phone, wrap the chart in ScrollChart (or ChartBox for full control over fit and alignment): it renders at the measured width and scrolls sideways below minWidth instead of squashing the categories.

import { ScrollChart, TrendChart } from "ibcs-react";

<ScrollChart height={250} minWidth={760}>
  {(w, h) => <TrendChart comparison="PY" width={w} height={h} data={twelveMonths} />}
</ScrollChart>;

Because ScrollChart takes a render function as its child, the panel around it has to be a client component - a function cannot be handed from a server component to a client one.

1 · Executive overview

The group closed FY26 ahead of prior year on every headline KPI - revenue +15% and a 1.6-point margin gain lift net income to €8.9M (+10%).

Contoso Group · Office of the CFO - performance summary in € thousands, AC versus PY (and Plan) · FY 2026, full year.

Four KPI cards with sparklines set the frame; the bridge explains how revenue becomes operating income; the structure chart splits revenue by region with ΔPY; the trend panel carries all twelve months, actuals to September and forecast after.

Components: KpiCard, WaterfallChart, StructureChart, TrendChart.

2 · Sales performance

Bookings beat plan by +€1.9M (+8%) and ran +14% on PY - APAC and the new Cloud line carried the quarter while EMEA mid-market lagged.

Northwind Trading · Commercial - bookings and pipeline in € thousands, AC versus Plan and PY · Q3 2026, quarter to date.

The regional columns show AC against a hollow Plan; the ranking chart sorts the product lines by ΔPlan so the two losers sit together at the bottom; the rep table repeats the same variance twice (absolute bar, percent pin) and adds a run-rate sparkline. Click a column header to re-sort it.

Components: VarianceColumnChart, RankingVarianceChart, DataTable.

3 · Budget versus actual

Revenue is tracking +€0.42M (+3.3%) above plan at month 9, but a procurement overrun keeps the EBIT beat to +€0.18M - watch raw-material spend.

Helios Manufacturing · FP&A - budget versus actual in € thousands, AC versus Plan · FY 2026, YTD through September.

The integrated variance chart puts the monthly ΔPlan directly above the columns and closes with an FY landing bar split into actual and forecast. Below it, the cost-centre table sorts on ΔBudget, and the ranking chart repeats the same variances as a single ordered list. Every cost line is higherIsBetter: false, so overspend is red even though the number is positive.

Components: IntegratedVarianceChart, DataTable, RankingVarianceChart. For the full drill-down version of this view see the budget matrix guide.

4 · P&L deep-dive

Net income reached €8.9M (+10% on PY, +19% versus plan) - gross margin widened to 71.4% as service revenue grew faster than cost of sales.

Software & Service Group · Group Finance - profit and loss statement in € thousands, AC with ΔPY and ΔPL · FY 2026, full year.

The statement carries its own integrated waterfall and two variance columns, so the P&L panel needs no companion chart to be readable. The right rail adds the EBIT split by segment and a margin walk drawn as a bare sparkline.

Components: StatementTable, VarianceColumnChart, Sparkline.

5 · Regional breakdown

Group net sales climbed from €25.6M to €30.1M (+17%) over four quarters - a fast-growing Asia Pacific (+45%) led, with every market ahead of PY.

Global Retail Co. · Regional Operations - net sales in € thousands by market, AC versus PY · FY 2026, quarterly.

Three lenses on the same four markets: stacked columns for the quarterly build, a structure chart for the share of the group with ΔPY, and a market-by-quarter matrix whose variance column compares AC against PY (varianceScenarios) rather than the default AC against PL.

Components: StackedChart, StructureChart, MatrixTable.

6 · Operations and cost

Unit cost fell −4.2% versus PY on higher throughput, but an energy spike (+18%) offset half the saving - net conversion cost down €0.31M.

Helios Plants · Operations - conversion cost in € thousands, AC versus PY, where lower is better · FY 2026, YTD.

A cost dashboard is where polarity matters most. The bridge walks PY cost to AC cost through volume, labour efficiency, material yield and energy; the ranking chart and the cost-centre table repeat the same story per category and per centre. Every variance is flagged higherIsBetter: false, and the two KPIs that should fall (cost per unit, scrap rate) carry it too.

Components: WaterfallChart, RankingVarianceChart, DataTable.

7 · Forecast and planning

The rolling forecast lands FY26 revenue at €25.9M (+5% versus plan) on a strong H2 backlog; EBIT closes +€0.30M ahead of plan.

Atlas Industrial · Corporate Planning - rolling forecast in € thousands, AC and FC versus Plan · FY 2026, 9+3 forecast.

Nine months of actuals and a hatched forecast tail run against the plan line; the EBIT panel marks its last two quarters isForecast and lands the year in a stacked AC + FC total bar. The matrix does the same switch structurally - Q1 and Q2 print PL/AC, Q3 and Q4 print PL/FC, set per period.

Components: TrendChart, IntegratedVarianceChart, MatrixTable.

Where to next

• Report - the same compositions declared as JSON instead of JSX.
• Gallery - one dataset through every chart, with a live theme switch.
• IBCS & ISO 24896 - the notation these dashboards follow.
• Theming - repaint every panel from one provider.