Multiple bars in c3 gauge chart

Question

I'm attempting to create a stacked gauge chart using c3.js similar to the image below but cannot find any examples of this in the documentation. Is this even possible?

Answer 1

The C3.js library does not seem to allow this atm, although if you try to put 2 data arrays with different ids they seem to render one on top of another - I guess it would not be hard to refactor to support that - ask author or do it yourself (source is available on github)?

I managed to achieve it with a terrible hack - but might be worth it until the library supports it.

Create 2 gauge charts, making one of the div elements move to overlap the other. At the same time, make sure the second gauge chart is slightly smaller. Then you have to decide which of the 2 labels to hide..

Here is an html snippet:

<div id="chart1"></div>
<div id="chart2" style="position: relative; top: -140px;"></div>

Here is corresponding javascript:

var chart = c3.generate({
    bindto: $("#chart1")[0],
    data: {
        columns: [
            ['data', 91],
            ['data', 90]
       ],
        type: 'gauge',
   },
   gauge: {
            width: 10
    },
    size: {
        height: 160
    }
});
var chart = c3.generate({
    bindto: $("#chart2")[0],
    data: {
        columns: [
            ['data', 11],
            ['data', 20]
       ],
        type: 'gauge',
   },
   gauge: {
            width: 20
    },
    size: {
        height: 140
    }
});