How much it is user friendly to make the bars clickable in bar-chart?

by Jivan   Last Updated May 05, 2018 09:16 AM

I'm designing a bar-chart where each bar has more content to be explored. After the click in the red bar, I'm thinking to show list of all employees (90, 55, 33, ....) who became late in the respective days.

My question is "Is it user friendly?

I've not seen anywhere like this.

enter image description here



Answers 4


Since this is about a bar chart in HTML, I'm going to suggest an implementation that should be accessible to screen reader users.

The bar chart itself is a single image, embedded by means of a normal img element:

<img src="chart.png" alt="distribution of employees who came late to work, by minutes of delay" id="chart" />

(This can optionally be wrapped in a figure element with caption.)

Above the image, you put an instruction such as, "Click on the individual bars in the chart to see the corresponding list of employees."

Then you add an image map with an "area" for each bar in the chart, and connect it to the bar chart (using the attribute usemap on the img element):

<p>Click on the individual bars in the chart to see the corresponding list of employees.</p>
<img src="chart.png" 
  alt="distribution of employees who came late to work, by minutes of delay" 
  id="chart" usemap="barchartmap" />

<map name="barchartmap">
 <area alt="10 minutes late" shape="rect" coords="[fill in coordinates here]" 
   href="10minuteslate.html" />
 <area alt="11 minutes late" shape="rect" coords="[fill in coordinates here]" 
   href="11minuteslate.html" />
  <!--areas for other bars to be added here -->
</map>

The alt attributes on the area elements tell screen reader users which bar they are at, and they can then decide whether to follow the link or not. This is essentially an example of the WCAG 2.0 technique Providing text alternatives for the area elements of image maps.

A somewhat related question on UX SE is Chart drill-down affordance?.

People have been looking for JavaScript libraries for interactive charts for quite a while, and several options are available: Javascript library for clickable bar chart?. However, the above technique does not require JavaScript.

The Wall Street Journal has a clickable bar chart representing what Greece owes when; the individual bars don't take you to a different page but (strictly speaking) a different graph (though technically it swaps charts in place). After clicking on a bar in the chart, the instruction "Show all years" appears above the chart.

Christophe Strobbe
Christophe Strobbe
December 06, 2016 12:18 PM

Although it might not be available on some devices, this functionality is very helpful and the ultimate feature in Drill-Down scenarios.

Vladimir Georgiev
Vladimir Georgiev
December 06, 2016 13:01 PM

No, it's not user friendly. How do the interactive bars differ from the bars inside a static image? magic word: affordance. You have to give the user clues so they know they can click the bars

Federico Morandi
Federico Morandi
December 07, 2016 16:28 PM

In my opinion, it is ok to add info in tooltips but to be more user-friendly, you should make them appears on hover, not on click. On mobile the user may not click, so don’t depend on these elements.

Think of tooltips as providing expanded information, so a tooltip shouldn’t be the only way a user can see the info.

Madalina Taina
Madalina Taina
May 05, 2018 08:59 AM

Related Questions


Using switch to update the choice

Updated October 25, 2018 10:16 AM