使用c3.js创建具有高值和低值的条形图

Question

I have been looking into c3.js for a few days now. Its been able to produce graphs for most of my needs.The only thing I cant figure out to do with it is , how to display a bar chart when you have high and low values specified.

ex: my sample array will be something like this

Categories : ['cat1', 'cat2' ,'cat3' ,'cat4']
Low : [0,0,50,40]
High : [90,80,40,60]

Basically each bar for each category will be based on these high and low values.

Thanks !

Answer 1

You can try this sample:

var chart = c3.generate({
    data: {
        columns: [
            ['Low', 0,0,50,40],
            ['High', 90,80,40,60]
        ]
    },
    axis: {
        x: {
            type: 'category',
            categories: ['cat1', 'cat2', 'cat3', 'cat4']
        }
    }
});

Result:

To know how to install c3.js, please read an official documentation