Migrating to v2 - methnen/m-chart GitHub Wiki

M Chart v2.0 (and M Chart Highcharts Library v1.3) introduced a React-based admin UI and removed jQuery from chart templates. Most changes are limited to JavaScript integration — PHP hooks are mostly additive.

Events previously fired using jQuery's custom events API. In v2.0 they are native browser CustomEvents dispatched on .m-chart elements. Event properties are now accessed via event.detail rather than directly on the event object.

$( '.m-chart' ).on( 'render_done', function( event ) {
	console.log( event.post_id );    // undefined in v2.0
	console.log( event.instance );   // undefined in v2.0
	console.log( event.chart );      // undefined in v2.0
});

document.querySelectorAll( '.m-chart' ).forEach( function( el ) {
	el.addEventListener( 'render_done', function( event ) {
		console.log( event.detail.post_id );
		console.log( event.detail.instance );
		console.log( event.detail.chart );   // Highcharts instance only
	});
});

The same applies to render_start.

The canvas_done JavaScript event has been removed in v2.0 and no longer fires. It was used to manipulate the HTML canvas before it was converted to a PNG image in the Highcharts admin panel.

There is no direct replacement. Canvas-based image manipulation via canvas_done is no longer supported.

This PHP action hook still exists and fires in the footer of the chart post edit page. However, the primary v1.x use case for this hook (manipulating the canvas via canvas_done) is no longer possible because canvas_done has been removed.

function action_m_chart_admin_footer_javascript() {
	?>
	(function( $ ) {
		$( '.m-chart' ).on( 'canvas_done', function() {
			m_chart_admin.canvas_context.drawSvg( '<svg>...</svg>', ... );
		});
	})( jQuery );
	<?php
}

add_action( 'm_chart_admin_footer_javascript', 'action_m_chart_admin_footer_javascript' );

For admin UI integration in v2.0, use the wp.hooks JavaScript API instead. See Javascript events for the available admin hooks.

In v1.x this hook was documented as a general action. In v2.0 it fires exclusively in the Highcharts front-end template and has no equivalent for Chart.js.

Chart.js users who previously used this hook for post-render JavaScript should use one of the following instead:

• m_chart_after_chart_args PHP action — fires after chart args are prepared in the front-end template
• m_chart.render_done wp.hooks action — fires in the admin after chart rendering completes

See Highcharts Action and Filter Hooks for the current m_chart_post_render_javascript documentation.

A third argument $post_id was added to this filter in v2.0. If you have an existing callback with two parameters it will continue to work, but you can now target template overrides to a specific chart post.

function filter_m_chart_chart_template( $template, $library ) {
	return $template;
}

add_filter( 'm_chart_chart_template', 'filter_m_chart_chart_template', 10, 2 );

function filter_m_chart_chart_template( $template, $library, $post_id ) {
	return $template;
}

add_filter( 'm_chart_chart_template', 'filter_m_chart_chart_template', 10, 3 );

M Chart v2.0 exposes a wp.hooks-based JavaScript API for admin integration. This is the recommended approach for library plugins and custom code that needs to extend the admin UI.

Key hooks:

See Javascript events for full documentation.