Customizing Chart Axes with a Theme

  • Resolved gambitredux

    (@gambitredux)


    2 years, 2 months ago

    Hi, thanks so much for the awesome plugin!

    I am attempting to style the chart axes using a theme, which I’ve created from looking through this forum + your documentation. I’ve got the charts I want mostly styled, but I can’t seem to access the scales/axes labels, titles, etc. using the $theme['options']['plugins']['scales[x]']['font']['size'] – I’m wondering if the ['scales[x]'] portion can’t be parsed?

    Here’s my code, for reference

    <?php

/**
 * Theme Name: LEAD Default Bar Graph
 */

$theme = array(
	'colors' => array(
		'#00869D',
		'#00A688',
		'#37B8CB',
		'#006B74',
		'#008A69',
	),
	
);

//Title options

$theme['options']['plugins']['title']['color'] = '#062F35';
$theme['options']['plugins']['title']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";

$theme['options']['plugins']['title']['font']['weight'] = 700;
$theme['options']['plugins']['title']['font']['size'] = 48;

//Legend Options

$theme['options']['plugins']['legend']['labels']['color'] = '#062F35';
$theme['options']['plugins']['legend']['labels']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
$theme['options']['plugins']['legend']['labels']['font']['size'] = 21;

//X-Axis Options

$theme['options']['plugins']['scales[x]']['title']['text'] = 'Test';
$theme['options']['plugins']['scales[x]']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
$theme['options']['plugins']['scales[x]']['font']['size'] = 21;

return $theme;

    Any help is appreciated!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author methnen

    (@methnen)

    Instead of this:

    
$theme['options']['plugins']['scales[x]']

    Try this:

    
$chart_args['options']['scales']['x']

    The scales stuff is in the core library and not written as a plugin. Also you put the scale key inside of a string so the library isn’t going to see it correctly.

    Thread Starter gambitredux

    (@gambitredux)

    Amazing, thanks for the quick reply!

    I’ve implemented that in a Filter, but for some reason some of the options are not working ($chart_args['options']['scales']['y']['grid']['drawBorder']). Any ideas?

    Full code:

    function filter_m_chart_chart_args( $chart_args, $post, $post_meta, $args ) {
	
	
	if ( $post->ID != 872 ) {
	
	// X-Axis Label
	$chart_args['options']['scales']['x']['title']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
    $chart_args['options']['scales']['x']['title']['font']['size'] = 21;
	$chart_args['options']['scales']['x']['title']['color'] = '#062F35';
	$chart_args['options']['scales']['x']['title']['padding']['bottom'] = 10;
	
	// X-Axis Label
	$chart_args['options']['scales']['x']['ticks']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
    $chart_args['options']['scales']['x']['ticks']['font']['size'] = 14;
	$chart_args['options']['scales']['x']['ticks']['color'] = '#062F35';
	$chart_args['options']['scales']['x']['ticks']['padding'] = 10;
	
	$chart_args['options']['scales']['x']['grid']['drawBorder'] = false;
	$chart_args['options']['scales']['x']['grid']['drawOnChartArea'] = false;
	
	// Y-Axis Label
	$chart_args['options']['scales']['y']['title']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
    $chart_args['options']['scales']['y']['title']['font']['size'] = 21;
	$chart_args['options']['scales']['y']['title']['color'] = '#062F35';
	$chart_args['options']['scales']['y']['title']['padding']['bottom'] = 10;
	
	// Y-Axis Ticks
	$chart_args['options']['scales']['y']['ticks']['font']['family'] = "'trade-gothic-next-condensed', Sans-serif";
    $chart_args['options']['scales']['y']['ticks']['font']['size'] = 14;
	$chart_args['options']['scales']['y']['ticks']['color'] = '#062F35';
	$chart_args['options']['scales']['y']['ticks']['padding'] = 10;
	
	$chart_args['options']['scales']['y']['grid']['drawBorder'] = true;
	
	
	return $chart_args;
	}
	else return $chart_args;
}

add_filter( 'm_chart_chart_args', 'filter_m_chart_chart_args', 10, 4 );
    • This reply was modified 2 years, 2 months ago by gambitredux.
    • This reply was modified 2 years, 2 months ago by gambitredux.
    Thread Starter gambitredux

    (@gambitredux)

    Hi, just wondering if you had a moment to look at my followup reply? Thanks!

    Plugin Author methnen

    (@methnen)

    Hey, I’ve not actually had time and I probably won’t for awhile.

    This is a Chart.js matter though and they do have a great Slack channel they provide support from. You’d just need to ask your question formatted as JS and then convert the result to a PHP array as you show above.

    If you can’t get a working solution that way I can hopefully take a look soon.

    Plugin Author methnen

    (@methnen)

    Closing as it’s been some time. Please open a new ticket if you’re still having troubles. And the Chart.js folks haven’t been able to help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing Chart Axes with a Theme’ is closed to new replies.

Tags