Customize gauge with C3.js

Question

Hello, I am developing some dashboards with the c3js library and the need arose to create a "gauge" chart with pointer and color areas according to the value. From what I’ve researched, there’s no simple way to do the same with C3js (without nailing D3). So, researching other alternatives, I found the highcharts, which has some types of Gauge graphics, but it is necessary to pay a license to use the library.

I did some tests in the codepen with the highcharts and I arrived at a satisfactory result, and I wonder if there is way to recreate this chart using the C3js.

var gaugeOptions = {

  chart: {
    type: 'solidgauge'
  },

  title: null,

  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '70%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },

  tooltip: {
    enabled: false
  },

  // the value axis
  yAxis: {
    stops: [
      [0.222222222, '#DF5353'], // red
      [0.444444444, 'orange'], // red
      [0.666666667, '#DDDF0D'], // yellow
      [1, '#55BF3B'], // green
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 5,
    title: {
      y: -80
    },
    labels: {
      y: 20
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 5,
        borderWidth: 0,
        useHTML: true
      },
      innerRadius: '70%'
    }
  }
};

// The speed gauge
var gaugeChart = Highcharts.chart('gauge', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 9000,
    title: {
      text: 'Entradas no Mês'
    },
    tickPositions: [0, 2000, 4000, 6000, 9000],
    plotBands: [{
      from: 0,
      to: 2000,
      color: '#DF5353',
      outerRadius: '68%'
    },{
      from: 2001,
      to: 4000,
      color: 'orange',
      outerRadius: '68%'
    },{
      from: 4001,
      to: 6000,
      color: '#DDDF0D',
      outerRadius: '68%'
    },{
      from: 6001,
      to: 9000,
      color: '#55BF3B',
      outerRadius: '68%'
    }],
    labels: {
      align: 'center',
      distance: -2,
    }
  },

  credits: {
    enabled: false
  },

  series: [{
    name: 'Value',
    data: [0],
    dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]

}));

// Bring life to the dials
setInterval(function() {
  var point = gaugeChart.series[0].points[0];
  var value = Math.floor(Math.random() * 9000);
  point.update(value);
}, 3000);

.outer {
  width: 600px;
  height: 200px;
  margin: 0 auto;
}
.container {
  width: 300px;
  float: left;
  height: 200px;
}
.highcharts-yaxis-grid .highcharts-grid-line {
  display: none;
}

@media (max-width: 600px) {
  .outer {
    width: 100%;
    height: 400px;
  }
  .container {
    width: 300px;
    float: none;
    margin: 0 auto;
  }

}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div class="outer">
  <div id="gauge" class="container"></div>
</div>