Highcharts Javascript events

Available in M Chart Highcharts Library v.1.3+

The M Chart Highcharts Library integrates with the M Chart v2.0 admin UI using the WordPress wp.hooks API. These hooks allow the Highcharts library plugin to replace the default Chart.js renderer and settings UI in the admin.

For front-end render_start / render_done CustomEvents (which also apply to Highcharts charts), see Javascript events.

Admin UI JavaScript Hooks

m_chart.render_chart (filter)

The Highcharts Library hooks into this filter to render Highcharts charts in the admin preview panel instead of the default Chart.js renderer.

When the active library is Highcharts, the library plugin:

1. Hides the default canvas element
2. Creates a dedicated .m-chart-highcharts-render container
3. Renders the chart via Highcharts.chart()
4. Generates a PNG image in the render callback
5. Calls onComplete() when finished

You can also hook into m_chart.render_chart yourself to further modify chart rendering behavior. Return a Highcharts chart instance to claim rendering, or return false to fall through.

wp.hooks.addFilter(
	'm_chart.render_chart',
	'my-plugin',
	function( instance, canvas, chartArgs, onComplete, existingInstance ) {
		// return false to defer to existing renderer
		return false;
	}
);

m_chart.settings_component (filter)

The Highcharts Library hooks into this filter to replace the default Chart.js settings panel with a Highcharts-specific settings UI (theme picker, decimal indicator, thousands separator, numeric symbols, etc.).

You can add your own wp.hooks.addFilter call at a higher priority if you need to further customize the settings component.

wp.hooks.addFilter(
	'm_chart.settings_component',
	'my-plugin',
	function( SettingsComponent ) {
		// wrap or replace the settings component
		return SettingsComponent;
	}
);