Angular Material rendering c3 charts - json

Question

I have a few problems with displaying angular material elements and C3.js charts.
With new version of the angular material, in widgets appeared scroll bar.
Does anybody knows how to disable it? I want to show widgets with their fixed size.
Please take a look at the plunker.
The second problem is connected with C3 graphs.
After I open app in browser (at the plunker is also the case) and open the dialog the charts is displaying. Then I close the dialog and open again, the charts are broken.
What could be the cause of this problem? I use a lot of libraries in my project (ngAnimate, ngAria, ngCookies, ngResource, ngTouch, ui.router, ngMaterial,ngMdIcons,ui.grid,ui.grid.selection,ui.grid.cellNav,ui.grid.pagination,ui.grid.resizeColumns, leaflet-directive, bootstrap, jQuery, c3, d3). Do I need to take attention to the order that they are included?
Here is the controller for C3 chart (data come from external source - DB):
angular.module('app')
.controller('ChartCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
$scope.param = $stateParams.param_1;
d3.json('/chart1/'+$stateParams.param_1, function(err, data){
if(err){ throw err; }
$scope.data = data;
//console.log(data);
$scope.$apply();
$scope.chart = c3.generate({
bindto: '#chart1',
/*size: {
height: 350
},*/
data: {
json: $scope.data,
//columns: $scope.data,
keys: {
value: ['data1', 'data2'],
},
type: 'bar'
},
bar: {
width: {
ratio: 0.4 // this makes bar width 50% of length between ticks
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
});
}]);
And the html template which is included in panel-widget directive:
<div id="chart1" ng-controller="ChartCtrl">
<div id="chart1"></div>
</div>

Answer 1

You can do something like this to fix the size of the graph displayed in tab 1.
In side Tab1, make an SVG with fixed size and height like below:
<div id="tab1" ng-controller="GraphCtrl">
<svg id="chart1" width="100" height="100"></svg>
</div>
Bind the SVG to the graph like this:
$scope.chart_grid_lines = c3.generate({
bindto: d3.select('#chart1'), //binding to svg
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'spline'
},
legend: {
show: false
}
});
Working code here
Hope this helps!