Change tooltip width ratio in C3 if Bar width ratio is set

Question

In C3 bar charts, when we set Width Ratio to less than 1, then the bar squeezes but the tooltip area does not. How can we set the tool tip to only show over bar not on the whole area like in the following example.

 var chart = c3.generate({ data: { columns: [ ['data1', -30, 200, 200, 400, -150, 250], ['data2', 130, 100, -100, 200, -150, 50], ['data3', -230, 200, 200, -300, 250, 250] ], type: 'bar', groups: [ ['data1', 'data2'] ] },bar: { width: { ratio: 0.5 } }, grid: { y: { lines: [{value:0}] } } }); setTimeout(function () { chart.groups([['data1', 'data2', 'data3']]) }, 1000); setTimeout(function () { chart.load({ columns: [['data4', 100, -50, 150, 200, -300, -100]] }); }, 1500); setTimeout(function () { chart.groups([['data1', 'data2', 'data3', 'data4']]) }, 2000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script> <div id="chart"></div>

Answer 1

Have you checked tooltip property? https://c3js.org/reference.html#tooltip-contents