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.

About the my-plugin/… strings in these examples

The second argument to wp.hooks.addFilter() is a namespace — replace my-plugin with your own plugin or theme slug. See Admin UI JavaScript Hooks for the full convention.

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 true to signal that rendering has been handled:

wp.hooks.addFilter(
	'm_chart.render_chart',
	'my-plugin/render',
	( handled, chartArgs, canvas ) => {
		if ( handled ) {
			return handled;
		}
		// Custom Highcharts rendering
		return true;
	},
	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.