I need help adjusting two pie charts on the left and right ends of a header. Every time I zoom in (ctrl and +) they misalign. I set the css to appear adjusted, but as soon as I zoom in, everything looks ugly. Thanks in advance for your help. Here is the code:
angular.module('App', ['nvd3']).controller('Ctrl', function($scope){
$scope.options = {
chart: {
type: 'pieChart',
height: 300,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false
}
};
$scope.data = [
{key: "One", y: 5},
{key: "Two", y: 2},
{key: "Three", y: 9},
{key: "Four", y: 7},
{key: "Five", y: 4},
];
})body{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
header {
display:block;
position:fixed;
top:0;
left:9%;
width:80%;
height: 35%;
background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#bde8fc)) no-repeat;
margin: auto;
padding: 12px;
border: 1px solid black;
border-collapse: collapse;
}
.opts1 {
position: absolute;
margin-left: 1%;
margin-top: -50px;
}
.opts2 {
position: absolute;
margin-left: 70%;
margin-top: -50px;
}
h3 {
margin-top: -40px;
margin-left: 75px;
}<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="App" ng-controller="Ctrl">
<header>
<div class="opts1">
<nvd3 options="options" data="data"></nvd3>
<h3>Features Trends</h3>
</div>
<div class="opts2">
<nvd3 options="options" data="data"></nvd3>
<h3>Features Trends</h3>
</div>
</header>
</body>