How to add colors to your mockup Charts and Dashboards

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


4. We update the labels and values columns and then click OK


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:

  1. How to build Table Grids
  2. KPI widget Mockup for Dashboards
  3. How to mockup dials, speedometer, gauges for Dashboards
  4. MockupTiger Release 1.2.63 – 20110825
  5. Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?

Get MockupTiger downloaded on your PC

Posted in Tutorials

Would you like to build your application?

Start by sketching your idea into a wireframe in few clicks