LineChart

The IBCS line chart (template C07) - dense multi-series time lines with markers, scenarios AC/PY/PL/FC, optional variance panel.

Scenario lines in IBCS notation with point markers, plus an optional variance panel against a chosen base.

When to use

Trend over many periods (10+, up to hundreds of points). Lines carry markers so they read as connectors, not continuous values. Use columns instead for few periods.

Example

Line chart of 4 series - data table
	AC	PY	PL	FC	ΔPY	ΔPY%
P1	2.3M	2.2M	2.3M	n/a	+150K	+7.0%
P2	2.4M	2.2M	2.4M	n/a	+220K	+10.0%
P3	2.6M	2.4M	2.5M	n/a	+170K	+7.1%
P4	2.5M	2.4M	2.5M	n/a	+60K	+2.5%
P5	2.6M	2.5M	2.6M	n/a	+170K	+6.9%
P6	2.7M	2.5M	2.6M	n/a	+210K	+8.4%
P7	2.7M	2.6M	2.7M	n/a	+80K	+3.1%
P8	2.8M	2.6M	2.7M	n/a	+170K	+6.5%
P9	2.9M	2.7M	2.9M	n/a	+230K	+8.5%
P10	n/a	2.8M	2.9M	3M	+190K	+6.8%
P11	n/a	2.9M	3M	3.1M	+190K	+6.6%
P12	n/a	3M	3.1M	3.1M	+170K	+5.8%
P13	n/a	3M	3.2M	3.2M	+180K	+6.0%

import { LineChart } from "ibcs-react";

<LineChart
  data={months} // { category, AC?, PY?, PL?, FC? }
  comparison="PY"
  variance="abs"
/>; // markers auto-hide above ~40 points for performance

By default every scenario present in the data is drawn; narrow that with series={["AC", "PY"]}. showMarkers forces the markers back on (or off) when the automatic density rule picks the wrong side.

Props

Prop

Type

When to use

Example

Props

On this page