The panel grid. A 2D array maps 1:1 to subplot rows; a flat
array is chunked into rows of options.columns panels
(row-major), or a single row when columns is omitted.
The element containing every panel's container. Its id
(generated when missing) becomes the default figure id.
Figure-level options.
A Maidr object ready to be set as the wrapper's maidr
attribute.
const maidr = maidrFrappe.createMaidrFromFrappeCharts(
[
[
{ chart: barChart, container: barEl, chartType: 'bar', title: 'Sales' },
{ chart: lineChart, container: lineEl, chartType: 'line', title: 'Trend' },
],
],
wrapper,
{ title: 'Quarterly Dashboard' },
);
wrapper.setAttribute('maidr', JSON.stringify(maidr));
Creates a single MAIDR figure from a grid of independently rendered Frappe charts, enabling cross-panel arrow-key navigation (arrows move between panels,
Enterdrills into a panel,Escreturns).Frappe Charts has no native multi-panel concept, so panel grouping is explicit: lay the chart containers out inside one wrapper element (e.g. a CSS grid) and describe the grid here in visual reading order (row-major, top-left first).
Call this after every panel has finished rendering (Frappe's entrance animation re-creates SVG nodes, so wait for all panels to settle), then set the
maidrattribute on the wrapper element — not on the individual panel containers, which would create N separate MAIDR figures.