RatioTreeChart

Every node in the calculation tree carries a small time series instead of a single figure, with the operators (÷ − + ×) sitting on the branches - so both the arithmetic and the movement of each driver are on the page.

When to use

Decompose a ratio/KPI into its drivers and show each as a small trend, with the operators on the branches - how a headline metric is built and how each driver moves.

Example

import { RatioTreeChart } from "ibcs-react";

<RatioTreeChart
  title="Return on assets - 2021…2025"
  root={{
    id: "roa",
    label: "Return on assets %",
    op: "/",
    series: [12.4, 13.1, 11.8, 14.0, 15.2],
    children: [
      { id: "ret", label: "Return kEUR", series: [5.0, 5.4, 4.8, 6.1, 6.7] },
      { id: "assets", label: "Assets kEUR", series: [40.3, 41.2, 40.7, 43.6, 44.1] },
    ],
  }}
/>;

Put the unit in each node's label - a tree mixing percent and currency nodes is otherwise ambiguous. miniChart="line" draws the node series as lines instead of columns, which reads better for long series.

For the same decomposition with single values rather than series, use TreeChart.

Props