On making chart responsive the x,y axis line disappears - angularjs

Question

I made my chart Responsive , but what i noticed was on resize the line of x,y axis was disappearing .
I am sharing the
var app = angular.module('chartApp', []);
app.controller('LineGraphCtrl', ['$scope','$http',
function($scope,$http){
$scope.lineGraph={
72:{company:{ais_time:0},user:{ais_time:0}},
73:{company:{ais_time:3},user:{ais_time:2}},
74:{company:{ais_time:2},user:{ais_time:1}},
75:{company:{ais_time:2},user:{ais_time:3}},
76:{company:{ais_time:3},user:{ais_time:4}},
77:{company:{ais_time:1},user:{ais_time:1}},
78:{company:{ais_time:2},user:{ais_time:0}},
79:{company:{ais_time:4},user:{ais_time:3}}};
console.log($scope.lineGraph);
$scope.lineaGraphData=[];
$scope.UservsCompanyAIData=[];
for(var i in $scope.lineGraph) {
console.log(i);
for (var j in $scope.lineGraph[i]) {
if(j=="company") {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].company.ais_time,
"key": "company"
});
} else {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].user.ais_time,
"key": "user"
});
}
}
}
function getDateOfISOWeek(w, y) {
var simple = new Date(y, 0, 1 + (w - 1) * 7);
var dow = simple.getDay();
var ISOweekStart = simple;
if (dow <= 4)
ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
else
ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
return ISOweekStart;
};
for(var i=0;i<$scope.lineaGraphData.length;i++){
var weekStart=getDateOfISOWeek($scope.lineaGraphData[i].week,2015);
$scope.UservsCompanyAIData.push({"Date":weekStart,"Label":$scope.lineaGraphData[i].key,"AIvalue":$scope.lineaGraphData[i].AI});
}
console.log($scope.UservsCompanyAIData);
}]);
app.directive('userVsCompanyAI', function($parse, $window){
return{
restrict:'EA',
scope: {data: '=data'},
link: function(scope, element, attrs) {
scope.$watch('data', function (data) {
if (data) {
var data = scope.data;
//Dimensions of the Graph
var margin={top:30,right:20,left:50,bottom:80},
width=800-margin.left -margin.right,
height=400-margin.top-margin.bottom;
var color = d3.scale.category10();
var parseDate =d3.time.format("%d/%m").parse;
//Range of the Graph
var x = d3.time.scale().range([0,width]);
var y = d3.scale.linear().range([height,0]);
//Defining the Axis
var xAxis=d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m")).ticks(5);
var yAxis=d3.svg.axis().scale(y).orient("left").ticks(5);
//Defining the line for user & company's Avg
var AILine =d3.svg.line()
.x(function (d){return x(d.Date)})
.y(function (d) {return y(d.AIvalue)});
var el = element[0];
//Adding the SVG to the Graph
var UserVsCompanyAILineChart=d3.select(el)
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 400")
//class to make it responsive
.classed("svg-content-responsive", true)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
data.forEach(function (d) {
d.Date=d.Date;
d.AIvalue=+d.AIvalue;
});
//Setting the Domain of Scales based on Data
x.domain(d3.extent(data,function (d) {
return d.Date;
}));
y.domain([0,d3.max(data,function (d) {
return d.AIvalue;
})]);
var dataNest=d3.nest()
.key(function (d) {
return d.Label;
})
.entries(data);
var legendRectSize = 16;
var legendSpace = (width)/dataNest.length;
dataNest.forEach(function (d,i) {
UserVsCompanyAILineChart.append("path")
.attr("class","line")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("d",AILine(d.values));
UserVsCompanyAILineChart.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", height + (margin.bottom/2)+ 30)
.attr("class", "WizUservsCompanyAvgReportLegend")
.style("fill", function() {
return d.color = color(d.key); })
.text(d.key);
UserVsCompanyAILineChart.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.attr("x", ((legendSpace/2)-30)+i*(legendSpace))
.attr("y", height + (margin.bottom/2)+ 15)
.style('fill', function() {
return d.color = color(d.key); })
.style('stroke', function() {
return d.color = color(d.key); });
});
UserVsCompanyAILineChart.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(xAxis)
UserVsCompanyAILineChart.append("g")
.attr("class","y axis")
.call(yAxis)
}
})
}
};
});
/* Styles go here */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
/*SVG Responsive*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
/*SVG Responsive Ends*/
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" type="text/css" />
</head>
<body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
<div ng-app="chartApp">
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 30%;width: 30%;float:right">
<div class="panel-body">
<div user-vs-company-a-i="" data="UservsCompanyAIData"></div>
</div>
</div>
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 70%;width: 70%;float:right" >
<div class="panel-body" >
<div user-vs-company-a-i data="UservsCompanyAIData"></div>
</div>
</div>
</div>
</div>
</body>
</html>
link here .
There are 2 charts one with smaller size , other with bigger one . Here u can see that the chart with bigger size is showing x,y axis line but in the smaller graph the x,y axis line is not visible . Is there any possible way in which we can make the chart responsive but still the x,y axis line will be viible .
Any help is appreciated .
Thanks in advance .

Answer 1

To stop them disappearing, make them thicker.
At the moment the stroke-width setting for your axes is 1. The main graph is at roughly 1:1 scale, so they axis lines are approximately one pixel in width. In your small scale version the axis lines are being drawn with a correspondingly smaller thickness - less than half a pixel. You can't draw half a pixel, so the browser draws the lines with a light grey colour instead, making them barely visible.
To fix, make the axis lines thicker:
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 2;
shape-rendering: crispEdges;
}
If "2" is too thick for you, you can use an intermediate value, such as 1.5.

Answer 2

The Solution
I suggest to redraw the chart when the browser is resized - simply by registering a listener to the window resize event. Don't forget to debounce / throttle the event so that redrawing just happens once (i.e. debouncing) (or only a few times, i.e. throttling) the browser has finished resizing.
Another hack would be to make the stroke-width thicker, but in my opinion this leads to results that look good in some resolution and bad in other. Plus, when the chart with a thicker stroke-width is rendered in a mobile-sized browser window, you end up with awkwardly looking thick axis.
So in my opinion, the best option is to redraw the chart on resize.
The Reason
When the browser is resized to a smaller size, the already rendered SVG scales down. As the first answer already pointed out, the line with a stroke-width=1 at some point becomes less than 0.5 from its original thickness and the browser decides to not draw it anymore.