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 chart container 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.

Unlike Chart.js charts, Highcharts charts render as SVG inside a <div class="m-chart"> container — there is no <canvas>. The events are dispatched on that container div and bubble, so you can also listen on document:

document.querySelectorAll( '.m-chart' ).forEach( ( container ) => {
	container.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. Some Highcharts-specific notes:

The event is dispatched on the .m-chart container div (not a canvas — see above).
event.detail carries post_id and instance alongside chart.
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.