JavaScript Events

Available since version 2.0. These are native CustomEvent events dispatched on the chart's <canvas> element on the front end.

`m_chart.render_done`

Fired on the canvas element after the chart has finished rendering. Includes a reference to the Chart.js chart instance.

document.querySelectorAll( 'canvas.m-chart' ).forEach( ( canvas ) => {
	canvas.addEventListener( 'm_chart.render_done', ( event ) => {
		const { post_id, instance } = event.detail;
		console.log( 'Chart', post_id, 'instance', instance, 'rendered' );
	} );
} );

event.detail properties:

post_id (int) — The chart post ID
instance (int) — The instance number

Highcharts

The Highcharts Library plugin dispatches its own m_chart.render_done event with the Highcharts chart instance included in event.detail, and an additional render_start event before rendering begins. The core Chart.js dispatch does not expose the chart instance on the event — see Highcharts JavaScript Events for the Highcharts-specific event shapes.

Same name as the admin wp.hooks action

The front-end CustomEvent m_chart.render_done and the admin-side wp.hooks action m_chart.render_done are intentionally identically named — same semantic event ("the chart has finished rendering") exposed through two different mechanisms (a DOM CustomEvent on the front end, a wp.hooks action in the admin React app). Listen via canvas.addEventListener( 'm_chart.render_done', ... ) on the front end and wp.hooks.addAction( 'm_chart.render_done', ..., callback ) in the admin.

Deprecated event name: render_done

Prior to v2.1, the event was named just render_done (no namespace). That name is still dispatched for backward compatibility but is deprecated and will be removed in v3. Update any listeners to use m_chart.render_done instead.

Migrating from v1

In v1.x these events were jQuery custom events (.on('render_done', ...)). In v2.0+ they are native CustomEvent events dispatched on the canvas element. Event data is accessed via event.detail rather than the jQuery handler arguments. See Migrating to v2.

Internal Events

These events are dispatched by the admin UI for its own coordination. They are not part of the public API — names, payload shapes, and the fact that they exist at all are subject to change without notice. Extensions should not depend on them.

m-chart-tab-nav — Bubbled from individual sheet tab elements to coordinate cross-tab keyboard navigation (Arrow keys, Home, End) in the multi-sheet tab bar.