MAIDR Documentation - v3.69.0
    Preparing search index...

    Function createMaidrFromFrappeChart

    • Creates a MAIDR data object from a rendered Frappe chart.

      Call this after the chart has finished rendering (e.g. inside a requestAnimationFrame callback once svg.frappe-chart exists) so the container DOM already contains the SVG elements the selectors target.

      Parameters

      • chart: FrappeChart

        The Frappe chart instance (only its data is read). You may also pass a plain { data } object if your build does not expose the instance.

      • container: HTMLElement

        The element the chart was drawn into.

      • options: FrappeChartAdapterOptions

        Adapter options (chart type is required).

      Returns Maidr

      A Maidr object ready to be set as the maidr attribute or passed to <Maidr data={…}>.

      const chart = new frappe.Chart('#chart', { type: 'bar', data, height: 400 });
      requestAnimationFrame(() => {
      const container = document.querySelector('#chart');
      const maidr = maidrFrappe.createMaidrFromFrappeChart(chart, container, {
      chartType: 'bar',
      title: 'Daily Visitors',
      axes: { x: 'Day', y: 'Visitors' },
      });
      container.setAttribute('maidr', JSON.stringify(maidr));
      });