Where is this extra whitespace coming from?

Question

I'm creating gauge charts using c3.js . I'm setting the height and width both to 75 because that's the right size of the gauge that I'm wanting, however when they get generated, there's always extra whitespace in the container that's messing me up.

I really want the svg that gets created to have a height of 60 in order to move the label up properly. The problem, is that when I set the height/width of the chart to 60, the size of the gauge itself gets way too small because of this extra whitespace.

I've tried setting the padding of everything that I know of to 0. I've searched through the documentation, there's always a chance that I've overlooked something. I can always try to do some hacky css to get around it, but before I do that, I'd like to change something in the configuration if I can.

Essentially, I want the chart to take up the full size that I specify. It seems that the legend, that I've specified to not show, is still taking up space that the chart should use.

http://jsfiddle.net/kLsox4ya/1/

<div class='row'>
  <div class="col-12" id="chart"></div>
  <p class="col-12 f-small">PERFECT</p>
</div>

var chart = c3.generate({
   bindto: '#chart',
   data: {
       columns: [['data', 0]],
       type: 'gauge'
   },
   gauge: {
       fullCircle: true,
       startingAngle: 2 * Math.PI,
       width: 3,
       expand: false,
       label: {
          show: false
        }
   },
   size: {
       height: 75,
       width: 75
   },
   legend: {
       show: false
   },
   interaction: {
       enabled: false
   }

});

Answer 1

You are going to have a hard time getting that much control over c3 . It's doing a lot under the hood to calculate positions for axis, legends, etc... that you aren't even using.

I think you have two options:

1. Code it yourself using straight d3
2. Resort to a little hackery. For instance here , I've manually adjust the height after it renders.

 var chart = c3.generate({ bindto: '#chart', data: { columns: [['data', 90]], type: 'gauge' }, tooltip: { show: false }, color: { pattern: ['#565656', '#cfd628', '#e8b532', '#28d632'], threshold: { values: [40, 80, 90, 100] } }, gauge: { fullCircle: true, startingAngle: 2 * Math.PI, width: 3, label: { format: function (value, ratio) { return ''; }, extents: function (value) { return ''; } } }, size: { height: 75, width: 75 }, legend: { show: false }, interaction: { enabled: false }, axis: { x: { show: false }, y: { show: false } }, padding: { top: 0, right: 0, bottom: 0, left: 0 }, onrendered: function(){ this.svg.attr('height', 55); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div class='row'> <div class="col-12" id="chart"></div> <p class="col-12 f-small">PERFECT</p> </div>