I've recently implemented a basic donut chart using C3, which I've enclosed in a directive and everything is functioning smoothly.
Below is the code for my directive:
angular.module('dashboardApp').directive('donutChart', function() {
function link(scope, element, attr) {
scope.$watch(function() {
return scope.data;
},
function() {
if(scope.data !== undefined){
var chart = c3.generate({
bindto: 'donut-chart',
data:{
columns: scope.data,
type: 'donut'
},
donut:{
label : {
format: function(value,ratio,id){
return value;
},
}
},
tooltip:{
position: function(data,width,height,element){
return {top:-180,left:300}
}
},
});
}
}
)};
return {
restrict: 'EA',
scope: {
data: '='
},
link: link
};
});
In my HTML file, you can find the following structure:
<div class="row">
<div class="donut-route" >
<donut-chart data='routes'></donut-chart>
</div>
</div>
My objective is to dynamically resize the donut chart within its current div container.
I'm familiar with C3's resizing capabilities where values can be passed through. One approach could involve incorporating window sizes into the $scope.watch function to trigger a resize each time. However, I'm unsure if this would impose too much overhead. It seems that C3 graphs should resize automatically, but due to it being inside a directive, there might be limitations.
If anyone has any insights or guidance on this matter, I'd greatly appreciate it.