Problem detail : X-Axis are colliding when it is not filtered by a year, trying to make the X-Axis visible with multiple Year selection. It Works good for a year.
With No filter Selected with multiple years it looks like this:
Issue.jpg
Expected Output :
To show all the years data with similar spacing with scroll
Observations in our trouble shooting :
1. Tried to modify the transform / translate function
//Code
var plot = svg.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
var plotWidth = width - margin.left - margin.right;
var plotHeight = svgHeight - margin.top - margin.bottom;
2. Adjusting Width to 100% .
3. CSS container adjusting Div tag to overflow scroll
but none of these helped to resolve the issue , please advise on any suggestions to resolve this .
