Highcharts Admin UI Hooks

Available since version 1.3. The M Chart Highcharts Library plugin uses the wp.hooks API to replace the default Chart.js admin interface with Highcharts-specific behavior. These are the same library-agnostic filters described in Admin UI JavaScript Hooks — this page covers Highcharts-specific notes about how the Highcharts Library plugin uses them and how to extend that behavior.

Filter Hooks

m_chart.render_chart

The Highcharts Library plugin uses this filter to intercept chart rendering in the admin preview and render the chart using Highcharts instead of Chart.js.

If you are building on top of the Highcharts Library, you can use this same filter at a higher priority. Return your chart instance (any value other than false) to signal that rendering has been handled — the admin stores the return value as the current chart instance and passes it back as existingInstance on the next render:

wp.hooks.addFilter(
	'm_chart.render_chart',
	'my-plugin/render',
	( handled, canvas, chartArgs, onComplete, existingInstance ) => {
		if ( handled ) {
			return handled;
		}
		// Custom Highcharts rendering
		const instance = myCustomRender( canvas, chartArgs, onComplete, existingInstance );
		return instance;
	},
	20 // Run after the Highcharts Library's handler (priority 10)
);

See m_chart.render_chart in the core admin hooks reference for the full filter signature and behavior.

m_chart.settings_component

The Highcharts Library uses this filter to replace the Chart.js settings panel with a Highcharts-specific settings UI that includes:

• Theme selection
• Decimal indicator
• Thousands separator
• Numeric symbols

To extend the Highcharts settings panel, filter the component at a higher priority:

wp.hooks.addFilter(
	'm_chart.settings_component',
	'my-plugin/settings',
	( HighchartsSettingsComponent ) => MyExtendedComponent,
	20
);

See m_chart.settings_component in the core admin hooks reference for the full filter signature.