Chart and graph reports includes the ability to display the statistic in an attractive way.

Additionally you can set a custom background and border colors for each statistic. There is a screenshot with the default colors provided:

On shortcodes, the default background attribute value is:
rgba(54,162,235,0.5),rgba(255,99,132,0.5),rgba(75,192,192,0.5),rgba(255,205,86,0.5),rgba(201,203,207,0.5)
And the default border attribute value is:
#36a2eb,#ff6384,#4bc0c0,#ffcd56,#c9cbcf

Colors supported

Border and background attributes support hexadecimal (#000000), RGB (rgb(0,0,0)) and RGBA (rgba(0,0,0,1)) colors and you can use them interspersed like:
background="#000000,rgb(0,0,0),rgba(0,0,0,1)"

Statistics order

Colors are applied in the order they are provided based on the statistic position. The order of those statistics are based on the order you provide each statistic on the shortcode (or block or widget fields).

For example, [gamipress_frontend_reports_points_types_chart] shortcode renders a points balances report based on the points types you provided.

If you provide to this shortcode the type attribute in the order type="credits,gems,coins" the report will render each statistic based on this order (1st credits, 2nd gems and 3rd coins).

If you provide the type attribute in the order type="coins,credits,gems" the report will render each statistic based on this order (1st coins, 2nd credits and 3rd gems).

For other shortcodes like [gamipress_frontend_reports_points_chart] shortcode statistics order is based on the amounts you provided (earned, deducted and/or expended).

Applying colors

As described above, colors are applied in the order they are provided based on the statistic position.

There is a live example, let’s to setup the [gamipress_frontend_reports_points_types_chart] shortcode with the following attributes:
type="credits,gems,coins"
background="rgba(54,162,235,0.5),rgba(255,99,132,0.5),rgba(75,192,192,0.5)"
border="#36a2eb,#ff6384,#4bc0c0"

The result will be:
1st statistic will be credits with the background rgba(54,162,235,0.5) and border #36a2eb
2nd statistic will be gems with the background rgba(255,99,132,0.5) and border #ff6384
3rd statistic will be coins with the background rgba(75,192,192,0.5) and border #4bc0c0

It will look like:

Playing with the opacity

Thanks that our reports supports opacity, you can play with it to make reports look into a more flat style (setting opacity of 100%) or making some reports transparent (opacity of 0%).

Example of black color with 100% opacity:
rgba(0,0,0,1) or rgb(0,0,0) or #000000

Example of black color with 50% opacity:
rgba(0,0,0,0.5)

Example of black color with 0% opacity (transparent):
rgba(0,0,0,0)