Chart.js custom colors
-
I asked 9 months ago about the M Chart colors and only now started to test the hook. (I have been just directly updating the colors to plugin). To me it seems that the hook m_chart_chart_args does not change the colors. I had a look at the code, and the apply_filter is called after the m chart colors are already set, and also the colors are not actually in the $chart_args but as a variable $colors, so it seems to me they cannot be set using the hook. I was following this instruction: https://github.com/methnen/m-chart/wiki/Action-and-filter-hooks and tested with twentytwenty theme and adding those lines directly to functions.php to avoid any problems with other plugins.
-
That example in the wiki is for Highcharts.
In Chart.js colors have to be set directly for each data set/item there’s no actual colors value you can change that will just universal effect all chart types like you can in Highcharts. It’s one of my two main complaints about how Chart.js does things. It’s very clunky.
To change the colors in Chart.js you’d need to loop through the settings based on the chart type.
You can see how the plugin does this on line 126 of class-m-chart-chartjs.php:
https://github.com/methnen/m-chart/blob/master/components/class-m-chart-chartjs.php#L126
So basically you’d use that filter hook you’re already experimenting in, check the chart type and data structure by looking at those chart args and then cycle through the data set args in a similar manner but with your alternate colors.
It’s on my feature list to simplify customizing the colors in Chart.js somehow, probably by allowing you set different defaults inside the plugin settings but I just haven’t had time to get to it yet.
Thank you, that works. That would be good to have it in the plugin settings. It would however simplify the use of the filter, if the “apply_filter” on line 152 would be before the line 126 you mentioned and then instead using a separate $colors variable, there would be $chart_args[‘colors’] from where the plugin would take the colors, it would be pretty easy to set the colors by just defining them as is in your highcharts example.
I combined the code from the 126 onwards to your highcharts example and I thought its good to post it for others as well. Feel free to use it in your wiki page as well:
function filter_m_chart_chart_args( $chart_args, $post, $post_meta, $args ) { $colors = array( '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', ); // Apply colors, yes this kind of sucks, but so does the Chart.js color system if ( isset( $chart_args['data']['datasets'] ) && ( 'bar' == $chart_args['type'] || 'horizontalBar' == $chart_args['type'] ) ) { foreach ( $chart_args['data']['datasets'] as $key => $dataset ) { $chart_args['data']['datasets'][ $key ]['backgroundColor'] = $colors[ $key % count( $this->colors ) ]; } } elseif ( isset( $chart_args['data']['datasets'] ) && 'pie' == $chart_args['type'] ) { foreach ( $chart_args['data']['datasets'][0]['data'] as $key => $data ) { $chart_args['data']['datasets'][0]['backgroundColor'][ $key ] = $colors[ $key ]; } } elseif( isset( $chart_args['data']['datasets'] ) ) { foreach ( $chart_args['data']['datasets'] as $key => $dataset ) { $color = $colors[ $key % count( $colors ) ]; $chart_args['data']['datasets'][ $key ]['fill'] = false; $chart_args['data']['datasets'][ $key ]['backgroundColor'] = $color; $chart_args['data']['datasets'][ $key ]['borderColor'] = $color; $chart_args['data']['datasets'][ $key ]['lineTension'] = 0; } } return $chart_args; } add_filter( 'm_chart_chart_args', 'filter_m_chart_chart_args', 10, 4 );
The topic ‘Chart.js custom colors’ is closed to new replies.
