JavaScript Events

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

render_start

Fired on the canvas element immediately before chart rendering begins.

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)

render_done

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

document.querySelectorAll( '.m-chart canvas' ).forEach( ( canvas ) => {
	canvas.addEventListener( 'render_done', ( event ) => {
		const { post_id, instance, chart } = event.detail;
		// `chart` is the Chart.js instance
		console.log( chart.data );
	} );
} );

event.detail properties:

• post_id (int) — The chart post ID
• instance (int) — The instance number
• chart (object) — The Chart.js chart instance