Chart.js custom colors

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.

• This reply was modified 4 years, 7 months ago by methnen.

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 );

• This reply was modified 4 years, 7 months ago by jeskiv.

Hi again,

Found a mistake in the piece of code, this should not have the $this->colors

            foreach ( $chart_args['data']['datasets'] as $key => $dataset ) {
                $chart_args['data']['datasets'][ $key ]['backgroundColor'] = $colors[ $key % count( $this->colors ) ];
            }

but like this with colors $colors:

            foreach ( $chart_args['data']['datasets'] as $key => $dataset ) {
                $chart_args['data']['datasets'][ $key ]['backgroundColor'] = $colors[ $key % count( $colors ) ];
            }

Agreed, everything around that could be improved a bit. It’s on my short list so it’ll happen hopefully sometime soon if I have a little spare time to spend on it. ??

Glad you got something that worked for you in any case.