Javascript C3.js-在条形图中添加X轴和图例之间的间距

我有一个

C3.js

条形图，我试图在x轴和图例之间添加一些间距，以避免以下视觉不愉快：

我已尝试执行以下操作，但对图表没有任何影响：

#stacked_bar_chart_container .c3-axis-x {
    margin-bottom: 5px;
}

我甚至试着用

.c3图例项做同样的事情，但是用
边距顶部：5px相反，但仍然没有效果

我还想指出的是，通过删除
#堆叠的"条形图"容器
（此图形绑定到的
div
容器），仍然没有任何效果
 您可以使用填充：{bottom:20}调整图表和底部图例之间的间距，这将在图表和图例之间添加额外的20px。如果将图例放置在右侧，则可以使用填充：{right:20}

由于填充将使图表变小，因此您可能希望分别使用大小：{height:480}或大小：{width:640}来调整图表的高度或宽度

我创建了一个小提琴的例子

以下是示例JavaScript代码：

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']
      ]
   },
   grid: {
      y: {
          lines: [{value:0}]
      }
   },
   legend: {
      position: 'bottom'
   },
   size: {
      height: 300 //adjust chart height
   },
   padding: {
      bottom: 20 //adjust chart padding bottom
   }
});