methnen

jamie AT methnen.com

Hey, I can’t seem to duplicate the issue you’re having on that page.

However, I’m noticing that the chart is not visible until. you hit the tab. I’ve seen this cause issues with the charting library in the past because the library would try to draw the chart when the tab is not visible yet which also means the boundaries haven’t been rendered by the browser yet either.

I think a likely fix is to force Chart.js to redraw the chart when the tab contents are displayed.

I believe the _doResize() method would probably do that for you.

So in the case of that specific page something like this causes the chart to redraw:

m_chart_chartjs_11912_1.chart._doResize();

How you trigger that is dependent on your theme and whatever javascript is working that tab of course.

If you wanted to look at the helper function it’s here:

/components/js/m-chart-chartjs-helpers.min.js

There’s a non minimized version here:

/components/js/m-chart-chartjs-helpers.js

You could modify that to have a higher number of decimals for now but in the future as mentioned I’ll be working to improve how all of this is handled.

This was a first pass at some of this and it’s definitely not perfect.

Changing the Chart.js background is actually a bit complicated currently.

Basically what you need to do is a draw a box in the canvas object via a custom Chart.js plugin.

You can see this illustrated in the Chart.js docs:

https://www.chartjs.org/docs/latest/configuration/canvas-background.html

I have some longer term plans to abstract it a bit so that themes can set the background color in a simple manner. I can’t say when that would happen though as my real job takes precedence of course. 🙂

I can verify that it’s doable though as I’ve had some paid customizations I worked on that set background colors and customized the visuals in even more specific ways but it currently requires a custom plugin that hooks into some of the M Chart action/filter hooks spelled out in the docs here:

https://github.com/methnen/m-chart/wiki/Action-and-filter-hooks

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.

This is by design. Special symbols and characters confuse the charting library and actually cause it to fail to render.

I’m working on a way to add them back into the numbers for labels and such but that functionality isn’t in the plugin yet.

Hello,

Yes the gist of it is that the settings are in an array that gets converted into a Javascript object and then passed on to Chart.js at the last moment.

This allows the Templates and WordPress style filter hooks to modify things.

It’s relatively straightforward to modify. You simply translate from a javascript object to a PHP array.

So for instance the animation stuff is all in options:

options: {
    animations {
        duration: 1000
    }
}

Adding that to the chart arguments via the filter hook stuff:

https://github.com/methnen/m-chart/wiki/Action-and-filter-hooks#m_chart_chart_args

Would look like this:

function filter_m_chart_chart_args( $chart_args, $post, $post_meta, $args ) {
	$chart_args['options']['animation']['duration'] = 2000;

	return $chart_args;
}

add_filter( 'm_chart_chart_args', 'filter_m_chart_chart_args', 10, 4 );