Themes - methnen/m-chart GitHub Wiki

M Chart now has themes which are default settings that you can specify per chart.

Chart.js Themes

Available in M Chart v1.8+

Default themes:

• Chart.js (Default)
• Color Blind Safe
• Highcharts 4.x

An M Chart Chart.js theme can be added to you current WordPress theme by creating a m-chart-chartjs-themes directory inside of your theme directory.

Then add a theme file to the directory (e.g. /wp-content/themes/twentyfifteen/m-chart-chartjs-themes/limeaid.php)

Example theme code:

<?php

/**
 * Theme Name: Limeaid
 */

return array(
	'colors' => array(
		'#59a80f',
		'#9ed54c',
		'#c4ed68',
		'#e2ff9e',
		'#f0F2dd',
	),
	'points' => array(
		array(
			'point' => array(
				// Circle
				'pointStyle' => 'circle',
			),
		),
		array(
			'point' => array(
				// Square
				'pointStyle' => 'rect',
			),
		),
		array(
			'point' => array(
				// Triangle
				'pointStyle' => 'triangle',
			),
		),
	),
);

Download Example Chart.js Theme

Chart.js does colors and point styles in a way that requires treating them a bit differently from other options. Because of this Chart.js themes have two special values you'll want to use most of the time 'colors' and 'points' like shown in the example above.

These options get pulled out by the plugin and get applied to the chart right before the rest of the theme gets applied.

Themes can contain any Chart.js settings you might want to change the defaults on, though colors are the obvious choice. The themes that ship with M Chart are all color or point only themes.

See the Chart.js Docs reference for all the possibilities.

Highcharts Themes

Available in M Chart v.1.2+ (When using the Highcharts Library)

Default themes:

• Highcharts 4.x (Default)
• Color Blind Safe
• Highcharts 3.x
• Highcharts 2.x

An M Chart Highcharts theme can be added to you current WordPress theme by creating a m-chart-highcharts-themes directory inside of your theme directory.

Then add a theme file to the directory (e.g. /wp-content/themes/twentyfifteen/m-chart-highcharts-themes/limeaid.php)

Example theme code:

<?php

/**
 * Theme Name: Limeaid
 */

return array(
	'colors' => array(
		'#59a80f',
		'#9ed54c',
		'#c4ed68',
		'#e2ff9e',
		'#f0F2dd',
	),
);

Download Example Highcharts Theme

Themes can contain any Highcharts settings you might want to change the defaults on, though colors are the obvious choice. The themes that ship with M Chart are all color only themes.

See the Highcharts API reference for all the possibilities.