Initially when we released Mockups, we thought Charts should not have the option to color. They should look and feel just like wireframes.
Upon working with several users who tried to create dashboard wireframes, their first instinct was to reach out to the top "Fill" color to see if they could add color to their charts. So we had to promote this feature ahead of others and release it asap.
So here is how we color our Chart mockups
Drag the Bar chart from the left panel to the right hand side
The chart shows with no colors
How to edit the Bar chart
1. Double click the bar chart
2. Change the Rows and columns values to reflect how you want your bar chart
3.
4. We update the labels and values columns and then click OK
5.
6. Right click on the Chart to see the color context menu
Let us go through each of the newly added context menu
Toggle Grid
By selecting the Toggle Grid, we can switch between the background Grid
Toggle Color
By selecting Toggle Color, you can turn coloring on/off.
By select Toggle Color again, it will show the wireframe look as above(previous image)
Toggle Color Style
There are two color styles available
1. Color Series
When you provide a starting color from the Fill toolbar button, the chart will compute all the color in its series by adjusting the HSV value (hue,saturation,value)
So in this case our start color dictates what the remaining bars will be colored with
Switching to more brighter color
2. Color Shades
Color shades works similarly, except in this case it produces the shades of the same start color
Toggle Sequential Colors
Based on visualization principles, all bars in a single bar chart should be of the same color so to facilitate quick switching you can use this menu to use single color for all bars
Much of the coloring can be discovered through playing with the options
All of the remaining charts behave similarly (except where the chart should not)
Dashboard Charts with Transparency
If you turn the opacity value for any chart you can create some beautiful combination charts. Here in the example below the Pie chart is behind the bar chart but since there is transparency set for the bar, it creates a nice glass effect
Some more color examples
And some more
Related posts: