I have a circular graph that plots energy usage as a ratio of the maximum. At 100% the graph forms a full circle.

The problem with this is that most of the time, a user's energy is approximately 10% of the graph- and the graph looks terrible.

I have considered the following solutions:

  • having bimodal a graph, switching colour set and labelling when under a threshold( average energy)
  • applying a non-linear function (square root) to the input, so the ratio is over represented at small numbers and under represented at maximum numbers (range is between 0-1 of users maximum)

Each of these approaches has some undesirable qualities.

The usage is for home energy, so promoting the user to reduce their energy usage is a beneficial outcome.

Example: enter image description here

  • Any screenshots to help us understand why it look 'terrible'? With information/data visualization the primary goal is to preserve the integrity of the details while also making it clear to the users what it is you are trying to represent to them.
    – Michael Lai
    Oct 1, 2016 at 2:39

3 Answers 3


Not sure what the actual constraints are, but I have provided some ideas based on two primary scenarios:

A - Sticking with the circular graph:

  • Use two colours and have the one with the softer shade/colour indicating the value you don't want to highlight, and the one with the stronger shade/colour indicating the value you want to highlight.
  • As you mentioned before, reverse the labelling and context perhaps to show amount of energy saved so that the graph looks more 'filled'.

B - using alternative methods of data representation:

  • Investigate in techniques like a bullet chart to represent current value against target values

  • Make the data representation more based on the value rather than graphical elements, so simply use the actual value and perhaps add an icon/symbol for trends (e.g. increase or dcrease from last day/week/month)


enter image description here

This is the Imperihome widget that does exactly the same thing as you'd like to accomplish.

As @Michael says, it might be right to consider alternative methods of data representation. In this case there are several ways to let the user know how much energy she is currently consuming and none of the methods are distracting the others.


If you use linear graphs, you can also implement some kind of zooming functionality, like the one shown in this live demo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.