Migrating to v2

Version 2.0 introduced breaking changes for code that extends the Chart.js admin UI or hooks into front-end chart events. This page covers what changed and how to update.

Front-End JavaScript Events

jQuery → native CustomEvent

In v1.x, M Chart dispatched jQuery custom events on the .m-chart container:

// v1.x (no longer works)
$( '.m-chart' ).on( 'render_done', function( event, postId, instance, chart ) {
	console.log( chart );
} );

In v2.0+, events are native CustomEvent objects dispatched on the <canvas> element. Event data is accessed via event.detail:

// v2.0+
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' );
	} );
} );

canvas_done removed

The canvas_done event from v1.x has been removed with no replacement.

Front-end events under the Highcharts Library

The M Chart Highcharts Library plugin dispatches its own front-end events — including a render_start event before rendering begins — that mirror the Chart.js dispatches. See Highcharts JavaScript Events if you maintain code that targets Highcharts charts.

Admin UI JavaScript

jQuery events removed

The admin chart_args_success and render_done jQuery custom events from v1.x have been removed. Use wp.hooks instead:

// v1.x (no longer works)
$( document ).on( 'chart_args_success', function( event, chartArgs ) {} );

// v2.0+
wp.hooks.addAction( 'm_chart.chart_args_success', 'my-plugin', ( chartArgs, postId ) => {} );

Hooking into chart rendering

To replace the default Chart.js renderer with your own library, use the m_chart.render_chart filter. The full callback signature is ( handled, canvas, chartArgs, onComplete, existingInstance ) — your callback must call onComplete( yourChartInstance ) so M Chart can fire m_chart.render_done and re-enable the form.

See Admin UI Hooks for the full API.

PHP

No breaking changes to PHP hooks or the save logic in v2.0. Existing add_action / add_filter calls targeting m_chart_chart_args, m_chart_after_chart_args, and other PHP hooks continue to work unchanged.

What's new in v2.1

v2.1 is purely additive — nothing existing was broken or renamed. New extension surfaces worth knowing about:

New PHP hooks (all documented in detail on the PHP Hooks & Filters page):

• m_chart_chartjs_themes — Append entries to the Chart.js theme dropdown
• m_chart_treemap_dataset_defaults — Customize treemap dataset defaults (spacing, borders, captions, labels)
• m_chart_after_chartjs_plugins — Register additional Chart.js plugins before the chart instance is created
• m_chart_screen_reader_text — Append accessibility context (data sources, methodology, summaries) inside the chart's .screen-reader-text container
• m_chart_multi_sheet_types — Customize the chart types that show the multi-sheet tab bar
• m_chart_defer_rendering_observer_options — Tune the IntersectionObserver used by the Defer Rendering setting
• m_chart_iframe_styles, m_chart_iframe_inline_styles, m_chart_iframe_fonts — Inject external stylesheets, raw CSS, and @font-face rules into the chart iframe
• m_chart_iframe_csp_style_src, m_chart_iframe_csp_font_src, m_chart_iframe_frame_ancestors — Tune the iframe's Content-Security-Policy header

New runtime globals for library plugins building custom admin UI:

• window.m_chart now exposes useChartAdmin plus the built-in settings row components so extensions can assemble a Chart.js-style settings panel without a build step.

No migration is required for any of the above — pre-v2.1 code keeps working unchanged.