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:
And the default border attribute value is:
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:
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).
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:
The result will be:
1st statistic will be
credits with the background
rgba(54,162,235,0.5) and border
2nd statistic will be
gems with the background
rgba(255,99,132,0.5) and border
3rd statistic will be
coins with the background
rgba(75,192,192,0.5) and border
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:
Example of black color with 50% opacity:
Example of black color with 0% opacity (transparent):