M-chart height

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.

Hello,
Thank you for quick response, is there a general selector for all m-charts, since we have 160+ products which all will have graphs and would like then to set a general rule to all products. Is there a code snippet like that or a github thread that can help, since we are not so good with coding ??
Thank you

This is a little round about and very quickly thrown together but this added to your functions.php file “should” work.

Let me know?

add_action( 'wp_footer',  'm_chart_footer_render_fix' );

function m_chart_footer_render_fix() {
	?>
	<script>
		var m_chart_footer_render_fix = {
			charts: []
		};

		(function( $ ) {
			'use strict';

			m_chart_footer_render_fix.init = function() {
				let $chart_divs = $( '.m-chart-container.chartjs' );
				
				$chart_divs.each(function() {
					let id    = $(this).attr('id');
					let chart = 'm_chart_chartjs_' + id.replace( 'm-chart-container-', '' );
										
					m_chart_footer_render_fix.charts.push( chart.replace( '-', '_' ) );
				});
				
				$('.graph_tab').on( 'click', function() {
					m_chart_footer_render_fix.redraw_charts();
				});
			};

			m_chart_footer_render_fix.redraw_charts = function() {
				$.each( m_chart_footer_render_fix.charts, function() {
					window[this].chart._doResize();
				});
			};

			$( function() {
				m_chart_footer_render_fix.init();
			});
		})( jQuery );
	</script>
	<?php
}

Thank you so much for your help, really fantastic job.

Thank you again for fast resolving of the issue and we are really glad we are using your plugin. Thank you

• This reply was modified 2 years ago by filip991.