2

I have a grouped column chart built with d3.js v4. When the user clicks on a single chart, the other ones will become less visible to highlight the clicked chart. Now I have an usability issue: when the chart is very short, it's a little bit too hard to click on it, so I'd like to detect the click on all the section above the chart.

function onSelectSingleBarChart(d, i, j) {...

Here is the jsfiddle.

iehrlich
  • 3,572
  • 4
  • 34
  • 43
Stack Diego
  • 1,309
  • 17
  • 43

1 Answers1

2

One way would be to

  • Add a transparent rectangle over each group chart so that it consumes the click.

  • On click of the transparent bar call the onSelectSingleBarChart just as you were doing on individual bar chart

    grp.append("rect") .attr("y", function(d) {return y(y.domain()[1]);}) .attr("width", x0.bandwidth()) .attr("height", y.domain()[1])//max domain .attr("fill", function(d) { return "transparent"; }) .on("click", onSelectSingleBarChart);

working code here

Cyril Cherian
  • 32,177
  • 7
  • 46
  • 55