I have a graph showing the load time distribution for websites within an industry. The x-axis is showing the load time buckets (<1 s, 1-2 s, 2-3 s, 4-5 s and so on) and the y-axis is showing number of sites. The idea is that a user should be able to get a holistic view of how websites within an industry performs. On this graph I would also like to display which load time bucket one or two specific sites belongs to so that the user can see how these sites compare to each other and the industry in general.

What I have so far is this...

Comparing one site to the industry

Comparing multiple sites to the industry

However, this is somewhat of a misrepresentation of the data since a site is not an entire bucket but rather part of it. Another issue is that when multiple sites end up in the same bucket (which is very common) there is no easy way of coloring the bar.

Is there a better way of highlighting which bucket a single data point belongs to?

  • how do you activate the highlighting? Is there an interaction, or do you just highlight the bars on loading for each of the companies?
    – Mike M
    May 14, 2019 at 14:10
  • 1
    Do you have more specific load-time data for each of the companies? If so, could you show the point at which they're located along the x-axis (maybe with a vertical line)?
    – 習約塔
    May 14, 2019 at 15:07
  • @MikeM Ah! I should have mentioned that it's part of an interactive dashboard and the highlighting happens on load. May 15, 2019 at 4:22
  • @xiota Yes, we have the exact load time for each of the companies that is highlighted. That's an interesting idea. Will try it. May 15, 2019 at 4:23

1 Answer 1


Consider a dot plot either overlaid across the top, or below, near the loading time values.

If you use separate visual indicators, you avoid coloring an entire bar, which as you stated misrepresents the bucket itself. This way you separate the distribution overall from the specific values, and can get more accurate values (if available) for each of the companies in your legend.

Use the same shape for your legend as you use for the plots so there's 1:1 mapping, and on hover you can have further details:

enter image description here

  • This is similar to what xiota suggested above. I like it :) Will try it May 15, 2019 at 8:38

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.