My site needs to be able to compare two values visually. The comparison is trying to show how close (or far apart) the two values are numerically. I was thinking two bars like so:enter image description here However, since there is only two values, I feel like two bars isn't the best way to go. Is there any other way I should do this?

  • What do the values convey? What do they represent? Commented Jul 25, 2019 at 5:27
  • They represent the strength of two teams, so I want the user to be able to easily identify how even the teams are, or how much stronger one team is, just by glancing.
    – Andrew VII
    Commented Jul 25, 2019 at 5:39
  • Does each team have a color? A logo? Or just a name? Are we talking physical strength, or skill-based strength, or something else? Commented Jul 25, 2019 at 5:58
  • Hi @Andrew VII, thanks for your contribution to UXSE. How is the 'strength' of the teams measured? Can these values fluctuate significantly (i.e. do they have a large range of possible values) or are they generally fixed around a particular range? These types of information will help with selecting a suitable visualization style.
    – Michael Lai
    Commented Jul 25, 2019 at 23:41

3 Answers 3


If you aren't set on using bars, why not try a pie chart?

This is very crude, but with an appropriate key and supporting copy you could do something like this...

enter image description here

  • +1 Hi Calum, thanks for your contribution to UXSE. This might be one of the few cases where a pie chart is appropriate for displaying the data :)
    – Michael Lai
    Commented Jul 25, 2019 at 23:38

Bars seem totaly OK to me. But you might want to place them horizontally and not vertically this way you might even have space for an accurate description of the value.

If the value is quite close you could also use a secondary clue of which team is in the lead. This could be the color, an icon at the end of the line or a similar approach.

enter image description here


If the relative strengths of the two teams is more important than the absolute values, you could show both teams in one horizontal bar (imagine two teams playing tug-of-war1):

Relative strengths of two teams

Where the dashed line represents a tie between the two. Here, the two examples are on widely different scales, but you can clearly see which team is stronger in each case. Another advantage of this layout is that you can easily compare the comparative strengths of more than one pair of teams at the same time.

1 Actually, they would have to be playing push-of-war, since the stronger team has the larger segment. But hopefully you get the idea!

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.