Highcharts JavaScript Events

When the M Chart Highcharts Library plugin is active, front-end charts dispatch the standard M Chart JavaScript Events plus one Highcharts-only event covered on this page.

`render_start`

Fired on the canvas element immediately before chart rendering begins. This event is only dispatched by the M Chart Highcharts Library plugin — the core Chart.js front-end template does not fire it.

document.querySelectorAll( '.m-chart canvas' ).forEach( ( canvas ) => {
	canvas.addEventListener( 'render_start', ( event ) => {
		const { post_id, instance } = event.detail;
		console.log( `Chart ${post_id} (instance ${instance}) is about to render` );
	} );
} );

event.detail properties:

post_id (int) — The chart post ID
instance (int) — The instance number (for multiple embeds of the same chart on one page)

If you need a pre-render hook under Chart.js

On Chart.js charts the equivalent injection points are the admin-side m_chart.render_chart filter (for admin previews) or registering a Chart.js plugin with a 'beforeInit' callback via the PHP action m_chart_after_chartjs_plugins (for the front end). See Admin UI Hooks and PHP Hooks.

`m_chart.render_done`

The same m_chart.render_done event documented in JavaScript Events is also dispatched when Highcharts is the active library. Two Highcharts-specific notes:

event.detail.chart is the Highcharts chart instance rather than a Chart.js instance.
The deprecated bare render_done event name (kept for v1.x compat) is dispatched here too, with the same Highcharts instance attached.